Jquery Div slider loop

Jquery Div slider loop - javascript

I have a small problem. Div slides and reaching end it's quickly show div 1 without pause. Div 5 cannot see.
$(function(){
var width = '100vw';
var speed = 1500;
var pause = 3000;
var current = 1;
var $slider = $('.slider');
var $slides = $slider.find('.slides');
var $slide = $slides.find('.slide');
setInterval(function(){
$slides.animate({'margin-left': '-='+width}, speed, function(){
current++;
if(current == $slide.length){
$slides.css('margin-left', 0);
current = 1;
}
});
}, pause);
});
But if I add delay
if(current == $slide.length){
$(this).delay(pause).queue(function(){
$slides.css('margin-left', 0);
});
current = 1;
}
$(function(){
var width = '100vw';
var speed = 1500;
var pause = 3000;
var current = 1;
var $slider = $('.slider');
var $slides = $slider.find('.slides');
var $slide = $slides.find('.slide');
setInterval(function(){
$slides.animate({'margin-left': '-='+width}, speed, function(){
current++;
if(current == $slide.length){
$(this).delay(pause).queue(function(){
$slides.css('margin-left', 0);
});
current = 1;
}
});
}, pause);
});
.slider {
width: 100%;
height:auto;
text-align: center;
overflow: hidden;
}
.slides {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
/*
scroll-snap-points-x: repeat(300px);
scroll-snap-type: mandatory;
*/
}
.slides::-webkit-scrollbar {
width: 1px;
height: 10px;
}
.slides::-webkit-scrollbar-thumb {
background: #bbb;
}
.slides::-webkit-scrollbar-track {
background: transparent;
}
.slides > div {
scroll-snap-align: start;
flex-shrink: 0;
width: 100vw;
height: 100vh;
background: #eee;
transform-origin: center center;
transform: scale(1);
transition: transform 0.5s;
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-size: 100px;
}
.slides > div:target {
/* transform: scale(0.8); */
}
.author-info {
background: rgba(0, 0, 0, 0.75);
color: white;
padding: 0.75rem;
text-align: center;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
margin: 0;
}
.author-info a {
color: white;
}
img {
object-fit: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.slider > a {
display: inline-flex;
width: 1.5rem;
height: 1.5rem;
background: white;
text-decoration: none;
align-items: center;
justify-content: center;
margin: 0 0 0.5rem 0;
position: relative;
border:1px solid green;
}
.slider > a:active {
top: 1px;
}
.slider > a:focus {
background: #666;
}
/* Don't need button navigation */
#supports (scroll-snap-type) {
.slider > a {
display: none;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slider">
<div class="slides">
<div id="slide-1" class="slide">Slide 1</div>
<div id="slide-2" class="slide">Slide 2</div>
<div id="slide-3" class="slide">Slide 3</div>
<div id="slide-4" class="slide">Slide 4</div>
<div id="slide-5" class="slide">Slide 5</div>
</div>
</div>
It's show Div 5 like it needed, but after showing div 1 it's not sliding anymore.
So what can I do to keep looping and shows each div given time?
Maybe someone can show how can make slider slide backwards after reaching last div and slides back to div one?

First : BAD solution for your problem : ( go to Second)
Your animation code stucks in a queue once the current == $slide.length , you should pass the next function as argument in the queue calback then use next() to trigger other function . as below :
if(current == $slide.length){
$(this).delay(pause).queue(function(next){ //<--- here next argument
$slides.css('margin-left', 0);
next(); // <----- next call
});
current = 1;
}
but this will not make the annimation work as expected
Second : proper simple solution
What I suggest is, set the animation left value as variable, then check if it's the last so slide to 0 other wise continue left view-width sliding
See working snippet :
$(function(){
var width = '100vw';
var speed = 1500;
var pause = 3000;
var current = 1;
var $slider = $('.slider');
var $slides = $slider.find('.slides');
var $slide = $slides.find('.slide');
var leftAnnime = '-='+width;
setInterval(function(){
$slides.animate({'margin-left': leftAnnime }, speed, function(){
current++;
if( current == $slide.length ) {
leftAnnime = 0;
current = 0;
} else {
leftAnnime = '-='+width;
}
});
}, pause);
});
.slider {
width: 100%;
height:auto;
text-align: center;
overflow: hidden;
}
.slides {
display: flex;
overflow-x: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
/*
scroll-snap-points-x: repeat(300px);
scroll-snap-type: mandatory;
*/
}
.slides::-webkit-scrollbar {
width: 1px;
height: 10px;
}
.slides::-webkit-scrollbar-thumb {
background: #bbb;
}
.slides::-webkit-scrollbar-track {
background: transparent;
}
.slides > div {
scroll-snap-align: start;
flex-shrink: 0;
width: 100vw;
height: 100vh;
background: #eee;
transform-origin: center center;
transform: scale(1);
transition: transform 0.5s;
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-size: 100px;
}
.slides > div:target {
/* transform: scale(0.8); */
}
.author-info {
background: rgba(0, 0, 0, 0.75);
color: white;
padding: 0.75rem;
text-align: center;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
margin: 0;
}
.author-info a {
color: white;
}
img {
object-fit: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.slider > a {
display: inline-flex;
width: 1.5rem;
height: 1.5rem;
background: white;
text-decoration: none;
align-items: center;
justify-content: center;
margin: 0 0 0.5rem 0;
position: relative;
border:1px solid green;
}
.slider > a:active {
top: 1px;
}
.slider > a:focus {
background: #666;
}
/* Don't need button navigation */
#supports (scroll-snap-type) {
.slider > a {
display: none;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slider">
<div class="slides">
<div id="slide-1" class="slide">Slide 1</div>
<div id="slide-2" class="slide">Slide 2</div>
<div id="slide-3" class="slide">Slide 3</div>
<div id="slide-4" class="slide">Slide 4</div>
<div id="slide-5" class="slide">Slide 5</div>
</div>
</div>

Related

Try to hide a class when "mouseleve"?

I try to solve a problem. I have a video player on my website. I want to manipulate some classes i created like the navigation bar on the bottom of the video.
The video player has a navigation bar. I want to hide the navigation bar when my mouse is not above the video:
I try to move hide the navigation list with this:
var navigation = document.getElementById("videoslider").getElementByClassName("navigation");
document.getElementById("videoslider").addEventListener("mouseleave", function() {
navigation.style.visibility = "hidden";
});
I cant make it work. What is wrong here?
<script type="text/javascript">
var sliderVidEl = document.getElementById("sliderVid");
var overlay = document.getElementById("wrapper");
function playPause() {
if (sliderVidEl.paused) {
sliderVidEl.play();
overlay.style.backgroundImage = "";
} else {
sliderVidEl.pause();
overlay.style.backgroundImage = "url('https://felixandstefanproduction.de/wp-content/uploads/2023/01/playOverlay.png')";
}
}
function videoselector (videoLink) {
sliderVidEl.muted = false;
overlay.style.backgroundImage = "";
document.getElementById('sliderVid').src=videoLink;
}
//Mute button
$('#sliderVidMute').click(function(){
if( $("#sliderVid").prop('muted') ) {
$("#sliderVid").prop('muted', false);
} else {
$("#sliderVid").prop('muted', true);
}
});
</script>
<script>
window.onload=function(){
var navigation = document.getElementById("videoslider").getElementByClassName("navigation");
document.getElementById("videoslider").addEventListener("mouseleave", function() {
navigation.style.visibility = "hidden";
});
document.getElementById("videoslider").addEventListener("mouseover", function() {
navigation.style.visibility = "visible";
});
</script>
<style>
#videoslider{
position: relative;
width: 100%;
height: 75vh;
z-index: 1;
}
#videoslider video{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}
#videoslider .navigation{
position: absolute;
padding: 1px;
bottom: 0%;
width: 80%;
margin-left: 10%;
z-index: 100;
display: flex;
justify-content: center;
align-items: center;
}
#videoslider .navigation li{
list-style: none;
cursor: pointer;
border-radius: 4px;
margin: 1px;
opacity: 0.7;
}
#videoslider .navigation li img{
transition: 0.5s;
width: 120px !important;
height: 70px;
}
#videoslider .navigation li img:hover{
scale: 1.4;
}
#videoslider .buttonMute{
color: none;
border: none;
border-radius: 10px;
background-image: url( 'https://felixandstefanproduction.de/wp-content/uploads/2023/01/icon_mute.png' );
background-size: 30px 30px;
background-color: transparent;
background-repeat: no-repeat;
background-position: center;
opacity: 0.8;
position: absolute;
padding: 1px;
bottom: 3%;
height: 40px;
width: 40px;
margin-left: 2%;
margin-top: 2%;vide
display: flex;
justify-content: center;
align-items: center;
}
#wrapper {
width: 100%;
height: 100%;
background-image: ;
background-position: center;
background-size: cover;
}
#media only screen and (max-width: 600px) {
#videoslider .navigation li img{
transition: 0.5s;
width: 68px !important;
height: 40px;
}
#videoslider .navigation{
width: 90%;
margin-left: 5%;
}
}
</style>
<section id="videoslider">
<div id="wrapper" onclick="playPause()">
<video id="sliderVid" loop playsinline autoplay="true" muted="true">
<source src="https://felixandstefanproduction.de/wp-content/uploads/2023/01/LoopLoop.mp4">
</video>
</div>
<ul class="navigation">
<li onclick="videoselector('https://felixandstefanproduction.de/wp-content/uploads/2023/01/Trailer_169_TSVStarnberg_HD_20RF_WO.mp4')"><img src="https://felixandstefanproduction.de/wp-content/uploads/2023/01/Thumb_TSVStarnberg.jpg"></li>
</section>
<script type="text/javascript">
var sliderVidEl = document.getElementById("sliderVid");
var overlay = document.getElementById("wrapper");
function playPause() {
if (sliderVidEl.paused) {
sliderVidEl.play();
overlay.style.backgroundImage = "";
} else {
sliderVidEl.pause();
overlay.style.backgroundImage = "url('https://felixandstefanproduction.de/wp-content/uploads/2023/01/playOverlay.png')";
}
}
function videoselector(videoLink) {
sliderVidEl.muted = false;
overlay.style.backgroundImage = "";
document.getElementById('sliderVid').src=videoLink;
}
//Mute button
$('#sliderVidMute').click(function(){
if( $("#sliderVid").prop('muted') ) {
$("#sliderVid").prop('muted', false);
} else {
$("#sliderVid").prop('muted', true);
}
});
</script>
<script>
window.onload=function(){
var navigation = document.getElementByClassName("navigation");
document.getElementById("videoslider").addEventListener("mouseleave", function() {
navigation.style.visibility = "hidden";
});
document.getElementById("videoslider").addEventListener("mouseover", function() {
navigation.style.visibility = "visible";
});
</script>

Use mouseover event to remove the .hidden CSS. The CSS .hidden class should have display: none in it.
.addEventListener("mouseover", (event) => {
// remove .hidden from your taskbar
}

targeting click of a specific button type with jquery

I have a simple jquery block where I'm navigating through text slides with buttons. This is working and I don't want to change how it's operating but I would like to make it automatic as well. In other words, if nobody clicks the buttons the process would automatically proceed to the next every 4 or 5 seconds.
One thought I had was to simulate a next button click with jquery, but I'm confused on how to actually target the next button due to the way I've declared my buttons. I have a setInterval for 4 seconds that triggers the data-carousel-button but how do I actually target the 'next' version of that button?
const buttons = document.querySelectorAll("[data-carousel-button]")
buttons.forEach(button => {
button.addEventListener("click", () => {
const offset = button.dataset.carouselButton === "next" ? 1 : -1
const slides = button
.closest("[data-carousel]")
.querySelector("[data-slides]")
const activeSlide = slides.querySelector("[data-active]")
let newIndex = [...slides.children].indexOf(activeSlide) + offset
if (newIndex < 0) newIndex = slides.children.length - 1
if (newIndex >= slides.children.length) newIndex = 0
slides.children[newIndex].dataset.active = true
delete activeSlide.dataset.active
})
})
setInterval(function() {
$("data-carousel-button").trigger("click");
}, 4000);
.slideshow_overlay {
padding: 30px;
position: absolute;
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px;
bottom: 5;
bottom: 0;
height: 15vh;
background: rgba(0, 0, 0, 0.3);
width: 100vw;
margin-left: 0px;
}
.slideshow_overlay-btnGroup {
display: flex;
}
.hero_slideshow {
width: 100vw;
height: calc(100vh - 105px);
min-height: 400px !important;
margin-top: 105px;
position: relative;
}
.hero_slideshow ul {
margin: 0;
padding: 0;
list-style: none;
}
.hero_carousel-button {
backgorund: none;
border: none;
z-index: 2;
font-size: 4rem;
top: 50%;
transform: translateY(-50%);
color: rgba(255, 255, 255, .5);
cursor: pointer;
border-radius: .25rem;
padding: 0 .5rem;
background-color: rgba(0, 0, 0, .1);
}
.hero_carousel-button:hover,
.hero_carousel-button:focus {
color: white;
background-color: rgba(0, 0, 0, .2);
}
.slide_hero {
position: absolute;
inset: 0;
opacity: 0;
transition: 200ms opacity ease-in-out;
transition-delay: 200ms;
}
.slide_hero>.slide_hero__img {
display: block;
width: 100%;
height: calc(100vh - 105px);
min-height: 400px !important;
object-fit: cover;
object-position: center;
}
.slide_hero[data-active] {
opacity: 1;
z-index: 1;
transition-delay: 0ms;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section aria-label="Hero Slideshow">
<div class="hero_slideshow" data-carousel>
<button class="hero_carousel-button prev" data-carousel-button="prev">Prev</button>
<button class="hero_carousel-button next" data-carousel-button="next">next</button>
<ul data-slides>
<li class="slide_hero" data-active>
Test 1
</li>
<li class="slide_hero">
Test 2
</li>
</ul>
</div>
</section>

You are not supplying the correct selector in your setInterval callback so you should change this
setInterval(function() {
$("data-carousel-button").trigger("click");
}, 4000);
into this
setInterval(function() {
// this selector, which is called attribute selector, will target the buttons having the "data-carousel-button" set to "next"
$("[data-carousel-button=next]").trigger("click");
}, 4000);
And here's a live demo of your code's corrected version:
const buttons = document.querySelectorAll("[data-carousel-button]")
buttons.forEach(button => {
button.addEventListener("click", () => {
const offset = button.dataset.carouselButton === "next" ? 1 : -1
const slides = button
.closest("[data-carousel]")
.querySelector("[data-slides]")
const activeSlide = slides.querySelector("[data-active]")
let newIndex = [...slides.children].indexOf(activeSlide) + offset
if (newIndex < 0) newIndex = slides.children.length - 1
if (newIndex >= slides.children.length) newIndex = 0
slides.children[newIndex].dataset.active = true
delete activeSlide.dataset.active
})
})
setInterval(function() {
$("[data-carousel-button=next]").trigger("click");
}, 4000);
.slideshow_overlay {
padding: 30px;
position: absolute;
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px;
bottom: 5;
bottom: 0;
height: 15vh;
background: rgba(0, 0, 0, 0.3);
width: 100vw;
margin-left: 0px;
}
.slideshow_overlay-btnGroup {
display: flex;
}
.hero_slideshow {
width: 100vw;
height: calc(100vh - 105px);
min-height: 400px !important;
margin-top: 105px;
position: relative;
}
.hero_slideshow ul {
margin: 0;
padding: 0;
list-style: none;
}
.hero_carousel-button {
backgorund: none;
border: none;
z-index: 2;
font-size: 4rem;
top: 50%;
transform: translateY(-50%);
color: rgba(255, 255, 255, .5);
cursor: pointer;
border-radius: .25rem;
padding: 0 .5rem;
background-color: rgba(0, 0, 0, .1);
}
.hero_carousel-button:hover,
.hero_carousel-button:focus {
color: white;
background-color: rgba(0, 0, 0, .2);
}
.slide_hero {
position: absolute;
inset: 0;
opacity: 0;
transition: 200ms opacity ease-in-out;
transition-delay: 200ms;
}
.slide_hero>.slide_hero__img {
display: block;
width: 100%;
height: calc(100vh - 105px);
min-height: 400px !important;
object-fit: cover;
object-position: center;
}
.slide_hero[data-active] {
opacity: 1;
z-index: 1;
transition-delay: 0ms;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section aria-label="Hero Slideshow">
<div class="hero_slideshow" data-carousel>
<button class="hero_carousel-button prev" data-carousel-button="prev">Prev</button>
<button class="hero_carousel-button next" data-carousel-button="next">next</button>
<ul data-slides>
<li class="slide_hero" data-active>
Test 1
</li>
<li class="slide_hero">
Test 2
</li>
</ul>
</div>
</section>
Learn more about Attribute Selectors on MDN.

You are REALLY overthinking this. The data attributes are not necessary here
I had to fix the CSS to just use .active
const $slides = $(".slides li");
$(".hero_carousel-button").on("click", function() {
const next = $(this).is(".next");
const idx = $slides.filter(".active").index()
let $activeSlide = $slides.eq(idx + (next ? 1 : -1))
if ($activeSlide.length === 0) {
$activeSlide = $slides[next ? "first" : "last"]() // first or last
}
$slides.removeClass("active");
$activeSlide.addClass("active");
})
setInterval(function() {
$(".next").trigger("click");
}, 4000);
.slideshow_overlay {
padding: 30px;
position: absolute;
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px;
bottom: 5;
bottom: 0;
height: 15vh;
background: rgba(0, 0, 0, 0.3);
width: 100vw;
margin-left: 0px;
}
.slideshow_overlay-btnGroup {
display: flex;
}
.hero_slideshow {
width: 100vw;
height: calc(100vh - 105px);
min-height: 400px !important;
margin-top: 105px;
position: relative;
}
.hero_slideshow ul {
margin: 0;
padding: 0;
list-style: none;
}
.hero_carousel-button {
background: none;
border: none;
z-index: 2;
font-size: 4rem;
top: 50%;
transform: translateY(-50%);
color: rgba(255, 255, 255, .5);
cursor: pointer;
border-radius: .25rem;
padding: 0 .5rem;
background-color: rgba(0, 0, 0, .1);
}
.hero_carousel-button:hover,
.hero_carousel-button:focus {
color: white;
background-color: rgba(0, 0, 0, .2);
}
.slide_hero {
position: absolute;
inset: 0;
opacity: 0;
transition: 200ms opacity ease-in-out;
transition-delay: 200ms;
}
.slide_hero>.slide_hero__img {
display: block;
width: 100%;
height: calc(100vh - 105px);
min-height: 400px !important;
object-fit: cover;
object-position: center;
}
.slide_hero.active {
opacity: 1;
z-index: 1;
transition-delay: 0ms;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<section aria-label="Hero Slideshow">
<div class="hero_slideshow">
<button class="hero_carousel-button prev">Prev</button>
<button class="hero_carousel-button next">next</button>
<ul class="slides">
<li class="slide_hero active">
Test 1
</li>
<li class="slide_hero">
Test 2
</li>
<li class="slide_hero">
Test 3
</li>
<li class="slide_hero">
Test 4
</li>
</ul>
</div>
</section>

Since your carousal is in loop (like if it a last slider then it go back to first) you can target the next button alone.
And also you need to use "clearInterval" function along with this In-order to avoid the slider override behaviour (if you are trying to interfere when the auto carousel is also trying to run the next button) that you can prevent by clearing the interval on every button click made by you.
This code made your carousel flexible.
See working example here: https://jsbin.com/diwomakime/edit?html,css,js,output
const buttons = document.querySelectorAll("[data-carousel-button]");
/*** new changes ***/
var myCarouselInterval = setInterval(nextSlide, 4000);
buttons.forEach(button => {
button.addEventListener("click", () => {
/*** new changes ***/
clearSlideInterval();
const offset = button.dataset.carouselButton === "next" ? 1 : -1
const slides = button
.closest("[data-carousel]")
.querySelector("[data-slides]")
const activeSlide = slides.querySelector("[data-active]")
let newIndex = [...slides.children].indexOf(activeSlide) + offset
if (newIndex < 0) newIndex = slides.children.length - 1
if (newIndex >= slides.children.length) newIndex = 0
slides.children[newIndex].dataset.active = true
delete activeSlide.dataset.active
})
})
function nextSlide() {
/*** new changes ***/
$(".next[data-carousel-button]").trigger("click");
}
/*** new changes ***/
function clearSlideInterval() {
clearInterval(myCarouselInterval);
myCarouselInterval = setInterval(nextSlide, 4000);
}

How can i add a smooth transition effect between slides?

Im not that good at coding but i try some ways to put a transition effect but didint work.
Can you guys help me ?I will appreciate it a lot..........................................................................................................................................................................................................................................................................................................
Java
let sliderImages = document.querySelectorAll(".slide"),
arrowLeft = document.querySelector("#arrow-left"),
arrowRight = document.querySelector("#arrow-right"),
current = 0;
// Clear all images
function reset() {
for (let i = 0; i < sliderImages.length; i++) {
sliderImages[i].style.display = "none";
}
}
// Init slider
function startSlide() {
reset();
sliderImages[0].style.display = "block";
}
// Show prev
function slideLeft() {
reset();
sliderImages[current - 1].style.display = "block";
current--;
}
// Show next
function slideRight() {
reset();
sliderImages[current + 1].style.display = "block";
current++;
}
// Left arrow click
arrowLeft.addEventListener("click", function() {
if (current === 0) {
current = sliderImages.length;
}
slideLeft();
});
// Right arrow click
arrowRight.addEventListener("click", function() {
if (current === sliderImages.length - 1) {
current = -1;
}
slideRight();
});
startSlide();
css
body,
#slider,
.wrap,
.slide-content {
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
overflow-x: hidden;
}
.wrap {
position: relative;
}
.slide {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* .slide-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
} */
.delimitare {
background-color: r#141313ed;
width: 100%;
height: 100%;
padding-left: 10%;
padding-right: 10%;
}
.content-interior {
background-color: #141313;
width: 100%;
height: 100%;
}
.slide-content span {
font-size: 5rem;
color: #fff;
}
.arrow {
cursor: pointer;
position: absolute;
top: 50%;
margin-top: -35px;
width: 0;
height: 0;
border-style: solid;
}
#arrow-left {
border-width: 30px 40px 30px 0;
border-color: transparent #fff transparent transparent;
left: 0;
margin-left: 30px;
}
#arrow-right {
border-width: 30px 0 30px 40px;
border-color: transparent transparent transparent #fff;
right: 0;
margin-right: 30px;
}
html
<div class="wrap">
<div id="arrow-left" class="arrow"></div>
<div id="slider">
<div class="slide slide1">
<div class="slide-content">
</div>
</div>
</div>
<div class="slide slide2">
<div class="slide-content">
<span>Image Two</span>
</div>
</div>
<div class="slide slide3">
<div class="slide-content">
<span>Image Three</span>
</div>
</div>
</div>
<div id="arrow-right" class="arrow"></div>
</div>

So far you're doing well!
There's a lot of different ways to accomplish a fading slide, but the CSS "transition" property is an easy way to do it.
The problem here, though, is that you cannot transition the "display" property. Going from "display: block" to "display: none" cannot be transitioned. It either displays or doesn't. On or off, like a boolean.
I have put together a working example by updating the code you provided. Instead of using display to switch between slides, I updated it to change the opacity instead. Opacity can be transitioned, so I added the CSS to handle that as well.
(I also had to set the slide position to absolute so the slides stacked on top of each other.)
Quick side note: when you initially shared your code, you labeled your JavaScript as "Java". Java and JavaScript are two different coding languages so be careful with that in the future.
let sliderImages = document.querySelectorAll(".slide"),
arrowLeft = document.querySelector("#arrow-left"),
arrowRight = document.querySelector("#arrow-right"),
current = 0;
// Clear all images
function reset() {
for (let i = 0; i < sliderImages.length; i++) {
sliderImages[i].style.opacity = "0";
}
}
// Init slider
function startSlide() {
reset();
sliderImages[0].style.opacity = "1";
}
// Show prev
function slideLeft() {
reset();
sliderImages[current - 1].style.opacity = "1";
current--;
}
// Show next
function slideRight() {
reset();
sliderImages[current + 1].style.opacity = "1";
current++;
}
// Left arrow click
arrowLeft.addEventListener("click", function () {
if (current === 0) {
current = sliderImages.length;
}
slideLeft();
});
// Right arrow click
arrowRight.addEventListener("click", function () {
if (current === sliderImages.length - 1) {
current = -1;
}
slideRight();
});
startSlide();
body,
#slider,
.wrap,
.slide-content {
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
overflow-x: hidden;
background-color: blue;
}
.wrap {
position: relative;
}
.slide {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 0;
transition: opacity 0.5s ease;
position: absolute;
left: 0;
right: 0;
margin: auto;
}
.slide-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.delimitare {
background-color: r#141313ed;
width: 100%;
height: 100%;
padding-left: 10%;
padding-right: 10%;
}
.content-interior {
background-color: #141313;
width: 100%;
height: 100%;
}
.slide-content span {
font-size: 5rem;
color: #fff;
}
.arrow {
cursor: pointer;
position: absolute;
top: 50%;
margin-top: -35px;
width: 0;
height: 0;
border-style: solid;
z-index: 2;
}
#arrow-left {
border-width: 30px 40px 30px 0;
border-color: transparent #fff transparent transparent;
left: 0;
margin-left: 30px;
}
#arrow-right {
border-width: 30px 0 30px 40px;
border-color: transparent transparent transparent #fff;
right: 0;
margin-right: 30px;
}
<div class="wrap">
<div id="arrow-left" class="arrow">
</div>
<div id="slider">
<div class="slide slide1">
<div class="slide-content">
<span>Image One</span>
</div>
</div>
<div class="slide slide2">
<div class="slide-content">
<span>Image Two</span>
</div>
</div>
<div class="slide slide3">
<div class="slide-content">
<span>Image Three</span>
</div>
</div>
</div>
<div id="arrow-right" class="arrow"></div>
</div>

why i add 1 to the variable but it adds "2" every time?

In the code below I want to add 1 to the page variable but every time I click on next button it adds 2 to the variable.
Code in Codepen
var slides = document.querySelectorAll('.slides');
var dots = document.querySelectorAll('.dot');
var page = 0;
function Swiper(page) {
if (page > slides.length) page = 0;
if (page < 0) page = slides.length;
for (let i = 0; i < slides.length; i++) {
slides[i].classList.remove('active');
}
slides[page].classList.add('active');
for (let i = 0; i < dots.length; i++) {
dots[i].classList.remove('active-dot');
}
dots[page].classList.add('active-dot');
for (let i = 0; i < dots.length; i++) {
dots[i].classList.remove('active-dot');
}
dots[page].classList.add('active-dot');
}
function Slider(slider) {
console.log(page)
console.log(slider)
Swiper(page += slider);
console.log(page += slider)
}
function currentSlide(pagination) {
Swiper(page = pagination);
}
* {
font-family: Raleway;
box-sizing: border-box;
outline: none;
}
body {
min-height: 100vh;
margin: 0;
padding: 16px;
}
/* body>h1,body>h2,body>h3,body>h4,body>h5,body>h6,body>p{
padding-left: 16px;
.btnload:hover{
background-color: #4169E1;
} */
.flexbox {
display: flex;
flex-wrap: wrap;
}
.col-25 {
flex: 25%;
}
.col-50 {
flex: 50%;
}
.col-75 {
flex: 75%;
}
.col-100 {
flex: 100%;
}
button,
input {
outline: none;
}
.container {
max-width: 1000px;
position: relative;
margin-left: auto;
margin-right: auto;
}
.slides {
width: 100%;
height: 100%;
position: absolute;
display: none;
animation: slide 0.4s ease;
}
#keyframes slide {
0% {
opacity: 0.2
}
100% {
opacity: 1
}
}
.active {
display: block;
}
.slides .page-number {
position: absolute;
top: 0;
left: 0;
padding: 12px 8px;
color: white;
}
.slides .desc {
color: white;
position: absolute;
top: 310px;
left: 50%;
}
img {
width: 100%;
height: auto;
}
.container a {
padding: 16px;
color: white;
text-decoration: none;
transition: 0.4s;
font-size: 20px;
top: 150px;
position: absolute;
}
img {
width: 100%;
height: auto;
}
.container a:hover {
background-color: rgba(0, 0, 0, 0.616);
}
.container #right-slide {
right: 0px;
}
.container #left-slide {
left: 0px;
}
.pagination {
display: flex;
max-width: 1000px;
height: 100px;
position: relative;
top: 380px;
justify-content: center;
margin-left: auto;
margin-right: auto;
}
.pagination .dot {
border-radius: 50%;
height: 15px;
width: 15px;
cursor: pointer;
margin: 2px;
transition: 0.6s;
}
.pagination .dot:hover {
background-color: rgb(138, 138, 138);
}
.dot {
background-color: #ddd;
}
.active-dot {
background-color: rgb(138, 138, 138);
}
.no-active {
background-color: #ddd;
}
<div class="container">
<div class="slides active">
<div class="page-number">1/4</div>
<img src="https://www.w3schools.com/howto/img_nature_wide.jpg" alt="">
<div class="desc">Caption One</div>
</div>
<div class="slides">
<div class="page-number">2/4</div>
<img src="https://www.w3schools.com/howto/img_snow_wide.jpg" alt="">
<div class="desc">Caption Two</div>
</div>
<div class="slides">
<div class="page-number">3/4</div>
<img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" alt="">
<div class="desc">Caption Three</div>
</div>
<div class="slides">
<div class="page-number">4/4</div>
<img src="Images/img_mountains_wide.jpg" alt="">
<div class="desc">Caption Four</div>
</div>
<a onclick="Slider(-1)" id="left-slide" href="#">❮</a>
<a onclick="Slider(+1)" id="right-slide" href="#">❯</a>
</div>
<div class="pagination">
<span class="dot dot-color active-dot" onclick="currentSlide(0, event)"></span>
<span class="dot dot-color" onclick="currentSlide(1, event)"></span>
<span class="dot dot-color" onclick="currentSlide(2, event)"></span>
<span class="dot dot-color" onclick="currentSlide(3, event)"></span>
</div>

