スワイパーイベントは発生しません

Question

スワイパー スライドショーのJQueryプラグインとグリッドのアイソトープを使用しているギャラリーのWebサイトで作業しています。 ギャラリー内の各アイテムには独自のスライダーと独自の 同位体アイテムがあります。スワイパーギャラリーはファンシーボックス でポップアップし、サイズ変更時にのみ機能します。

誰でも私が間違っていることを教えてもらえますか？

<script src='js/jquery.min.js'></script> 
    <script src='js/fancybox.js'></script> 
    <script src='js/bootstrap.min.js'></script> 
    <script src='js/isotope.pkgd.js'></script> 
    <script src='js/swiper.min.js'></script> 
    <script> 

     var sliders = []; 
     $('.swiper-container').each(function (index, element) { 
      $(this).addClass('s' + index); 
      var slider = new Swiper('.s' + index, { 
       pagination: '.swiper-pagination', 
       paginationClickable: true, 
       nextButton: '.swiper-button-next', 
       prevButton: '.swiper-button-prev', 
       spaceBetween: 0, 
       speed: 1000, 
       autoplay: 4000, 
       loop: true, 
       paginationBulletRender: function (swiper, index, className) { 
       return '<span class="' + className + '">' + (index + 1) + '</span>'; 
       } 
      }); 
      sliders.push(slider); 
      slider.on('slideChangeStart', function() { 
       console.log('slide change start 2'); 
       $('.overlay1').hide().delay(700).fadeIn(1400); 
       $('.overlay2').hide().delay(700).fadeIn(1400); 
      }); 
     }); 
    </script> 
    <script> 
     $(document).ready(function() { 
      $(".fancybox").fancybox({ 
       maxWidth: 1170, 
       maxHeight: 682, 
       fitToView : false, 
       autoSize : false, 
       width: '100%', 
       height: '100%', 
       closeClick: false, 
       openEffect: 'fade', 
       closeEffect: 'fade' 
      }); 
      $('.delete').click(
       function() { 
       $('input:text').val('').trigger('keyup'); 
      }); 
     }); 
    </script> 
    <script> 
     $('#navbar > ul > li').hover(function() { 
      $(this).css("background-color", "#f3f3f3"); 
     }, function() { 
      $(this).css("background-color", "transparent"); 
     }); 
     $('.delete').click(
      function() { 
      $('input:text').val('').trigger('keyup'); 
     }); 
    </script> 
    <script src='js/script.js'></script> 

Answer 1

また、silderの作成をドキュメントレディイベントハンドラに移動する必要があります。そして、Javaスクリプトファイルで3つのスクリプトタグを移動する方が良いでしょう。

$(function() { 

     var sliders = []; 
     $('.swiper-container').each(function (index, element) { 
      $(this).addClass('s' + index); 
      var slider = new Swiper('.s' + index, { 
       pagination: '.swiper-pagination', 
       paginationClickable: true, 
       nextButton: '.swiper-button-next', 
       prevButton: '.swiper-button-prev', 
       spaceBetween: 0, 
       speed: 1000, 
       autoplay: 4000, 
       loop: true, 
       paginationBulletRender: function (swiper, index, className) { 
       return '<span class="' + className + '">' + (index + 1) + '</span>'; 
       } 
      }); 
      sliders.push(slider); 
      slider.on('slideChangeStart', function() { 
       console.log('slide change start 2'); 
       $('.overlay1').hide().delay(700).fadeIn(1400); 
       $('.overlay2').hide().delay(700).fadeIn(1400); 
      }); 
     }); 
      $(".fancybox").fancybox({ 
       maxWidth: 1170, 
       maxHeight: 682, 
       fitToView : false, 
       autoSize : false, 
       width: '100%', 
       height: '100%', 
       closeClick: false, 
       openEffect: 'fade', 
       closeEffect: 'fade' 
      }); 
      $('.delete').click(
       function() { 
       $('input:text').val('').trigger('keyup'); 
      }); 
     }); 

    $('#navbar > ul > li').hover(function() { 
      $(this).css("background-color", "#f3f3f3"); 
     }, function() { 
      $(this).css("background-color", "transparent"); 
     }); 
     $('.delete').click(
      function() { 
      $('input:text').val('').trigger('keyup'); 
     });