How to build JQuery slider with square bullets?

Question

I have build a simple slider in jquery. It's working correctly. but now i want to highlight the square at bottom of the slider as per image changed.

My code goes here.

I used following html code.

<div>
<div class="slider">
<span class="control_next">Next</span>
<span class="control_prev">Previous</span>
<ul>
<li style="background:#ccc;">Image 1</li>
<li style="background:#547;">Image 2</li>
<li style="background:#124;">Image 3</li>
<li style="background:#054;">Image 4</li>
</ul>
</div>
<div class="square square1"></div>
<div class="square square2"></div>
<div class="square square3"></div>
<div class="square square4"></div>
</div>

css for the above code

.slider {
  position: relative;
  overflow: hidden;
  border: 1px solid #ccc;
}

.slider ul {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.slider ul li {
  position: relative;
  display: block;
  float: left;
  margin: 0px;
  padding: 0;
  width: 500px;
  height: 150px;
  color

}

.control_prev, .control_next {
 position: absolute;
  bottom: 0;
  z-index: 999;
  display: block;
  padding: 5px;
  width: auto;
  height: auto;
  background: #2a2a2a;
  color: #fff;
  text-decoration: none;
  font-size: 18px;
  opacity: 0.8;
  cursor: pointer;
  margin:5px;
}

.control_prev:hover, .control_next:hover {
  opacity: 1;
  -webkit-transition: all 0.2s ease;
}

.control_prev {
  right:50;
  border-radius: 0 2px 2px 0;
}
.control_next {
  right: 0;
  border-radius: 2px 0 0 2px;
}
.square
{
  z-index: 999;
  height:20px;
  width:20px;
  background:#ccc;
  position: relative;
  float: left;
  margin:0px 5px; 
}

and the jquery for sliding the image is

$(document).ready(function(){
var slideCount = $('.slider ul li').length;
var slideWidth = $('.slider ul li').width();
var slideHeight = $('.slider ul li').height();
var sliderUlWidth = slideCount * slideWidth;
$('.slider').css({ width: slideWidth, height: + slideHeight });

$('.slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });

$('.slider ul li:last-child').prependTo('.slider ul');
function moveLeft() {
    $('.slider ul').animate({
        left: + slideWidth
    }, 700, function () {
        $('.slider ul li:last-child').prependTo('.slider ul');
        $('.slider ul').css('left', '');
    });
};

 function moveRight() {
    $('.slider ul').animate({
        left: - slideWidth
    }, 700, function () {
        $('.slider ul li:first-child').appendTo('.slider ul');
        $('.slider ul').css('left', '');
    });
};

$('.control_prev').click(function () {
    moveLeft();
});

$('.control_next').click(function () {
    moveRight();
});

$(function(){
setInterval(function () {
    moveRight();
}, 5000);
});

});

Please help me to complete this. thanks.

Answer 1

You need to keep track of which image is currently shown and then add a class to the "squares" accordingly: http://jsfiddle.net/WZCA3/

//additional variables
var allSquares = $('.square');
var totalSquares = allSquares.length;
var index = 0;

//the move function
function moveRight() {
    index++;
    $('.slider ul').animate({
        left: - slideWidth
    }, 700, function () {
        $('.slider ul li:first-child').appendTo('.slider ul');
        $('.slider ul').css('left', '');
    });
     setSquare();
};

// the active status
function setSquare() {
    allSquares.removeClass("active").eq(index % totalSquares).addClass("active");   
}

Follow the jsfiddle link to see the whole code.

Basically the index variable keeps track of the current Shown image. It grows by 1 when the slider goes to the next image and it decreases by one when it goes to the previous. Everytime you change the image, you get the current index and find to which "square" it corresponds by making currentIndex % numberOfImages, in your case this will alway be a value between 0 and 3, setting alway the correct square