Swiper(page += slider);
console.log(page += slider)
First you add slider to page (updating the value of page) and pass the result to Swiper.
Then you add slider to (the new value of) page (updating the value of page again) and pass the result to console.log.
As a rule of thumb, combining operations that modify variables with operations that pass them to functions is a good way to confuse yourself.
You might want to split out the actions for clarity.
page += slider;
Swiper(page);
console.log(page);

I think because of this line console.log(page += slider)
It makes the page increase 2 times
function Slider(slider) {
console.log(page)
console.log(slider)
Swiper(page += slider);
console.log(page += slider) // <<<--------------- This line
}

Why does the br tag not move the text under the title?

How do I get the text that says "this is just some placeholder text that should let you scroll" to be under the title? I thought seeing as there is a <br> tag after the title, the text would go under it?
(in case it's unclear in the snippet, the background image has an arrow pointing down, indicating that the user should scroll down upon arriving at the home page).
$(document ).ready(function(){
var counter = 0;
$('#menuIcon').click(function(){
counter+=1;
if (counter == 3){
}
});
});
var open = false;
function Drop(n) {
var i;
if (open == false) {
for (i = n; i < 5; i++) {
Drp(i)
}
open = true
} else if (open == true) {
for (i = n; i < 5; i++) {
Cls(i)
}
open = false
}
}
function Drp(n) {
var elem = document.getElementsByClassName("menu-con")[n];
var pos = -1 * window.innerHeight - n * 100;
var id = setInterval(frame, 5);
function frame() {
if (pos >= -10) {
clearInterval(id);
elem.style.top = 0 + 'px';
} else {
pos += 10;
elem.style.top = pos + 'px';
}
}
}
function Cls(n) {
var elems = document.getElementsByClassName("menu-con")[n];
var poss = 0;
var ids = setInterval(frames, 5);
function frames() {
if (poss <= -1 * window.innerHeight) {
clearInterval(ids);
elems.style.top = -1 * window.innerHeight + 'px';
} else {
poss += -7 - n * 2;
elems.style.top = poss + 'px';
}
}
}
* {
box-sizing: border-box;
max-width: 100%;
font-family: 'PT Sans Narrow', sans-serif;
font-weight: bold;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
background-color: black;
background-image:url(foo.png);
background-repeat:no-repeat;
background-position: center;
background-size:cover;
background-attachment: fixed;
}
.menuBox {
display: none;
}
.menuBox a {
text-decoration: none;
color: black;
}
.menu-icon {
width: 50px;
height: 50px;
position: fixed;
top: 0;
right: 0;
margin: 10px 15px;
transform: scale(0.8);
padding: 0;
cursor: pointer;
z-index: 20
}
.menu-bar {
width: 50px;
height: 5px;
background: rgb(190, 190, 190);
position: absolute;
transition: all 0.3s;
font-weight: bold;
font-size: 50px
}
.menu-bar1 {
margin-top: 9px
}
.menu-bar2 {
margin-top: 23px
}
.menu-bar3 {
margin-top: 37px
}
.menu-icon.hover .menu-bar1 {
-webkit-transform: rotate(45deg) scaleX(0.7);
margin-top: 22px;
}
.menu-icon.hover .menu-bar2 {
opacity: 0
}
.menu-icon.hover .menu-bar3 {
-webkit-transform: rotate(-45deg) scaleX(0.7);
margin-top: 22px;
}
.menu {
width: 100%;
height: 100%;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.menu-con {
-webkit-flex-grow: 1;
flex-basis: 0;
flex-grow: 1;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-around;
position: relative;
top: -100%;
transition: all 0.5s
}
.menu-con a:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
opacity: 1;
background: rgba(0, 0, 0, 0);
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.menu-con:hover a:before {
background: rgba(0, 0, 0, 0.2)
}
.menu-con a {
height: 20px;
-webkit-align-self: center;
color: white;
font-size: 25px;
z-index: 2;
cursor: pointer
}
#media screen and (max-width: 600px) {
.menu-con {
min-width: 50%
}
}
#media screen and (max-width: 350px) {
.menu-con {
min-width: 100%
}
}
a {
text-decoration: none;
}
.title {
display:flex;
justify-content: center;
align-items:center;
font-size:50px;
color:white;
}
.homeText {
background-color:darkblue;
display:flex;
justify-content:center;
}
<html class="animated pulse">
<head>
<title>Ben Cohen</title>
<link href=style.css rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=PT+Sans+Narrow" rel="stylesheet">
<link href="animate.css" rel=stylesheet>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="main.js"></script>
<link rel=icon href=icon.png>
</head>
<body>
<div class="menu-icon" onclick="this.classList.toggle('hover');Drop(0)" id="menuIcon">
<div class="menu-bar menu-bar1"></div>
<div class="menu-bar menu-bar2"></div>
<div class="menu-bar menu-bar3"></div>
</div>
<div class="menu">
<div class="menu-con" style="background:red;" href="yayitworks.html">
HOME
</div>
<div class="menu-con" style="background:blue" id="hello">
<a>PORTFOLIO</a>
</div>
<div class="menu-con" style="background:darkorange;">
<a>POUS</a>
</div>
<div class="menu-con" style="background:green;">
<a>HOMEWORK</a>
</div>
<div class="menu-con" style="background:white;">
<a style="color:black">TEST PAGE</a>
</div>
</div>
<div class="homeText">
<div class="title">
THIS IS A TITLE.
</div><br>
<p>this is just some placeholder text that should let you scroll</p>
</div>
</body></html>

Remove display: flex; from your .hometext CSS.
.hometext {
background-color:darkblue;
justify-content:center;
}
You can also specify the flex direction:
.hometext {
background-color:darkblue;
justify-content:center;
display: flex;
flex-direction: column;
More info here...
https://www.w3schools.com/Css/css3_flexbox.asp
& here...
https://developer.mozilla.org/en-US/docs/Web/CSS/flex

We Keep Coding

JavaScript is the programming language of the Web.

Jquery Div slider loop - javascript

Related

Try to hide a class when "mouseleve"?

targeting click of a specific button type with jquery

How can i add a smooth transition effect between slides?

why i add 1 to the variable but it adds "2" every time?

Why does the br tag not move the text under the title?

Categories

Resources