Question

我正在使用Swiper的图库网站用于幻灯片和网格同位素的JQuery插件。图库中的每个项目都有自己的滑块和自己的滑块同位素项目。 Swiper画廊突然出现在一个花哨的盒子里并且仅适用于调整大小。

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

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

未触发Swiper事件

1 个答案: