Nordax Nordax - 2 months ago 17
CSS Question

jquery Image slider navigation dots won't work

I've been trying to create a jQuery image slider. So far, I managed to get the image slider animate and slide when clicking buttons forward/backward. Now, I'm trying to create navigation dots. so far I've been successful in trying to slide them through animation/clicking on button forward/backward. but when I try clicking the dots so that the active slide shows up, it won't work. Here is my work (I'm not putting the whole code just the function that implements when you click on dot)

Here is the code:http://codepen.io/anon/pen/PGmRkR

HTML

<!DOCTYPE html>
<html>
<head>
<title>Image carousel</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="carouselcss.css">
<!-- <link href="https://fonts.googleapis.com/css?family=Baloo+Tamma" rel="stylesheet"> -->

</head>
<body>
<div id="container">
<header>
header is here
</header>
<div id="carousel">
<div class="sliderbuttons">
<input type="button" name="next" id="next" value="&gt;">
<input type="button" name="next" id="prev" value="&lt;">
</div>
<div class="slides">






</div>
<div class="indicators">
<div class="circle blip"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>


</div>

</div>
<script type="text/javascript" src="jquery-1.12.1.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript" src="carousel.js"></script>

</body>
</html>


CSS

html,body {
height: 100%;
position: relative;
}

*{
box-sizing: border-box;
}

#container {
width: 90%;
margin: 0 auto;
height: 100%;
}

header {
background: black;
height: 20px;
padding: 1.5em;
color: white;
}

#carousel {
position: relative;
margin: 0 auto;
width: 45%;
margin-top: 15px;
height: 100%;

}

.slide {
position: absolute;
max-width: 100%;
z-index: 0;
}
.sliderbuttons {
}

#prev,#next {
position: absolute;
background-color: rgba(255, 148, 41, 0.68);
box-shadow: 2px white;
border:none;
font-size: 2em;
color: white;
font-weight: bold;
/* font-family: 'Baloo Tamma', cursive;
*/ padding:10px;
top:15%;
width: 10%;
/*making the prev,next on top of content*/
z-index: 2;
}
#prev {
left:0;
}
#next {
right:0;
}

.active {
z-index: 1;
}

.indicators {
z-index: 2;
position: absolute;
bottom:49%;
left: 45%;
}
.circle {
border-radius: 10px;
width: 10px;
height: 5px;
border:2px solid black;
}

.indicators div {
padding: 8px;
margin: 2px;
display: inline-block;

}

.blip {
background-color: orange;
}

div.indicators:hover {
cursor: pointer;

}


JavaScript

$(document).ready(function(){
sliderEvents();

});
var slides=$("#carousel .slides .slide")
var dots=$(".indicators .circle");

function sliderEvents() {

dots.click(function () {

var indeX=$(this).index();
var currentSlide=slides.eq(indeX);
currentSlide.addClass('active');
$(this).addClass('blip');

currentSlide.prev().removeClass('active');
$(this).prev().removeClass('blip');
});
}

Answer

You had to remove the blip and active classes from each element, so they don't stack on top of each other. Here you go: http://codepen.io/denea/pen/wzdmoY

$(document).ready(function(){
sliderEvents();
//startSlider();

});

var slides = $("#carousel .slides .slide");
var dots=$(".indicators .circle");

function sliderEvents() {

dots.click(function () {

var indeX=$(this).index();
//console.log(indeX);
var currentSlide=slides.eq(indeX);
currentSlide.addClass('active');
$(this).addClass('blip');  

    $(".slides img").not(currentSlide).removeClass('active');
    $(".circle").not(this).removeClass('blip');
//console.log(currentSlide.prev().index());
});
}
Comments