iDangerous Swiper initialSlide setting

Question

For the mobile version of our website we use the iDangerous Swiper (2.4.3) to display product images and for the desktop version we use a carousel.

The mobile version uses the same images and order as our dekstop version, because both versions use the same database query.

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

What we want to accomplish: The mobile version we want to display an other start image. Is there a way for the iDangerous Swiper (2.4.3) to have a specific start slide or offset -1 slide (so it starts with the last image). This way i can upload the specific start image for mobile as last image, and have that one displayed first only on mobile.

HTML/PHP Mobile version:

<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 Output Mobile:

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

Partial solution:

In idangerous.swiper.min.js i found the setting: initialSlide.

Changing that to -1 makes the slider start with the last slide in mobile.

I've added to ui.js the following:

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

        });

    },

Problem: The last pagination (in this case the active one) doesnt get the active class. Only on swipe it shortly gets the active pagination class, and then immediatly switches to the current active one.

On load:

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

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

After swipe:

    <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

Solution

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

        });