Author: | karolkkas |
---|---|
Views Total: | 2,666 views |
Official Page: | Go to website |
Last Update: | February 23, 2018 |
License: | MIT |
Preview:

Description:
A vanilla JavaScript library to create a fully-responsive, auto-rotating image carousel with custom caption titles and text.
How to use it:
Add images together with image captions and carousel controls to the carousel.
<section id="slider" class="slider"> <div id="wrapper" class="slides-wrapper"> <div id="slide" class="slide" data-slide-id="0"> <img class="slide__img" src="1.jpg" alt="slider-0"> <div class="slide__caption"> <span class="slide__caption--title">Slide 1</span> <span class="slide__caption--text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam assumenda nostrum quisquam voluptatem consectetur dolore, necessitatibus doloribus temporibus, enim animi adipisci architecto ipsum, labore corporis! Quaerat doloribus consequatur ex blanditiis?</span> </div> </div> <div id="slide" class="slide" data-slide-id="1"> <img class="slide__img" src="2.jpg" alt="slider-1"> <div class="slide__caption"> <span class="slide__caption--title">Slide 2</span> <span class="slide__caption--text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam assumenda nostrum quisquam voluptatem consectetur dolore, necessitatibus doloribus temporibus, enim animi adipisci architecto ipsum, labore corporis! Quaerat doloribus consequatur ex blanditiis?</span> </div> </div> <div id="slide" class="slide" data-slide-id="2"> <img class="slide__img" src="https://images.unsplash.com/photo-1511431426884-c1525fc26c8a?auto=format&fit=crop&w=1350&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt="slider-2"> <div class="slide__caption"> <span class="slide__caption--title">Slide 3</span> <span class="slide__caption--text">3.jpg</span> </div> </div> <div id="slide" class="slide" data-slide-id="3"> <img class="slide__img" src="4.jpg" alt="slider-3"> <div class="slide__caption"> <span class="slide__caption--title">Slide 4</span> <span class="slide__caption--text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam assumenda nostrum quisquam voluptatem consectetur dolore, necessitatibus doloribus temporibus, enim animi adipisci architecto ipsum, labore corporis! Quaerat doloribus consequatur ex blanditiis?</span> </div> </div> </div> <a href="#" class="slider__btn slider__btn--prev" data-slide="prev"> <i class="fa fa-chevron-left" aria-hidden="true"></i> </a> <a href="#" class="slider__btn slider__btn--next" data-slide="next"> <i class="fa fa-chevron-right" aria-hidden="true"></i> </a> <div class="indicators"> <ul class="indicators__list"> <li class="indicators__item active" data-slide-to="0"></li> <li class="indicators__item" data-slide-to="1"></li> <li class="indicators__item" data-slide-to="2"></li> <li class="indicators__item" data-slide-to="3"></li> </ul> </div> </section>
In this example, you need to load the Font Awesome for the navigation icons.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
Load the compiled JavaScript and CSS files in the document. Done.
<link href="css/main.css" rel="stylesheet"> <script src="js/script-compiled.js"></script>