0

试图建立一个带有更多照片的swiper的网站。在 Mac 和 PC 上的各种浏览器上，它运行良好，但在我的图像数组中有 50 多个图像后，在 ios safari 上失败。失败是IOS Safari尝试加载页面，自动刷新并反复尝试，然后显示一条消息说网站加载失败。

在 IOS Firefox 上也是如此。

在收集数组中的图像名称（没有大小和扩展名）之后，我在 CMS（LEPTON）中使用一些 PHP 构建的源代码：

foreach( $aImages as $image )
{
    $div .= '       <div class="swiper-slide" data-title="' . $image . '" >' . PHP_EOL;
    $div .= '           <img data-src="' . $imageURL . $image . '_8b.png" data-srcset="' . $imageURL . $image . '_24b.png 1200w" class="swiper-lazy">' . PHP_EOL;
    $div .= '           <div class="swiper-lazy-preloader"></div>' . PHP_EOL;
    $div .= '       </div>' . PHP_EOL;
}

我初始化滑块的 JS 如下所示：

$(document).ready(function () {
    //initialize swiper when document ready
    var mySwiper = new Swiper ('.swiper-container', {
        /* parameters with different value than default */
        // Duration of transition between slides (in ms)
        speed: 1400,
        // fading effect
        effect: 'fade',
        fadeEffect: {
            crossFade: true
        },
        // show hand on image
        grabCursor: true,
        // add visibility class to currently showing image
        watchSlidesProgress: true,
        watchSlidesVisibility: true,
        // Lazy Loading
        preloadImages: false,
        lazy: {
            loadPrevNext: true,
            loadPrevNextAmount: 1,
            loadOnTransitionStart: true,
        },
        // continuous loop mode
        loop: true,
        // double click zoom into image
        zoom: false,
        // enable keyboard navigation prev/next
        keyboard: {
            enabled: true,
            onlyInViewport: true,
            pageUpDown: true,
        },
        // Navigation arrows
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
            hideOnClick: false,
        },
        // center image
        centeredSlides: true,
        centeredSlidesBounds: false,
        // autoplay
        autoplay: {
            delay: 3000,
            disableOnInteraction: true
        },
        autoplay: false,
    });

知道出了什么问题或者我可以改变什么来解决我的问题吗？

提前谢谢

4

1 回答 1

1

我认为我的问题的解决方案是虚拟幻灯片....测试这个但在那里遇到其他问题....并且本机 JS 中的可用示例并没有真正帮助。

更新：最后我让它与虚拟幻灯片一起运行。然而，与衰落相结合存在一个错误。没有 fade 参数，它正在运行。

于 2020-10-26T06:55:13.427 回答