iDangerous Swiper initialSlide 设置

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 会使滑块从移动设备中的最后一张幻灯片开始。

我已将以下内容添加到 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');

        });

    },

问题： 最后一个分页（在本例中为活动页）没有得到活动 class。只有在滑动时它会很快获得活动分页 class，然后立即切换到当前活动分页。

加载中：

     <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>

同时 dragging/swiping:

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

        });

iDangerous Swiper initialSlide 设置

iDangerous Swiper initialSlide setting

javascript

slider

swiper