Search code examples
javascriptjqueryhtmlcssjquery-ui-slider

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

$(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');
  });
}
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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!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">
        <img src="http://www.planwallpaper.com/static/images/4-Nature-Wallpapers-2014-1_ukaavUI.jpg" alt="image1" class="slide active">
        <img src="http://www.mrwallpaper.com/wallpapers/green-Rice-1600x900.jpg" alt="image2" class="slide">
        <img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/nature-wallpapers-10.jpg" alt="image3" class="slide">

      </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>

Solution

  • 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());
});
}