javascript - 滑动事件未触发

Question

我正在开发一个使用 Swiper 的画廊网站 用于幻灯片放映的 JQuery 插件和用于网格的同位素。 画廊中的每个项目都有自己的 slider 和自己的 同位素项目。 Swiper 画廊会在 fancybox 中弹出 并且仅适用于调整大小。

谁能告诉我我做错了什么？

<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

您应该将 slider 的创建也移至文档就绪事件处理程序中。最好将 3 个脚本标签移到 javascript 文件中。

$( 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');
       });