Tornado Logo

Carousel | Slider - Tornado UI v2

tornado ui provide simple carousel and yet very useful in many cases you can use it to do almost any slider you wish for without any complexity in the HTML structure and also provide useful options for responsive and animations.



Note This Slider is Under Development Mode not Yet Finshed…
if you want a nice advanced es6 slider tornado has included the Great glide.js Plugin for you.

Carousel Structure

in order to build your carousel first you create a wraper and give it any class name or ID you desire and inside that wrapper you create your items list with class name slider-track that represent the slides and from here you can do whatever you want in the item/slide element then you can create the optional elements controls like Next/Previous Buttons or the Pagination you will see simple example in the code below

<!-- Slider Wrapper -->
<div class="slider-component">
    <div class="slide-1">...</div>
    <div class="slide-2">...</div>
    <div class="slide-3">...</div>
    <div class="slide-4">...</div>
</div>

JS initialize

after building your carousel HTML structure now all you need to do is run the carousel functionality on it by calling the tornado carousel function and set your options inside it see the code below.

tornadoCarousel('.slider-component', options);

<!-- Slider -->
<div class="glide home-slider">
    <!-- Slider Track -->
    <div class="glide-track" data-glide-el="track">
        <ul class="glide-slides">
            <!-- item -->
            <li class="glide-slide item"></li>
        </ul>
    </div>
    <!-- Controls -->
    <div data-glide-el="controls">
        <button data-glide-dir="<<" class="control-btn prev-btn ti-arrow-left-chevron"></button>
        <button data-glide-dir=">>" class="control-btn next-btn ti-arrow-right-chevron"></button>
    </div>
</div>
<!-- // Slider -->

Copyright (c) 2016-present, Tornado UI Licensed under the terms of the MIT License.