Basic Slideshow / Carousel Plugin With jQuery - Carrusel

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.