Carousel

A slideshow component for cycling through elements—images or slides of text—like a carousel.
Read the official Bootstrap Documentation for a full list of instructions and other options.


Add captions to your slides easily with the .carousel-caption element within any .carousel-item. They can be easily hidden on smaller viewports, as shown below, with optional display utilities. We hide them initially with .d-none and bring them back on medium-sized devices with .d-md-block.


Swiper

Swiper is the most modern mobile touch slider with hardware accelerated transitions.

Usage

In order to use swiper on your page, It is required to include the following vendors css in the "Vendors CSS" area from the page's header:

<link rel="stylesheet" href="assets/vendor/libs/swiper/swiper.css" />

Include the following custom page level style in the "Page CSS" area from the page's header:

<link rel="stylesheet" href="assets/vendor/css/pages/ui-carousel.css" />

Include the following vendors script in the "Vendors JS" area from the page's footer:

<script src="assets/vendor/libs/swiper/swiper.js"></script>

Include the following custom script in the "Page JS" area from the page's footer:

<script src="assets/js/ui-carousel.js"></script>

Basic example

Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
<div class="swiper" id="swiper-default">
  <div class="swiper-wrapper">
    <div class="swiper-slide" style="background-image:url(assets/img/elements/1.jpg)">Slide 1</div>
    <div class="swiper-slide" style="background-image:url(assets/img/elements/5.jpg)">Slide 2</div>
    <div class="swiper-slide" style="background-image:url(assets/img/elements/12.jpg)">Slide 3</div>
    <div class="swiper-slide" style="background-image:url(assets/img/elements/7.jpg)">Slide 4</div>
    <div class="swiper-slide" style="background-image:url(assets/img/elements/11.jpg)">Slide 5</div>
  </div>
</div>
© 2017- Pixinvent, Hand-crafted & Made with ❤️