I have this slider that indicates what slides is currently on by using .prev .next jquery to pass the class active in order show or indicate what slide is currently on.
Below is the code that produces that function. It looks for the current sibling that has the class active then passes it to the previous or next sibling.
//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');
}
});
What if I want to reset the functionality? Basically remove the class active from its current sibling and place it on the first sibling to indicate it is the first slide being shown.
This is the code that I have created but seems to be working but when I clicked on the directional controls on the slider, it doesn't pass the class active to the next sibling. The way I reset the functional is by using $(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>
