CODEWITHSUNDEEP
javascriptjquerycssslideshow
user6335248
user6335248

Reputation:

Simple jQuery slideshow with counter, thumbnails, progress bar and fade effect

I am trying to create my first website and I would like to get some help creating a slider with images.

I have tried to google for the solution for my problem and after trying to fix the plugin I found online I didn't manage to make it work. I have no experience with javascript.

I am trying to make a simple slider. Navigation counter like 2 / 32. Small progress bar that goes along the bottom. Small thumbnails on the bottom of the page.

The Images are going to be around 250kb in size and they will be around 20 to 30 images to display... so I am not sure if we should have some kind of preloading for the script as well .?

Any help? I tried this code that i have found online but no success:

https://jsfiddle.net/ufb6dwLx/

jQuery(function($){
    //previous slide
    $('.slideshow .prev').click(function() {
         prevSlide($(this).closest('.slideshow').find('.slides'));
    });
    //next slide
    $('.slideshow .next, .slideshow img,').click(function() {
         nextSlide($(this).closest('.slideshow').find('.slides'));
    });
    //initialize show
    iniShow();
    function iniShow() {
    // show first slide with caption
    $('.slideshow').each(function() {
        showSlide($(this).find('.slides'));
    });
    }
    // move previous slide 
    function prevSlide($slides) {
    $slides.find('img:last').prependTo($slides);
        showSlide($slides);
    }
    // move next slide 
    function nextSlide($slides) {
         $slides.find('img:first').appendTo($slides);
         showSlide($slides);
    }
    // show slide with caption
    function showSlide($slides) {
         var $nextSlide = $slides.find('img:first');
         //hide (reset) all slides
         $slides.find('img').hide();
         //fade in next slide
         $nextSlide.fadeIn(500);
         //show caption
         $('#caption').text($nextSlide[0].alt);
         //count image
         var currentNum = $nextSlide.attr('index');
         var count = $nextSlide.closest('.slideshow').find('img').length;
         $('#count').html(currentNum + ' of ' + count);
    }
});

Thanks in advance for your time!

Upvotes: 3

Views: 1552

Answers (1)

jake
jake

Reputation: 820

I fixed your fiddle here: https://jsfiddle.net/ufb6dwLx/4/

//previous slide
$('.prev').click(function() {
    prevSlide($('.slideshow').closest('.slideshow').find('.slides'));
});
//next slide
$('.next, .slideshow img').click(function() {
    nextSlide($('.slideshow').closest('.slideshow').find('.slides'));
});

I would reccomend implementing Lazy Loading for that many slides, easy to do with jQuery: https://plugins.jquery.com/lazyload/

I'll leave the thumbnails up to you.

Upvotes: 1

Related Questions