Mobile-first Images Carousel/Swiper/Rotator Plugin - JQ_Carousel

A lightweight, fully responsive, mobile-first, auto-rotating, jQuery based carousel/swiper/rotator for showcasing your images, featured posts, promotional products, and etc.

How to use it:

1. Insert the minified version of the JQ_Carousel plugin after jQuery.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="JQ_Carousel.min.js"></script>

2. Insert images to the carousel container.

<div class="carousel-banner">
  <div class="carousel-wrap">
    <a href="#" class="carousel-img">
      <img src="1.jpg">
    </a>
    <a href="#" class="carousel-img">
      <img src="2.jpg">
    </a>
    <a href="#" class="carousel-img">
      <img src="3.jpg">
    </a>
    ...
  </div>
</div>

3. Sometimes you mihgt need to display descriptions in the carousel images.

<div class="carousel-banner">
  <div class="carousel-wrap">
    <div class="carousel-img">
      <a href="#">
        <img src="1.jpg">
        <p class="carousel-remarks">Description 1</p>
      </a>
    </div>
    <div class="carousel-img">
      <a href="#">
        <img src="2.jpg">
        <p class="carousel-remarks">Description 2</p>
      </a>
    </div>
    <div class="carousel-img">
      <a href="#">
        <img src="3.jpg">
        <p class="carousel-remarks">Description 3</p>
      </a>
    </div>
    ...
  </div>
</div>

4. The required CSS for the carousel. Copy and paste the following CSS snippets into your page.

.carousel-banner {
  width: 6.9rem;
  height: 3.24rem;
  overflow: hidden;
}

.carousel-banner .carousel-wrap {
  width: auto;
  height: 100%;
  white-space: nowrap;
  font-size: 0;
}

.carousel-banner .carousel-wrap .carousel-img {
  position: relative;
  display: inline-block;
  width: 6.9rem;
  height: 3.24rem;
  font-size: 0.26rem;
  overflow: hidden;
}

.carousel-banner .carousel-wrap .carousel-img img {
  width: 100%;
  height: 100%;
}

.carousel-banner .carousel-wrap .carousel-img .carousel-remarks {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.6rem;
  line-height: 0.6rem;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  color: #f7f7f7;
}

5. Initialize the JQ_Carousel plugin. Done.

// responsive text
$("html").css("font-size", document.body.clientWidth / 6.9 + "px");

// initialize
$(".carousel-banner").carousel();

6. Set the time to wait before the carousel automatically switches to the next image. Default: 2 seconds.

$(".carousel-banner").carousel({
  timer: 4000
});

7. Customize the animation speed. Default: 800 ms.

$(".carousel-banner").carousel({
  animateTimer: 1000
});

---

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