Carousel is one of the UI attractions that should not be over used. Kodhus provides a full featured Carousel with controls.
Using carousel is not recommended on mobile devices, therefore use it with causion
Following is a full featured example using carousel with controls.
To create a carousel add a container element (e.g div) so that you can position your carousel where you want in the page.
Within your container add a div with the class
.cdt-carousel and within that add
section elements in order of the carousel elements you want.
Following is the code snippet with 4 sections:
<div class="carousel-container"> <div class="cdt-carousel"> <section></section> <section></section> <section></section> <section></section> </div> </div>
You can put whatever you want in your sections. You can add text, add picture or attach pictures as background images in your css like the example above.
const myCarousel = new Kodhus.Carousel(); myCarousel.init([your-carousel-selector]);
Now you can use following to move the carousel forward and backward:
You can add 2 types of controls to your carousel. Arrows and bullet controls. You need to add those as following after your last
<div class="carousel-container"> <div class="cdt-carousel"> <section></section> <section></section> <section></section> <section></section> <div class="controls"> <span class="arrow left"></span> <span class="arrow right"></span> <ul> <li> <span></span> </li> <li> <span></span> </li> <li> <span></span> </li> <li> <span></span> </li> </ul> </div> </div> </div>
As you can see, you need to add a
div after your last section with the class
.controls and within that you can add 2 spans which share the class
.arrow and also
you left and right arrows
Moreover you can add and unordered list with list items the number of sections you have. each of the list items should have and empty span inside.
|data-carousel-type||fade, overlay, slide and slide sense||Defines different carousel types|
|data-auto-slide||true / false||Enables / disables auto sliding feature of the carousel|
|data-infinite||true / false||In the case of using slide or overlay type, when you use the arrow controls,
you will see the movement in one direction when going to the first or last item.
|data-opacity-duration||default: 1000 milliseconds (1 second)||If the Reveal effect should happen for each children individually|