Simple jQuery slideshow with counter, thumbnails, progress bar and fade effect
<p>I am trying to create my first website and I would like to get some help creating a slider with images.</p>

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

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

<p>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 .?</p>

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

<p><a href="https://jsfiddle.net/ufb6dwLx/" rel="nofollow">https://jsfiddle.net/ufb6dwLx/</a></p>

<pre><code>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);
    }
});
</code></pre>

<p>Thanks in advance for your time!</p>