iDangerous Swiper设置

Question

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

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

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

        });

    },

问题：是最后一个分页(在本例中是活动分页)没有得到活动类。只有在点击时，它才会很快获得活动分页类，然后立即切换到当前的活动类。

载重：

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

        });