Responsive Automatic Carousel Slider - jq-carousel-plugin
File Size: | 6.85 KB |
---|---|
Views Total: | 6148 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
This is a simple jQuery slider plugin used to create a responsive, fullscreen (optional), infinite-looping carousel from an array of images you prefer.
How to use it:
1. Create a container element where you want to place the carousel.
<div id="box"> </div>
2. Call the function on the container element and define an array of images to be displayed in the carousel.
$(function(){ $("#box").jqCarouselImg({ // the amount of images imgLen: 5, // an array of images imgUrl: ['1.jpg','2.jpg','3.jpg','4.jpg',,'5.jpg'] }) });
3. The primary CSS for the carousel.
.imgUl { display: flex; position: absolute; list-style: none; width: 500%; height: 100%; transition: all 2s; } .imgUl .imgLi { width: 25%; height: 100%; justify-content: space-between; } .imgUl .imgLi .carouselImg { width: 100%; height: 100%; }
4. Style & position the navigation arrows.
.btn-img { position: absolute; display: block; width: 50px; height: 50px; line-height: 50px; top: 50%; margin-top: -25px; background-color: rgba(0, 0, 0, 0.1); z-index: 999; cursor: pointer; font-size: 40px; font-weight: 600; color: rgba(255, 255, 255, 0.9); text-align: center; display: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -khtml-user-select: none; user-select: none; } .prevImg { left: 10px; } .nextImg { right: 10px; } .btn-img-hover { background-color: rgba(0, 0, 0, 0.3); }
5. Style & position the pagination bullets.
.btnUl { position: absolute; display: flex; justify-content: space-around; list-style: none; top: 95%; height: 15px; left: 50%; transform: translateX(-50%); } .btnUl .btnLi { height: 15px; width: 15px; border-radius: 50%; background-color: rgba(0, 0, 0, 0.2); margin-left: 20px; cursor: pointer; } .btnUl .btnLi:first-child { background-color: rgba(255, 255, 255, 0.8); } .btnUl .btnLi-hover { background-color: rgba(255, 255, 255, 0.8); }
6. Set the autoplay interval.
$(function(){ $("#box").jqCarouselImg({ // the amount of images imgLen: 5, // an array of images imgUrl: ['1.jpg','2.jpg','3.jpg','4.jpg',,'5.jpg'], // in milliseconds speed: 4000 }) });
7. Set the sliding direction when reaching the last image.
$(function(){ $("#box").jqCarouselImg({ // the amount of images imgLen: 5, // an array of images imgUrl: ['1.jpg','2.jpg','3.jpg','4.jpg',,'5.jpg'], // true or false direction: false }) });
This awesome jQuery plugin is developed by cq-zz. For more Advanced Usages, please check the demo page or visit the official website.