I am currently utilizing a slider that employs the .prev and .next jQuery functions to toggle the active class, indicating which slide is being displayed.
Here is the code responsible for this functionality. It identifies the current sibling with the active class and then adds it to the previous or next sibling accordingly.
//Slider Directional Controls
$('.buttons .prev').on('click', function() {
if( position > 0 ) {
position--;
$('.program-slider .slides').css({'right': position * programSliderWidth }); // -- CHANGE 3 --
$('.navigation .controls').find('li.active').removeClass('active').prev('li').addClass('active');
}
});
$('.buttons .next').on('click', function() {
if( position < totalSlides - 1 ) {
position++;
$('.program-slider .slides').css({'right': position * programSliderWidth});
$('.navigation .controls').find('li.active').removeClass('active').next('li').addClass('active');
}
});
If I want to reset this functionality, where do I begin? My approach involves removing the active class from the current sibling and adding it to the first sibling to indicate that it is the initial slide being displayed.
This is the code snippet I have created for resetting the functionality, yet encountering issues when clicking on directional controls of the slider as it fails to pass the active class to the subsequent sibling. To reset, I utilize
$(window).on('resize', function(){})//Add Class active on Start
$('.navigation .controls li.active').removeClass('active');
$('.navigation .controls li:first-child').addClass('active');
function slider() {
$('.navigation .controls li.active').removeClass('active');
$('.navigation .controls li:first-child').addClass('active');
var programSliderWidth = $('.program-slider').width(),
sliderContainer = $('.program-slider .slides'),
slides = $('.program-slider .slides li'),
move = 0,
position = 0,
totalSlides = $('.program-slider .slides li').length;
//Apply width based on the width of the .program-slider
slides.width(programSliderWidth);
//Apply Maximum width based on number of slides
sliderContainer.width(totalSlides * programSliderWidth);
//Slider Controls
$('.navigation .controls li').on('click', function() {
position = $(this).index(); // -- CHANGE 1 --
var move = position*programSliderWidth;
$('.program-slider .slides').css({'right': move});
$('.navigation .controls li.active').removeClass('active');
$(this).addClass('active');
});
//Slider Directional Controls
$('.buttons .prev').on('click', function() {
if( position > 0 ) {
position--;
$('.program-slider .slides').css({'right': position * programSliderWidth }); // -- CHANGE 3 --
$('.navigation .controls').find('li.active').removeClass('active').prev('li').addClass('active');
}
});
$('.buttons .next').on('click', function() {
if( position < totalSlides - 1 ) {
position++;
$('.program-slider .slides').css({'right': position * programSliderWidth});
$('.navigation .controls').find('li.active').removeClass('active').next('li').addClass('active');
}
});
}
$(document).ready(function() {
slider();
});
$(window).on('resize', function() {
slider();
})/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block; }
body {
line-height: 1; }
ol, ul {
list-style: none; }
blockquote, q {
quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none; }
table {
border-collapse: collapse;
border-spacing: 0; }
* {
box-sizing: border-box; }
.program-slider {
max-width: 1280px;
margin: 0 auto;
height: 200px;
background-color: beige;
overflow: hidden; }
.program-slider .slides {
overflow: hidden;
position: relative;
right: 0;
-webkit-transition: all 0.3s linear; }
.program-slider .slides li {
position: relative;
float: left;
-webkit-transition: all 0.3s linear; }
.navigation {
max-width: 1280px;
margin: 0 auto; }
.navigation .controls li {
display: inline-block;
padding: 10px;
width: 25%;
float: left; }
.navigation .controls li.active {
background-color: teal;
color: #fff; }
.buttons {
position: absolute;
top: 30%; }
/*# sourceMappingURL=style.css.map */<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="program-slider">
<ul class="slides">
<li>Slide 1</li>
<li>Slide 2</li>
<li>Slide 3</li>
<li>Slide 4</li>
</ul>
<div class="buttons">
<ul>
<li class="prev">Prev</li>
<li class="next">Next</li>
</ul>
</div>
</div>
<div class="navigation">
<ul class="controls">
<li>slide 1</li>
<li>slide 2</li>
<li>slide 3</li>
<li>slide 4</li>
</ul>
</div>