htmljquerycss
How to improve the functionality of this jQuery slider?
I have made an image slider.
Three problems:
The last slide is showing. However the counter is showing the first slide. How do I solve this?
Clicking play, plays the counter. How do I make it stop on the last slide?
Clicking last, greys-out the
nextandlastbuttons. Also, clicking first, greys-out theprevandfirstbuttons. I used CSS. How do I automate this with jQuery?
I have tried:
here I have tried adding class .active to the last image and use css to hide the other images. Unfortunately the counter says 1/6 instead of 6/6.
I have tried adding a function that checks if the current slide is the last slide. I don't know why this is not working:
function lastSlide() {
if ($('.image').last().hasClass('active')){
clearTimeout(slideTimer);
} else {
slideImage(0);
};
};
var totalImages = $(".images").length;
sliderCompleted: function(current) {
if (slideImage >= totalImages) {
clearTimeout(slideTimer);
};
- I probably need to use
$('.images:last')however I am having trouble understanding how to implement this.
I hope someone has the time to slide me in the right direction...
The HTML CSS & jQuery:
$(document).ready(function() {
// Slider
var slideTimer;
var slideImage = function(step) {
if (step == undefined) step = 1;
clearTimeout(slideTimer);
var imageIndex = $('.image:visible').index('.image');
if (step != 0) {
$('.image').stop();
$('.image:visible').hide();
}
imageIndex = imageIndex + step;
if (imageIndex >= $('.image').length) {
imageIndex = 0;
} else if (imageIndex < 0) {
imageIndex = $('.image').length - 1;
}
if (step != 0) {
$('.image:eq(' + imageIndex + ')').stop().show();
}
if ($('.slider').length > 0) {
slideTimer = setTimeout(slideImage, 2000);
}
now = imageIndex;
updateCounter();
};
clearTimeout(slideTimer);
$('.nav-stop').click(function() {
clearTimeout(slideTimer);
$(this).hide();
$('.nav-play').show();
$('.nav-first').removeClass('nav-off');
$('.nav-prev').removeClass('nav-off');
$('.nav-next').removeClass('nav-off');
$('.nav-last').removeClass('nav-off');
});
$('.nav-play').click(function() {
slideImage(0);
$(this).hide();
$('.nav-stop').show();
$('div.nav-wrap span').removeClass('nav-off');
});
$('.nav-prev').click(function() {
slideImage(-1);
clearTimeout(slideTimer);
$('.nav-stop').hide();
$('.nav-play').show();
$('div.nav-wrap span').removeClass('nav-off');
});
$('.nav-next').click(function() {
slideImage(1);
clearTimeout(slideTimer);
$('.nav-stop').hide();
$('.nav-play').show();
$('div.nav-wrap span').removeClass('nav-off');
});
$('.nav-first').click(function() {
slideImage($('.image:first').index('.image') - $('.image:visible').index('.image'));
clearTimeout(slideTimer);
$('.nav-stop').hide();
$('.nav-play').show();
$('div.nav-wrap span').removeClass('nav-off');
$('.nav-first').addClass('nav-off');
$('.nav-prev').addClass('nav-off');
});
$('.nav-last').click(function() {
slideImage($('.image:last').index('.image') - $('.image:visible').index('.image'));
clearTimeout(slideTimer);
$('.nav-stop').hide();
$('.nav-play').show();
$('div.nav-wrap span').removeClass('nav-off');
$('.nav-next').addClass('nav-off');
$('.nav-last').addClass('nav-off');
});
// Counter
var now = 0;
function updateCounter() {
var slidesTotal = $('.image').length;
$('.counter').text(now + 1 + '/' + slidesTotal);
}
updateCounter();
});
div.slider {
position: relative;
float: left;
padding: 10px;
border: 1px solid black;
outline: none;
margin: 0;
box-sizing: border-box;
}
div.slider figure {
position: relative;
display: none;
width: 300px;
padding: 10px;
border: 1px solid black;
outline: none;
margin: 0 0 10px 0;
box-sizing: border-box;
}
div.slider figure.active {
display: block;
}
div.slider figure img {
position: relative;
width: 100%;
padding: 10px;
border: 1px solid black;
outline: none;
margin: 0 0 10px 0;
box-sizing: border-box;
}
div.slider figcaption {
position: relative;
padding: 10px;
border: 1px solid black;
outline: none;
margin: 0;
box-sizing: border-box;
font-size: 16px;
line-height: 20px;
}
div.slider div.nav-wrap {
position: relative;
display: inline-block;
width: 300px;
padding: 10px;
border: 1px solid black;
outline: none;
margin: 0;
box-sizing: border-box;
font-size: 16px;
line-height: 20px;
}
div.slider div.nav-wrap span {
position: relative;
float: left;
width: 20%;
height: 40px;
padding: 10px;
border: 1px solid black;
outline: none;
margin: 0;
box-sizing: border-box;
font-size: 16px;
line-height: 20px;
text-align: center;
color: black;
background-color: white;
}
div.slider div.nav-wrap span:hover:not(.counter) {
cursor: pointer;
border: 1px solid silver;
color: silver;
background-color: whitesmoke;
}
div.slider div.nav-wrap span.counter {
width: 100%;
margin: 10px 0 0 0;
}
div.slider div.nav-wrap span.nav-stop {
display: none;
}
div.slider div.nav-wrap span.nav-off {
cursor: default;
border: 1px solid silver;
color: silver;
background-color: whitesmoke;
pointer-events: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="slider">
<figure class="image">
<img src="test_A.svg">
<figcaption>Test A</figcaption>
</figure>
<figure class="image">
<img src="test_B.svg">
<figcaption>Test B</figcaption>
</figure>
<figure class="image">
<img src="test_C.svg">
<figcaption>Test C</figcaption>
</figure>
<figure class="image">
<img src="test_D.svg">
<figcaption>Test D</figcaption>
</figure>
<figure class="image">
<img src="test_E.svg">
<figcaption>Test E</figcaption>
</figure>
<figure class="image active">
<img src="test_F.svg">
<figcaption>Test F</figcaption>
</figure>
<div class="nav-wrap">
<span class="nav-stop">stop</span>
<span class="nav-play">play</span>
<span class="nav-first">first</span>
<span class="nav-prev">prev</span>
<span class="nav-next">next</span>
<span class="nav-last">last</span>
<span class="counter"></span>
</div>
</div>Solution
You just need to call slideImage(1); at the very end of the JS code in order to kick things off where you want them.
$(document).ready(function() {
// Slider
var slideTimer;
var slideImage = function(step) {
if (step == undefined) step = 1;
clearTimeout(slideTimer);
var imageIndex = $('.image:visible').index('.image');
if (step != 0) {
$('.image').stop();
$('.image:visible').hide();
}
imageIndex = imageIndex + step;
if (imageIndex >= $('.image').length) {
imageIndex = 0;
} else if (imageIndex < 0) {
imageIndex = $('.image').length - 1;
}
if (step != 0) {
$('.image:eq(' + imageIndex + ')').stop().show();
}
if ($('.slider').length > 0) {
slideTimer = setTimeout(slideImage, 2000);
}
now = imageIndex;
updateCounter();
};
$('.nav-stop').click(function() {
clearTimeout(slideTimer);
$(this).hide();
$('.nav-play').show();
$('.nav-first').removeClass('nav-off');
$('.nav-prev').removeClass('nav-off');
$('.nav-next').removeClass('nav-off');
$('.nav-last').removeClass('nav-off');
});
$('.nav-play').click(function() {
slideImage(0);
$(this).hide();
$('.nav-stop').show();
$('div.nav-wrap span').removeClass('nav-off');
});
$('.nav-prev').click(function() {
slideImage(-1);
clearTimeout(slideTimer);
$('.nav-stop').hide();
$('.nav-play').show();
$('div.nav-wrap span').removeClass('nav-off');
});
$('.nav-next').click(function() {
slideImage(1);
clearTimeout(slideTimer);
$('.nav-stop').hide();
$('.nav-play').show();
$('div.nav-wrap span').removeClass('nav-off');
});
$('.nav-first').click(function() {
slideImage($('.image:first').index('.image') - $('.image:visible').index('.image'));
clearTimeout(slideTimer);
$('.nav-stop').hide();
$('.nav-play').show();
$('div.nav-wrap span').removeClass('nav-off');
$('.nav-first').addClass('nav-off');
$('.nav-prev').addClass('nav-off');
});
$('.nav-last').click(function() {
slideImage($('.image:last').index('.image') - $('.image:visible').index('.image'));
clearTimeout(slideTimer);
$('.nav-stop').hide();
$('.nav-play').show();
$('div.nav-wrap span').removeClass('nav-off');
$('.nav-next').addClass('nav-off');
$('.nav-last').addClass('nav-off');
});
// Counter
var now = 0;
function updateCounter() {
var slidesTotal = $('.image').length;
$('.counter').text(now + 1 + '/' + slidesTotal);
}
updateCounter();
slideImage(1);
});div.slider {
position: relative;
float: left;
padding: 10px;
border: 1px solid black;
outline: none;
margin: 0;
box-sizing: border-box;
}
div.slider figure {
position: relative;
display: none;
width: 300px;
padding: 10px;
border: 1px solid black;
outline: none;
margin: 0 0 10px 0;
box-sizing: border-box;
}
div.slider figure.active {
display: block;
}
div.slider figure img {
position: relative;
width: 100%;
padding: 10px;
border: 1px solid black;
outline: none;
margin: 0 0 10px 0;
box-sizing: border-box;
}
div.slider figcaption {
position: relative;
padding: 10px;
border: 1px solid black;
outline: none;
margin: 0;
box-sizing: border-box;
font-size: 16px;
line-height: 20px;
}
div.slider div.nav-wrap {
position: relative;
display: inline-block;
width: 300px;
padding: 10px;
border: 1px solid black;
outline: none;
margin: 0;
box-sizing: border-box;
font-size: 16px;
line-height: 20px;
}
div.slider div.nav-wrap span {
position: relative;
float: left;
width: 20%;
height: 40px;
padding: 10px;
border: 1px solid black;
outline: none;
margin: 0;
box-sizing: border-box;
font-size: 16px;
line-height: 20px;
text-align: center;
color: black;
background-color: white;
}
div.slider div.nav-wrap span:hover:not(.counter) {
cursor: pointer;
border: 1px solid silver;
color: silver;
background-color: whitesmoke;
}
div.slider div.nav-wrap span.counter {
width: 100%;
margin: 10px 0 0 0;
}
div.slider div.nav-wrap span.nav-stop {
display: none;
}
div.slider div.nav-wrap span.nav-off {
cursor: default;
border: 1px solid silver;
color: silver;
background-color: whitesmoke;
pointer-events: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="slider">
<figure class="image">
<img src="http://www.bookmov.es/book/test_A.svg">
<figcaption>Test A</figcaption>
</figure>
<figure class="image">
<img src="http://www.bookmov.es/book/test_B.svg">
<figcaption>Test B</figcaption>
</figure>
<figure class="image">
<img src="http://www.bookmov.es/book/test_C.svg">
<figcaption>Test C</figcaption>
</figure>
<figure class="image">
<img src="http://www.bookmov.es/book/test_D.svg">
<figcaption>Test D</figcaption>
</figure>
<figure class="image">
<img src="http://www.bookmov.es/book/test_E.svg">
<figcaption>Test E</figcaption>
</figure>
<figure class="image active">
<img src="http://www.bookmov.es/book/test_F.svg">
<figcaption>Test F</figcaption>
</figure>
<div class="nav-wrap">
<span class="nav-stop">stop</span>
<span class="nav-play">play</span>
<span class="nav-first">first</span>
<span class="nav-prev">prev</span>
<span class="nav-next">next</span>
<span class="nav-last">last</span>
<span class="counter"></span>
</div>
</div>- How to add a SVG icon within an input?
- Change navbar text color Bootstrap
- Absolutely positioned element affected by margin of sibling?
- How to Display div if two specific select option value is selected?
- Div with position:absolute moved by sibling div's margin
- Is there a way to move HTML between bowser tabs in Angular?
- Why does setting padding on an element affect all siblings in the same div
- Button's font weight changes on hover with transition
- Using two data-toggle for same element in bootstrap
- 2024: iOS Safari Video Autoplay Options?
- Customizing specifically the Sign Up page in Azure AD B2C
- How to link checkbox-elements in a hierarchy-like unordered list?
- How to propagate event from element with higher z-index to elements under excluding click event?
- Float right changing position of next element
- Terminal showing [] when trying to run
- How to apply long click event and doubleclick event on the same element in javascript
- multiple pages in Vue.js CLI
- Why my code for showing current date doesn't work? EDIT: it was my fault...the code wasn't working for another
- How to design a dynamic page
- How to drag/re-position inspect element tool in google chrome?
- How do I put images inline?
- How to remove the default matDialog background
- Set value to input field with jQuery
- Prevent page scrolling when cursor is hovering over element Blazor
- PHP gets commented out in HTML
- How to keep floating labels floating after input. Pure CSS
- How to pass values from URL to an ODOO form
- How to iterate through diagonals in a checkerboard checking whether a piece can capture with JavaScript
- How can I ensure a single-click deletion functionality for items in Flask app admin panel?
- FullCalendar list view - how to hide "all-day"