This time I will share jQuery Plugin and tutorial about Image Carousel With Navigation Arrows And Autoplay Timer, hope it will help you in programming stack.
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.
01 |
<div class="your-slider"> |
02 |
<div class="your-slider-item"> |
03 |
<img src="1.jpg" alt="" /> |
05 |
<div class="your-slider-item"> |
06 |
<img src="2.jpg" alt="" /> |
08 |
<div class="your-slider-item"> |
09 |
<img src="3.jpg" alt="" /> |
11 |
<div class="your-slider-item"> |
12 |
<img src="4.jpg" alt="" /> |
14 |
<div class="your-slider-item"> |
15 |
<img src="5.jpg" alt="" /> |
2. Load the necessary JavaScript and CSS files in the document.
1 |
<link rel="stylesheet" href="/path/to/css/jquery.carousel-line-arrow.css" /> |
2 |
<script src="/path/to/cdn/jquery.min.js"></script> |
3 |
<script src="/path/to/js/jquery.carousel-line-arrow.js"></script> |
3. Specify the height of the carousel slider.
1 |
.carousel-wrapper-middle { height: 400px; } |
4. Attach the function to the top container of the carousel slider. Done.
1 |
$('.your-slider').carouselLineArrow({ |
5. Customize the animation speed. Default: 500ms.
1 |
$('.your-slider').carouselLineArrow({ |
6. Determine whether to automatically adjust the height of the carousel slider on window resize. Default: true.
1 |
$('.your-slider').carouselLineArrow({ |
2 |
heightIsProportional: false |
7. Customize the autoplay timer.
01 |
$('.your-slider').carouselLineArrow({ |
07 |
linePosition: 'bottom', |
