Image Slider with counter

Question

I know this question is maybe a bit boring. But I'm searching now for serveral hours and find no way to combine the solutions I found on the Internet.

So I hope someone here would like to help me out.

I have a simple Image slider and I need a counter that says maybe "Image 2 of 3".

As I said, there are a lot of solutions on the internet but I'm not able to implement them to my code.

This is the code Im working with:

HTML

<div class="slider">
 <img src="http://placehold.it/250x500" class="active"/>
 <img src="http://placehold.it/200x500" />
 <img src="http://placehold.it/100x500" />
</div>


<!--  ARROW AND COUNTER  -->
<div>
 <img src="assets/img/arrow-prev.png" class="prev" alt="Prev Arrow"/>
 <span id="counter"></span>
 <img src="assets/img/arrow-next.png" class="next" alt="Next Arrow"/>
</div>

CSS

.slider{
    height: 51vh;
    overflow: hidden;
}

.slider img{
    display: none;
    height: 51vh;
}

.slider img.active{
    display: inline-block;
}

.prev, .next{
    cursor: pointer;
}

JAVASCRIPT

$(document).ready(function () {
      $('.next').on('click', function () {
        var currentImg = $('.active');
        var nextImg = currentImg.next();

        if (nextImg.length) {
          currentImg.removeClass('active').css('z-index', -10);
          nextImg.addClass('active').css('z-index', 10);
        }
      });

      $('.prev').on('click', function () {
        var currentImg = $('.active');
        var prevImg = currentImg.prev();

        if (prevImg.length) {
          currentImg.removeClass('active').css('z-index', -10);
          prevImg.addClass('active').css('z-index', 10);
        }
      });
    });

It would be really great if someome can help me!

Answer 1

If you look for the easiest solution there is one. All that code added by other users look difficult for me. You can add simple html code with text to each slide and write "1/4", "2/4" etc. Even if you have 10 slides it may be easier than to implement huge jquery or javascript.

The example can be found here W3Schools slideshow

Another very common solution is to use bullet navigator. Many global companies use this solution because it is very easy to understand for everybody. Example - if you have 5 slides you have 5 bullets in the center bottom part of an image. If slide #3 is visible at the moment, third bullet changes color to indicate that you are on slide #3.

There are a few websites that create the entire html/css/js for sliders and you can customize it as you want.

Example of a page: Jssor.com

Answer 2

Without jQuery, just plain javascript.

With css opacity transition.

https://jsfiddle.net/uatthqjp/3/

const $images = document.querySelectorAll('img');
// `Array.from` for backward compatibility
// to convert `$images` into a real array
// so you can use `forEach` method on it
// use in conjunction with a polyfill
// for example: www.polyfill.io
const images = Array.from($images);

const $buttons = document.querySelector('.buttons');

// counter for current img
let current = 0;

// listen to click events on `$buttons` div
$buttons.addEventListener('click', function(e){
  // loop through all images
  images.forEach(function(img){
    // hide all images
    img.classList.remove('active');
  });

  // if the current clicked button
  // contain the class "next"
  if (e.target.classList.contains('next')) {
    // increment counter by 1
    current++;
    // reset the counter if reach last img
    if (current >= images.length) {
      current = 0;
    }
    // show current img
    images[current].classList.add('active');
  }
  
  // if the current clicked button
  // contain the class "prev"
  else {
    // decrease counter by 1
    current--;
    // if "prev" is pressed when first img is active
    // then go to the last img
    if (current < 0) {
      current = images.length - 1;
    }
    // show current img
    images[current].classList.add('active');
  }	
});

img {
  position: absolute;
  top: 40px;
  opacity: 0; /* hide images */
  transition: opacity 1s ease-in-out;
}

.active {
  opacity: 1;
}

<img class="active" src="https://dummyimage.com/100x100/e62020/fff&text=IMG1" alt="img1">
<img src="https://dummyimage.com/100x100/20e679/fff&text=IMG2" alt="img2">
<img src="https://dummyimage.com/100x100/4120e6/fff&text=IMG3" alt="img3">
    
<div class="buttons">
  <button class="prev">Prev</button>
  <button class="next">Next</button>
</div>

Answer 3

Explanation: I've added a index variable that checks the active class position:

var index = images.index($('.active'));
$('#counter').text("Image " + (index + 1) + ' of ' + images.length);

Working code:

So Have a look at this code because this should work fine!

$(document).ready(function() {
  var images = $('.slider > img');

  var index = images.index($('.active'));
  $('#counter').text("Image " + (index + 1) + ' of ' + images.length);

  $('.next').on('click', function() {
    var currentImg = $('.active');
    var nextImg = currentImg.next();

    if (nextImg.length) {
      currentImg.removeClass('active').css('z-index', -10);
      nextImg.addClass('active').css('z-index', 10);

      var index = images.index(nextImg);
      $('#counter').text("Image " + (index + 1) + ' of ' + images.length);
    }
  });

  $('.prev').on('click', function() {
    var currentImg = $('.active');
    var prevImg = currentImg.prev();

    if (prevImg.length) {
      currentImg.removeClass('active').css('z-index', -10);
      prevImg.addClass('active').css('z-index', 10);

      var index = images.index(prevImg);
      $('#counter').text("Image " + (index + 1) + ' of ' + images.length);
    }
  });
});

.slider {
  height: 51vh;
  overflow: hidden;
}

.slider img {
  display: none;
  height: 51vh;
}

.slider img.active {
  display: inline-block;
}

.prev,
.next {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
  <img src="https://placehold.it/450x500/red" class="active" />
  <img src="https://placehold.it/450x500/r" />
  <img src="https://placehold.it/450x500" />
</div>


<!--  ARROW AND COUNTER  -->
<div>
  <img src="https://placehold.it/50/red" class="prev" alt="Prev Arrow" />
  <span id="counter"></span>
  <img src="https://placehold.it/50/blue" class="next" alt="Next Arrow" />
</div>

I hope this is the solution you have expected. For any further questions to my answer - let me know :)

Answer 4

So basically you should just keep track of all images and the index of the currently displayed image. Something like the code below could do that.

$(document).ready(function () {

    // Get images.
    var images = $('.slider > img');

    // Set starting index.
    var index = images.index($('.active'));
    $('#counter').text((index + 1) + ' of ' + images.length);

    $('.next').on('click', function () {
        var currentImg = $('.active');
        var nextImg = currentImg.next();

        if (nextImg.length) {
            currentImg.removeClass('active').css('z-index', -10);
            nextImg.addClass('active').css('z-index', 10);

            // Find the index of the image.
            var index = images.index(nextImg);
            $('#counter').text((index + 1) + ' of ' + images.length);
        }
    });

    $('.prev').on('click', function () {
        var currentImg = $('.active');
        var prevImg = currentImg.prev();

        if (prevImg.length) {
            currentImg.removeClass('active').css('z-index', -10);
            prevImg.addClass('active').css('z-index', 10);

            // Find the index of the image.
            var index = images.index(prevImg);
            $('#counter').text((index + 1) + ' of ' + images.length);
        }
    });
});

Link to jsfiddle example.