스 와이프 이벤트가 발생하지 않습니다.

Question

스 와이퍼 슬라이드 쇼용 JQuery 플러그인과 그리드 용 아이소 토 피어를 사용하는 갤러리 웹 사이트에서 작업하고 있습니다. 갤러리의 각 항목에는 자체 슬라이더와 자체의 동위 원소 항목이 있습니다. 스 와이프 갤러리는 팬시 박스 에서 팝업되고 크기 조정시에만 작동합니다.

누구든지 내가 뭘 잘못하고 있다고 말할 수 있습니까?

<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 작성을 문서 준비 이벤트 핸들러로 옮겨야합니다. 그리고 자바 스크립트 파일에서 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'); 
     });