UHasselt Component Library

Image Slider Block 

<section class="org-image-slider-block">
    <div class="uhasselt-container">
        <div class="image-slider">
            <div class="image-slider-wrapper">
                <div class="swiper-container image-slider-main" data-slides-per-view="3" data-loop="true" data-loop-additional-slides="0">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div class="slide-image">
                                <img src="https://picsum.photos/id/231/960/540" alt="" />
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="slide-image">
                                <img src="https://picsum.photos/id/232/960/540" alt="" />
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="slide-video">
                                <iframe src="https://www.youtube.com/embed/D-HIYP7Jo7Y" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
                                </iframe>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="slide-image">
                                <img src="https://picsum.photos/id/234/960/540" alt="" />
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="slide-image">
                                <img src="https://picsum.photos/id/235/960/540" alt="" />
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="slide-image">
                                <img src="https://picsum.photos/id/236/960/540" alt="" />
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="slide-image">
                                <img src="https://picsum.photos/id/237/960/540" alt="" />
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="slide-image">
                                <img src="https://picsum.photos/id/238/960/540" alt="" />
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="slide-image">
                                <img src="https://picsum.photos/id/239/960/540" alt="" />
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="slide-image">
                                <img src="https://picsum.photos/id/2/960/540" alt="" />
                            </div>
                        </div>
                    </div>
                </div>

                <div class="swiper-pagination"></div>

                <div class="swiper-prev">
                    <a href="#" class="prev-next prev-next-prev">
                        <span class="icon fal fa-angle-left  fa-2x " aria-hidden="true"></span>
                    </a>

                </div>

                <div class="swiper-next">
                    <a href="#" class="prev-next prev-next-next">
                        <span class="icon fal fa-angle-right  fa-2x " aria-hidden="true"></span>
                    </a>

                </div>
            </div>

        </div>
    </div>
</section>
 
<section class="org-image-slider-block">
    <div class="uhasselt-container">
        {{ render '@image-slider' }}
    </div>
</section>
 
/* No context defined. */

No notes defined.