Minimal Multi-slide Image Carousel Plugin For jQuery
File Size: | 6.52 KB |
---|---|
Views Total: | 7286 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
This is a basic, automatic image slider/carousel plugin for jQuery that features auto rotation, infinite looping and multiple images per slide.
How to use it:
1. Add the images together with the navigation arrows and pagination bullets to the slider/carousel.
<div id="slider" class="slider slider_first"> <div class="slider_viewport"> <div class="slider_list"> <div class="slider_item"><img src="1.jpg"></div> <div class="slider_item"><img src="2.jpg"></div> <div class="slider_item"><img src="3.jpg"></div> <div class="slider_item"><img src="4.jpg"></div> ... </div> </div> <div class="slider_nav"> <div class="slider_arrow slider_arrow__left"></div> <div class="slider_arrow slider_arrow__right"></div> </div> <div class="slider_control-nav"> <!-- All this selectors must be created dynamically. They are here just for example --> </div> </div>
2. Load the JavaScript file slider.js
after jQuery library.
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script> <script src="js/slider.js"></script>
3. Initialize the plugin to create a basic image carousel/slider.
$('#slider').slider();
4. Style the image carousel/slider in your CSS.
/* Slider */ .slider { user-select: none; display: inline-block; position: relative; } .slider_first { // width: 459px; } .slider_second { } .slider_viewport { position: relative; overflow: hidden; } .slider_list { } .animate { transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1); } .slider_item { float: left; } .slider_item img { display: block; max-width: 100%; height: auto; background-size: cover; } .slider_nav.is-disabled { display: none; } .slider_control-nav { position: absolute; z-index: 999; left: 0; right: 0; bottom: -50px; text-align: center; } .slider_control-nav-item { -webkit-transition: all 0.5s linear; transition: all 0.5s linear; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin: 0 5px; cursor: pointer; background: #fff; } .slider_control-nav-item:hover { opacity: 0.3; } .slider_control-nav-item.is-active { opacity: 0.6; background: #000; //cursor: default; } .slider_arrow { position: absolute; top: 50%; margin-top: -25px; width: 26px; height: 49px; z-index: 999; cursor: pointer; } .slider_arrow.is-disabled { cursor: default; opacity: 0.5; } .slider_arrow:hover { opacity: 0.5; } .slider_arrow__right { right: -40px; background: url(../images/arrow_right.png) no-repeat 0 0; } .slider_arrow__left { left: -40px; background: url(../images/arrow_left.png) no-repeat 0 0; } .slider__fullwidth .slider_viewport::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: url(../images/dot.png) repeat 0 0; } .slider__carousel { overflow: hidden; } .slider__carousel::before, .slider__carousel::after { content: ""; width: 150px; position: absolute; top: -5px; bottom: -5px; z-index: 200; } .slider__carousel::before { left: -5px; background: -webkit-linear-gradient(left, #fff 10%, transparent); background: linear-gradient(to right, #fff 10%, transparent); } .slider__carousel::after { right: -5px; background: -webkit-linear-gradient(right, #fff 10%, transparent); background: linear-gradient(to left, #fff 10%, transparent); } .slider__carousel .slider_viewport { overflow: visible; width: 250px; margin: 0 auto; } .slider__carousel .slider_arrow__left { left: 70px; } .slider__carousel .slider_arrow__right { right: 70px; }
5. Specify the number of images to be displayed in one slide.
$('#slider').slider({ items: 1 });
6. Specify the interval for the auto-rotation functionality.
$('#slider').slider({ interval: 1000 });
7. Enable/disable the infinite loop functionality.
$('#slider').slider({ loop: false });
8. Specify the image width:
$('#slider').slider({ imgWidth: 300 });
This awesome jQuery plugin is developed by anton017. For more Advanced Usages, please check the demo page or visit the official website.