javascript - iDangerous Swiper初始滑动设置

Question

对于我们网站的移动版本，我们使用 iDangerous Swiper (2.4.3) 来显示产品图像，对于桌面版本，我们使用轮播。

移动版本使用与桌面版本相同的图像和顺序，因为两个版本都使用相同的数据库查询。

    /*
     * Carrousel
     */
    $q = "
        SELECT
            c.id,
            CONCAT('" . Config::get(array("paths","uri-products")) . $product_id . "/',c.image_url) as image_url
        FROM
            product_carrousel c
        WHERE
            c.product_id = '" . $product_id . "'
        ORDER BY
            c.order ASC
        ";

    $r["carrousel"] = $this->db->select($q);

我们想要完成的任务:我们想要在移动版本中显示另一个起始图像。有没有办法让 iDangerous Swiper (2.4.3) 拥有特定的起始幻灯片或偏移 -1 幻灯片(因此它从最后一张图像开始)。这样我就可以上传移动设备的特定开始图像作为最后一张图像，并且仅在移动设备上首先显示该图像。

HTML/PHP 移动版本:

<div class="swiper-container product-slider">
    <div class="swiper-wrapper">

    <?php foreach ($product['carrousel'] as $x => $item):?>

        <div class="swiper-slide">
            <figure class="swiper-slide-img">
                <img src="<?php echo $item['image_url']; ?>" alt="<?php echo strip_tags($product['title']); ?>"/>
            </figure>
        </div>

    <?php endforeach; ?>
</div>

HTML 输出移动:

    <div class="swiper-container product-slider done">
        <div class="swiper-wrapper" style="width: 2484px; transform: translate3d(-414px, 0px, 0px); transition-duration: 0s; height: 229px;"><div xmlns="http://www.w3.org/1999/xhtml" class="swiper-slide swiper-slide-duplicate" style="width: 414px; height: 229px;">
            <figure class="swiper-slide-img">
                <img src="" alt="">
            </figure>
        </div>


        <div class="swiper-slide swiper-slide-visible swiper-slide-active" style="width: 414px; height: 229px;">
            <figure class="swiper-slide-img">
                <img src="" alt="">
            </figure>
        </div>


        <div class="swiper-slide" style="width: 414px; height: 229px;">
            <figure class="swiper-slide-img">
                <img src="" alt="">
            </figure>
        </div>


        <div class="swiper-slide" style="width: 414px; height: 229px;">
            <figure class="swiper-slide-img">
                <img src="" alt="">
            </figure>
        </div>


        <div class="swiper-slide" style="width: 414px; height: 229px;">
            <figure class="swiper-slide-img">
                <img src="" alt="">
            </figure>
        </div>

        <div xmlns="http://www.w3.org/1999/xhtml" class="swiper-slide swiper-slide-duplicate" style="width: 414px; height: 229px;">
            <figure class="swiper-slide-img">
                <img src="" alt="">
            </figure>
        </div>
    </div>

部分解决方案:

在 idangerous.swiper.min.js 中我找到了设置:initialSlide。

将其更改为 -1 会使 slider 从移动设备中的最后一张幻灯片开始。

我已向 ui.js 添加了以下内容:

    initSliders: function() {

        $('.swiper-container').each(function(){

            var paginationContainer = '.' + $(this).next().attr('class');

            if($(this).hasClass('product-slider')) {
                var mySwiper = $(this).swiper({
                mode:'horizontal',
                loop: true,
                initialSlide: -1,
                pagination: paginationContainer,
                calculateHeight: true
                });
            } else {
                var mySwiper = $(this).swiper({
                mode:'horizontal',
                loop: true,
                initialSlide: 0,
                pagination: paginationContainer,
                calculateHeight: true
                });
            }

            $(this).addClass('done');
            $(this).next().addClass('swiper-ready');

        });

    },

问题:最后一个分页(在本例中为事件分页)没有获取事件类。只有在滑动时，它才会很快获得事件分页类，然后立即切换到当前事件分页类。

加载时:

     <div class="swiper-pagination swiper-ready">
        <span class="swiper-pagination-switch"></span>
        <span class="swiper-pagination-switch"></span>
        <span class="swiper-pagination-switch"></span>
        <span class="swiper-pagination-switch"></span>
    </div>

拖动/滑动时:

    <div class="swiper-pagination swiper-ready">
        <span class="swiper-pagination-switch"></span>
        <span class="swiper-pagination-switch"></span>
        <span class="swiper-pagination-switch"></span>
        <span class="swiper-pagination-switch swiper-visible-switch swiper-active-switch"></span>
    </div>

滑动后:

    <div class="swiper-pagination swiper-ready">
        <span class="swiper-pagination-switch"></span>
        <span class="swiper-pagination-switch"></span>
        <span class="swiper-pagination-switch swiper-visible-switch swiper-active-switch"></span>
        <span class="swiper-pagination-switch"></span>  
    </div>

Answer 1

解决方案

     initSliders: function() {

        $('.swiper-container').each(function(){

            var paginationContainer = '.' + $(this).next().attr('class');

            if($(this).hasClass('product-slider')) {
                var mySwiper = $(this).swiper({
                mode:'horizontal',
                loop: true,
                initialSlide: -1,
                pagination: paginationContainer,
                calculateHeight: true
                });

                $(this).next().find(".swiper-pagination-switch:last").addClass("swiper-visible-switch swiper-active-switch");

            } else {
                var mySwiper = $(this).swiper({
                mode:'horizontal',
                loop: true,
                initialSlide: 0,
                pagination: paginationContainer,
                calculateHeight: true
                });
            }

            $(this).addClass('done');
            $(this).next().addClass('swiper-ready');

        });