UHasselt Component Library

Image Slider 

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


<!-- Image Slider With Thumbnails -->
<div class="image-slider">
    <div class="image-slider-wrapper">
        <div class="swiper-container image-slider-main" data-slides-per-view="1" 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 class="swiper-container image-slider-thumbs" data-slides-per-view="5" data-loop="true">
        <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-image">
                    <img src="http://i3.ytimg.com/vi/D-HIYP7Jo7Y/maxresdefault.jpg" alt="" />
                </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>


<div class="image-slider">
    <div class="image-slider-wrapper">
        <div class="swiper-container image-slider-main" data-slides-per-view="{{slidesPerView}}" data-loop="{{loop}}" data-loop-additional-slides="{{loopAdditionalSlides}}">
            <div class="swiper-wrapper">
                {{#each slides}}
                    <div class="swiper-slide">
                        {{#if videoUrl}}
                            <div class="slide-video">
                                <iframe src="{{videoUrl}}" frameborder="0"
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                allowfullscreen>
                                </iframe>
                            </div>
                        {{else}}
                            <div class="slide-image">
                                {{#if enableLightbox}}
                                    <div class="slide-image-zoom">
                                        {{ render '@icon' ../zoomIcon }}
                                    </div>

                                    <a data-fslightbox="gallery" href="{{imageUrl}}">
                                        <img src="{{imageUrl}}" alt="" />
                                    </a>
                                {{else}}
                                    <img src="{{imageUrl}}" alt="" />
                                {{/if}}
                            </div>
                        {{/if}}
                    </div>
                {{/each}}
            </div>
        </div>

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

        <div class="swiper-prev">
            {{ render '@prev-next--prev' }}
        </div>

        <div class="swiper-next">
            {{ render '@prev-next--next' }}
        </div>
    </div>

    {{#if showThumbs}}
        <div class="swiper-container image-slider-thumbs" data-slides-per-view="{{thumbsPerView}}" data-loop="{{loop}}">
            <div class="swiper-wrapper">
                {{#each slides}}
                    <div class="swiper-slide">
                        <div class="slide-image">
                            <img src="{{imageUrl}}" alt="" />
                        </div>
                    </div>
                {{/each}}
            </div>
        </div>
    {{/if}}
</div>
 
/* Default */
{
  "slidesPerView": 3,
  "showThumbs": false,
  "loop": true,
  "loopAdditionalSlides": 0,
  "enableLightbox": true,
  "zoomIcon": {
    "icon": "fa-expand-alt",
    "style": "far",
    "size": "sm"
  },
  "slides": [
    {
      "imageUrl": "https://picsum.photos/id/231/960/540",
      "caption": "Slide 1"
    },
    {
      "imageUrl": "https://picsum.photos/id/232/960/540",
      "caption": "Slide 2"
    },
    {
      "videoUrl": "https://www.youtube.com/embed/D-HIYP7Jo7Y",
      "imageUrl": "http://i3.ytimg.com/vi/D-HIYP7Jo7Y/maxresdefault.jpg",
      "caption": "Slide 3"
    },
    {
      "imageUrl": "https://picsum.photos/id/234/960/540",
      "caption": "Slide 4"
    },
    {
      "imageUrl": "https://picsum.photos/id/235/960/540",
      "caption": "Slide 5"
    },
    {
      "imageUrl": "https://picsum.photos/id/236/960/540",
      "caption": "Slide 6"
    },
    {
      "imageUrl": "https://picsum.photos/id/237/960/540",
      "caption": "Slide 7"
    },
    {
      "imageUrl": "https://picsum.photos/id/238/960/540",
      "caption": "Slide 8"
    },
    {
      "imageUrl": "https://picsum.photos/id/239/960/540",
      "caption": "Slide 9"
    },
    {
      "imageUrl": "https://picsum.photos/id/2/960/540",
      "caption": "Slide 10"
    }
  ]
}


/* Image Slider With Thumbnails */
{
  "slidesPerView": 1,
  "showThumbs": true,
  "loop": true,
  "loopAdditionalSlides": 0,
  "enableLightbox": true,
  "zoomIcon": {
    "icon": "fa-expand-alt",
    "style": "far",
    "size": "sm"
  },
  "slides": [
    {
      "imageUrl": "https://picsum.photos/id/231/960/540",
      "caption": "Slide 1"
    },
    {
      "imageUrl": "https://picsum.photos/id/232/960/540",
      "caption": "Slide 2"
    },
    {
      "videoUrl": "https://www.youtube.com/embed/D-HIYP7Jo7Y",
      "imageUrl": "http://i3.ytimg.com/vi/D-HIYP7Jo7Y/maxresdefault.jpg",
      "caption": "Slide 3"
    },
    {
      "imageUrl": "https://picsum.photos/id/234/960/540",
      "caption": "Slide 4"
    },
    {
      "imageUrl": "https://picsum.photos/id/235/960/540",
      "caption": "Slide 5"
    },
    {
      "imageUrl": "https://picsum.photos/id/236/960/540",
      "caption": "Slide 6"
    },
    {
      "imageUrl": "https://picsum.photos/id/237/960/540",
      "caption": "Slide 7"
    },
    {
      "imageUrl": "https://picsum.photos/id/238/960/540",
      "caption": "Slide 8"
    },
    {
      "imageUrl": "https://picsum.photos/id/239/960/540",
      "caption": "Slide 9"
    },
    {
      "imageUrl": "https://picsum.photos/id/2/960/540",
      "caption": "Slide 10"
    }
  ],
  "thumbsPerView": 5
}
  • Content: 
    .image-slider {
    .mobile-slide {
        @apply hidden;
    }

    .desktop-slide {
        @apply block;
    }

    .image-slider-wrapper {
        @apply relative;
    }

    .image-slider-main {
        .swiper-slide-active {
            @apply opacity-100;
        }
    }

    .swiper-wrapper > .swiper-slide-thumb-active {
        @apply opacity-100 border-red border-2;
    }

    .swiper-wrapper {
        height: auto;
    }

    .swiper-slide {
        @apply opacity-40;

        > .slide-image {
            @apply relative;

            .slide-image-zoom {
                @apply absolute flex w-8 h-8 bg-white shadow-md top-0 right-0 justify-center items-center pointer-events-none;
            }

            img {
                @apply w-full h-auto;
            }
        }

        > .slide-video {
            @apply relative h-0;
            padding-bottom: 56.25%;

            iframe {
                @apply absolute w-full h-full;
            }
        }
    }

    .swiper-pagination {
        @apply hidden;
    }

    .prev-next {
        @apply h-8 w-8 md:h-12 md:w-12;
    }

    .swiper-prev,
    .swiper-next {
        @apply absolute z-10 top-1/2 transform -translate-y-1/2;

        &.swiper-button-disabled {
            @apply opacity-50;
        }
    }

    .swiper-prev {
        @apply left-5 md:left-8 -translate-x-1/2;
    }

    .swiper-next {
        @apply right-5 md:right-8 translate-x-1/2;
    }

    .image-slider-thumbs {
        @apply mt-4;

        .slide-image img {
            min-height: 45px;
        }
    }

    &.no-slider {
        .swiper-prev,
        .swiper-next {
            @apply hidden !important;
        }
    }
}

.fslightbox-container {
    .fslightbox-slide-number-container,
    .fslightbox-slide-btn-container {
    }
}
  • URL: /components/raw/image-slider/image-slider.css
  • Filesystem Path: src\components\03-molecules\image-slider\image-slider.css
  • Size: 1.9 KB
  • Content: 
    (function () {

    'use strict';

    var imageSliders = document.querySelectorAll(
        '.image-slider:not(.no-slider)'
    );

    for (var i = 0; i < imageSliders.length; i++) {
        var imageSliderEle = imageSliders[i],
            sliderMainEle = imageSliderEle.querySelector('.image-slider-main'),
            sliderThumbsEle = imageSliderEle.querySelector(
                '.image-slider-thumbs'
            ),
            sliderMain = null,
            sliderThumbs = null,
            slidesPerView;

        if (sliderThumbsEle !== null) {
            sliderThumbs = new Swiper(sliderThumbsEle, {
                spaceBetween: 16,
                slidesPerView: parseInt(sliderThumbsEle.dataset.slidesPerView),
                loop: sliderThumbsEle.dataset.loop == 'true' ? true : false,
                centeredSlides: false,
                watchSlidesVisibility: true,
                watchSlidesProgress: true,
            });
        }

        sliderMain = new Swiper(sliderMainEle, {
            spaceBetween: 16,
            slidesPerView: 1,

            loop: sliderMainEle.dataset.loop == 'true' ? true : false,
            loopAdditionalSlides: parseInt(
                sliderMainEle.dataset.loopAdditionalSlides
            ),
            thumbs: {
                swiper: sliderThumbs,
            },
            navigation: {
                nextEl: sliderMainEle.parentElement.querySelector(
                    '.swiper-next'
                ),
                prevEl: sliderMainEle.parentElement.querySelector(
                    '.swiper-prev'
                ),
            },
            pagination: {
                el: '.swiper-pagination',
                type: 'bullets',
                clickable: 'true',
            },
            on: {
                init: function () {
                    refreshFsLightbox();
                },
            },
        });
    }
})();
  • URL: /components/raw/image-slider/image-slider.js
  • Filesystem Path: src\components\03-molecules\image-slider\image-slider.js
  • Size: 2 KB

No notes defined.