Create Advanced Bootstrap Carousels With HVcarousel

HVcarousel is a jQuery slider plugin which makes uses of Bootstrap 4 carousel component to create responsive, configurable, auto-rotating sliders, carousels, slideshows with minimal effort.

The goal of this plugin is to enhance the native Bootstrap 4 carousel with additional features as follows:

• Without the need of Bootstrap 4 JavaScript.
• Thumbnails navigation.
• Improved image captions.
• Auto adapt to the content size.
• Enlarge the current image in a popup on click.

How to use it:

1. Load the latest Bootstrap 4 stylesheet and the HVcarousel plugin's CSS in the header of the document.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<link rel="stylesheet" href="/path/to/css/hVCarousel.css" />

2. Build the HTML for a basic carousel with captions.

<div id="myCarousel" class="hVCarousel">
  <div class="hVCarousel-inner">
    <div class="hVCarousel-slides">
      <figure class="hVCarousel-item">
        <img src="1.jpg" alt=""/>
        <figcaption class="cr-caption row">
          <div class="col-md-6">
            <div class="bg-dark p-3">
                <h4 class="text-white">Slide 1</h4>
                <p class="text-white mb-0">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua.
                </p>
              </div>
          </div>
        </figcaption>
      </figure>
      <figure class="hVCarousel-item">
        <img src="2.jpg" alt=""/>
        <figcaption class="cr-caption row">
          <div class="col-md-6">
            <div class="bg-dark p-3">
                <h4 class="text-white">Slide 2</h4>
                <p class="text-white mb-0">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua.
                </p>
              </div>
          </div>
        </figcaption>
      </figure>
      <figure class="hVCarousel-item">
        <img src="3.jpg" alt=""/>
        <figcaption class="cr-caption row">
          <div class="col-md-6">
            <div class="bg-dark p-3">
                <h4 class="text-white">Slide 3</h4>
                <p class="text-white mb-0">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua.
                </p>
              </div>
          </div>
        </figcaption>
      </figure>
    </div>
  </div>
</div>

3. Call the function to initialize the carousel.

$(function () {
  $('#myCarousel').hVCarousel({
    // options here
  });
});

4. Enable navigation arrows and pagination controls.

$(function () {
  $('#myCrousel').hVCarousel({
    dots: true,
    arrow: true
  });
});

5. Show a zoom icon inside the carousel that allows the user to enlarge and display the current image in a popup.

$(function () {
  $('#myCrousel').hVCarousel({
    largeImage: true
  });
});

6. Use crossfading effect instead of sliding.

$(function () {
  $('#myCrousel').hVCarousel({
    fade: true
  });
});

7. Config the autoplay functionality.

$(function () {
  $('#myCrousel').hVCarousel({
    autoplay: true,
    interval: 3000
  });
});

8. Create a thumbnail navigation where the user

<div id="" class="hVCarousel thumbnail-bottom">
  <div class="hVCarousel-inner">
    <div class="hVCarousel-slides">
      <figure class="hVCarousel-item" data-thumnail="1.png">
        <img src="1.jpg" alt=""/>
      </figure>
      <figure class="hVCarousel-item" data-thumnail="2.png">
        <img src="2.jpg" alt=""/>
      </figure>
      <figure class="hVCarousel-item" data-thumnail="3.png">
        <img src="3.jpg" alt=""/>
      </figure>
      </div>
  </div>
</div>

$(function () {
  $('#myCrousel').hVCarousel({
    thumbnailPlace: 'right' // 'top', 'bottom', 'right', 'left'
  });
});

---

This awesome jQuery plugin is developed by hiteshvermahsp. For more Advanced Usages, please check the demo page or visit the official website.