カウンタ、サムネイル、プログレスバー、フェード効果を使用した簡単なjQueryスライドショー

Question

私は最初のウェブサイトを作成しようとしています。

問題の解決方法をgoogleにしようとしましたが、プラグインを修正しようとした後、私はオンラインで見つかったので、動作させることはできませんでした。私はjavascriptの経験がありません。

私は単純なスライダーを作ろうとしています。 2/32のようなナビゲーションカウンター。下部に沿って進む小さな進行バー。ページ下部の小さいサムネイル。

イメージのサイズは約250kbになり、表示するイメージは約20〜30枚になるので、スクリプト用にプリロードする必要があるかどうかはわかりません。

助けが必要ですか？お時間を事前に

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

ありがとう：私は私がオンラインに発見した、このコードが、なしの成功を試してみました！

Answer 1

私はここにあなたのフィドルを固定：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')); 
}); 

を私は多くのスライドの遅延ロードを実装reccomendだろう、jQueryを使って行うのは簡単：https://plugins.jquery.com/lazyload/

私はあなた次第サムネイルを残しておきます。