Homepage banner
Slider options
Autoplay: To use autoplay option, just add data attribute to .swiper-container element as follows: data-autoplay="true".
... <div class="swiper-container" data-autoplay="true"> ...Autoplay Delay: To use autoplay delay option, just add data attribute to .swiper-container element and make sure to have autoplay enabled: data-autoplay="true" data-autoplay-delay="3000" (in ms, 1000 = 1s).
... <div class="swiper-container" data-autoplay="true" data-autoplay-delay="3000"> ...Slide V1
Slider with sliding option with pagination. There are also included action links in main content of banner.
<section class="slideshow initSlideshow mx-auto">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<picture class="slideshow__image">
<source media="(max-width: 767px)" srcset="images/content/slideshow-1-mobile.jpg" />
<source media="(max-width: 1024px)" srcset="images/content/slideshow-1-tablet.jpg" />
<img src="images/content/slideshow-1.jpg" alt="Slideshow slide 1" />
</picture>
<div class="slideshow__content">
<h2 class="slideshow__content__title h1">Purus vestibulum odio hac ultrices</h2>
<div class="slideshow__content__desc">Vitae viverra senectus sagittis nunc. Dictum morbi est lobortis pulvinar. Elementum arcu at fusce nunc.</div>
<div class="slideshow__content__more">
<a href="#" class="button button--green-inverse"><span>More</span></a>
</div>
<div class="slideshow__content__actions">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
...
</div>
<div class="swiper-navigation-arrows">
<a href="javascript:void(0)" class="swiper-button-prev"><i class="icon icon--arrow-left-white"></i></div>
<a href="javascript:void(0)" class="swiper-button-next"><i class="icon icon--arrow-right-white"></i></div>
</div>
</div>
</section>Slide V2
Slider with sliding option with pagination. There are no action links. Be aware to add extra class to main element .slideshow--no-action-links.
<section class="slideshow slideshow--no-action-links initSlideshow mx-auto">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<picture class="slideshow__image">
<source media="(max-width: 767px)" srcset="images/content/slideshow-1-mobile.jpg" />
<source media="(max-width: 1024px)" srcset="images/content/slideshow-1-tablet.jpg" />
<img src="images/content/slideshow-1.jpg" alt="Slideshow slide 1" />
</picture>
<div class="slideshow__content">
<h2 class="slideshow__content__title h1">Purus vestibulum odio hac ultrices</h2>
<div class="slideshow__content__desc">Vitae viverra senectus sagittis nunc. Dictum morbi est lobortis pulvinar. Elementum arcu at fusce nunc.</div>
<div class="slideshow__content__more">
<a href="#" class="button button--green-inverse"><span>More</span></a>
</div>
</div>
</div>
...
</div>
<div class="swiper-navigation-arrows">
<a href="javascript:void(0)" class="swiper-button-prev"></a>
<a href="javascript:void(0)" class="swiper-button-next"></a>
</div>
</div>
</section>Slide V3
Slider with sliding option with pagination. There are no action links and with video play button. Be aware to add extra class to main element .slideshow--no-action-links.
<section class="slideshow slideshow--no-action-links initSlideshow mx-auto">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide swiper-slide--video">
<picture class="slideshow__image">
<source media="(max-width: 767px)" srcset="images/content/slideshow-1-mobile.jpg" />
<source media="(max-width: 1024px)" srcset="images/content/slideshow-1-tablet.jpg" />
<img src="images/content/slideshow-1.jpg" alt="Slideshow slide 1" />
</picture>
<div class="slideshow__content">
<h2 class="slideshow__content__title h1">Purus vestibulum odio hac ultrices</h2>
<div class="slideshow__content__desc">Vitae viverra senectus sagittis nunc. Dictum morbi est lobortis pulvinar. Elementum arcu at fusce nunc.</div>
<div class="slideshow__content__more">
<a href="https://www.youtube.com/watch?v=JtA8gqWA6PE" class="video-play" data-mp-video><span>4:46</span></a>
</div>
</div>
</div>
...
</div>
<div class="swiper-navigation-arrows">
<a href="javascript:void(0)" class="swiper-button-prev"></a>
<a href="javascript:void(0)" class="swiper-button-next"></a>
</div>
</div>
</section>Slide V4
Banner without slider. Be aware to add extra class to main element .slideshow--no-action-links.
<section class="slideshow slideshow--no-action-links mx-auto">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<picture class="slideshow__image">
<source media="(max-width: 767px)" srcset="images/content/slideshow-1-mobile.jpg" />
<source media="(max-width: 1024px)" srcset="images/content/slideshow-1-tablet.jpg" />
<img src="images/content/slideshow-1.jpg" alt="Slideshow slide 1" />
</picture>
<div class="slideshow__content">
<h2 class="slideshow__content__title h1 mw-100">Consectetur nunc magna semper tempus purus vestibulum odio hac ultrices. Risus faucibus cum praesent imperdiet elit sapien. </h2>
</div>
</div>
</div>
</div>
</section>Slide V5
Banner without slider. Be aware to add extra class to main element .slideshow--no-action-links.
<section class="slideshow slideshow--no-action-links mx-auto">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<picture class="slideshow__image">
<source media="(max-width: 767px)" srcset="images/content/slideshow-1-mobile.jpg" />
<source media="(max-width: 1024px)" srcset="images/content/slideshow-1-tablet.jpg" />
<img src="images/content/slideshow-1.jpg" alt="Slideshow slide 1" />
</picture>
<div class="slideshow__content">
<h2 class="slideshow__content__title h1 mw-100">Massa sapien cursus amet, orci,<br> quis id augue quam. Dolor iaculis<br> diam et felis.</h2>
<div class="slideshow__content__desc"></div>
<div class="slideshow__content__more">
<a href="https://www.youtube.com/watch?v=JtA8gqWA6PE" class="video-play" data-mp-video=""><span>4:46</span></a>
</div>
</div>
</div>
</div>
</div>
</section>