Basic Slideshow / Carousel Plugin With jQuery - Carrusel
File Size: | 299 KB |
---|---|
Views Total: | 2864 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A jQuery carousel plugin which makes it easier to create cross-fading slideshows or carousel sliders on the web app.
Features infinite loop, custom navigation controls and mixed content.
How to use it:
1. Load the necessary jQuery library in the document.
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"> </script>
2. Create a carousel slider with custom navigation controls. Requies the latest Font Awesome Iconic Font.
<script src="/path/to/carruselNavegation.js"></script>
<ul class="list-images"> <!--images --> <li><img src="https://placeimg.com/600/400/animals"></li> <li><img src="https://placeimg.com/600/400/nature"></li> <li><img src="https://placeimg.com/600/400/people"></li> <li><img src="https://picsum.photos/600/400/?random"></li> </ul> <!--navigation controls --> <ol class="navegation"> <li class="left iconsDefaultColor"><span class="fa fa-chevron-left"></span></li> <li class="right iconsDefaultColor"><span class="fa fa-chevron-right"></span></li> </ol>
.iconsDefaultColor{ color: #000000; } .iconsNavegationColor{ color: #F781F3; }
3. Create a cross-fading slideshow.
<script src="/path/to/carrusel-automatico.js"></script>
<div id="auto-carusel"> <div> <img src="https://placeimg.com/600/400/animals"> </div> <div> <img src="https://placeimg.com/600/400/nature"> </div> <div> <img src="https://placeimg.com/600/400/people"> </div> <div> <img src="https://picsum.photos/600/400/?random"> </div> </div>
4. Create a basic carousel with custom text.
<script src="/path/to/carrusel-text.js"></script>
<div class="caruselV3"> <div class="carousel"> <img class="img-carousel" src="https://placeimg.com/600/400/arch" > <div class="text"> <h1>Lorem Ipsum</h1> <p">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium atque nemo quasi officia omnis labore officiis asperiores, eaque animi natus ipsa ratione aliquid ut earum, blanditiis quibusdam. Quia ea, incidunt.</p> </div> </div> <div class="carousel"> <img class="img-carousel" src="https://placeimg.com/600/400/nature"> <div class="text"> <h1>Lorem Ipsum</h1> <p">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium atque nemo quasi officia omnis labore officiis asperiores, eaque animi natus ipsa ratione aliquid ut earum, blanditiis quibusdam. Quia ea, incidunt.</p> </div> </div> <div class="carousel"> <img class="img-carousel" src="https://placeimg.com/600/400/people"> <div class="text"> <h1>Lorem Ipsum</h1> <p">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium atque nemo quasi officia omnis labore officiis asperiores, eaque animi natus ipsa ratione aliquid ut earum, blanditiis quibusdam. Quia ea, incidunt.</p> </div> </div> <div class="carousel"> <img class="img-carousel" src="https://picsum.photos/600/400/?random"> <div class="text"> <h1>Lorem Ipsum</h1> <p">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium atque nemo quasi officia omnis labore officiis asperiores, eaque animi natus ipsa ratione aliquid ut earum, blanditiis quibusdam. Quia ea, incidunt.</p> </div> </div> </div>
This awesome jQuery plugin is developed by NadiaQN. For more Advanced Usages, please check the demo page or visit the official website.