Slideshow with thumbnail navigation workaround

Tips and Tricks
1

Not sure if needed by anybody else, but I had a need for a slideshow component with thumbnail navigation, here is a very simple workaround using 2 swiper components if anyone else needs it.

<div class="col-12 col-md-4">
    <style>
        #swiper_special_offer_full .swiper-button-prev,
        #swiper_special_offer_full .swiper-button-next {
            color: #fff;
        }
    </style>
    <div is="dmx-swiper" id="swiper_special_offer_full" loop="true" navigation="true" dmx-on:change="swiper_special_offer_thumb.slideTo(index)>
        <div class="swiper-slide">
            <img src="https://swiperjs.com/demos/images/nature-1.jpg" class="img-fluid" />
        </div>
        <div class="swiper-slide">
            <img src="https://swiperjs.com/demos/images/nature-2.jpg" class="img-fluid" />
        </div>
        <div class="swiper-slide">
            <img src="https://swiperjs.com/demos/images/nature-3.jpg" class="img-fluid" />
        </div>
        <div class="swiper-slide">
            <img src="https://swiperjs.com/demos/images/nature-4.jpg" class="img-fluid" />
        </div>
    </div>
    <div is="dmx-swiper" id="swiper_special_offer_thumb" slides-per-view="4" space-between="15" class="mt-3" grab-cursor="true">
        <div class="swiper-slide" dmx-on:click="swiper_special_offer_full.update();swiper_special_offer_full.slideTo(0)" dmx-class:opacity-25="swiper_special_offer_full.index!=0">
            <img src="https://swiperjs.com/demos/images/nature-1.jpg" class="img-fluid" />
        </div>
        <div class="swiper-slide" dmx-on:click="swiper_special_offer_full.update();swiper_special_offer_full.slideTo(1)" dmx-class:opacity-25="swiper_special_offer_full.index!=1">
            <img src="https://swiperjs.com/demos/images/nature-2.jpg" class="img-fluid" />
        </div>
        <div class="swiper-slide" dmx-on:click="swiper_special_offer_full.update();swiper_special_offer_full.slideTo(2)" dmx-class:opacity-25="swiper_special_offer_full.index!=2">
            <img src="https://swiperjs.com/demos/images/nature-3.jpg" class="img-fluid" />
        </div>
        <div class="swiper-slide" dmx-on:click="swiper_special_offer_full.update();swiper_special_offer_full.slideTo(3)" dmx-class:opacity-25="swiper_special_offer_full.index!=3">
            <img src="https://swiperjs.com/demos/images/nature-4.jpg" class="img-fluid" />
        </div>
    </div>
</div>
3 Likes
2

Not needed just now, but the tip is much appreciated. :+1: