Image Carousel With Navigation Arrows And Autoplay Timer

A tiny and easy-to-use jQuery slider plugin to showcase images in a responsive, auto-rotating carousel UI.

The carousel automatically scrolls through images at a given speed and displays a top or bottom progress bar telling users the remaining time it takes to navigate to the next image.

In addition, the carousel automatically pauses the autoplay behavior on hover and displays prev/next buttons which can be used to navigate between images manually.

How to use it:

1. Add your images as slides to the carousel slider.

<div class="your-slider">
  <div class="your-slider-item">
    <img src="1.jpg" alt="" />
  </div>
  <div class="your-slider-item">
    <img src="2.jpg" alt="" />
  </div>
  <div class="your-slider-item">
    <img src="3.jpg" alt="" />
  </div>
  <div class="your-slider-item">
    <img src="4.jpg" alt="" />
  </div>
  <div class="your-slider-item">
    <img src="5.jpg" alt="" />
  </div>
</div>

2. Load the necessary JavaScript and CSS files in the document.

<link rel="stylesheet" href="/path/to/css/jquery.carousel-line-arrow.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/js/jquery.carousel-line-arrow.js"></script>

3. Specify the height of the carousel slider.

.carousel-wrapper-middle { height: 400px; }

4. Attach the function to the top container of the carousel slider. Done.

$('.your-slider').carouselLineArrow({
  // options here
});

5. Customize the animation speed. Default: 500ms.

$('.your-slider').carouselLineArrow({
  slideDur: 700
});

6. Determine whether to automatically adjust the height of the carousel slider on window resize. Default: true.

$('.your-slider').carouselLineArrow({
  heightIsProportional: false
});

7. Customize the autoplay timer.

$('.your-slider').carouselLineArrow({

  // duration in ms
  lineDur: 5000,

  // or 'top'
  linePosition: 'bottom',

  // height
  lineHeight: '5px',

  // background color
  lineColor: 'red'
  
});

---

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