Minimal Responsive Image Carousel/Slider Plugin With jQuery - Simply Carousel
File Size: | 1.29 MB |
---|---|
Views Total: | 2798 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Simply Carousel is a lightweight and fast jQuery plugin which allows you to build a flexible, responsive image carousel/slider for your featured content.
Features:
- Tiny and easy to implement.
- Adapt, flexible and responsive.
- Auto-rotation when page loads.
- Hover to stop auto-rotation & display navigation arrows.
- Subtle crossfade transitions.
How to use it:
1. Include jQuery JS library together with simplycarousel.js
and carousel.css
into your document.
<link rel="stylesheet" href="css/carousel.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="js/simplycarousel.js"></script>
2. Build the Html structure for an image carousel. Add your images into the carousel/slider using CSS background
property.
<div class="demo"> <!-- Carousel container --> <div class="carousel-slide" style="background: url(img/image1.jpg) no-repeat 50% 50%; background-size: cover;"> <div class="caption">Image Caption 1</div> </div> <div class="carousel-slide" style="background: url(img/image2.jpg) no-repeat 50% 50%; background-size: cover;"> <div class="caption">Image Caption 2</div> </div> <div class="carousel-slide" style="background: url(img/image3.jpg) no-repeat 50% 50%; background-size: cover;"> <div class="caption">Image Caption 3</div> </div> <!-- Arrows navigation --> <span class="arrow left select-none"><</span> <span class="arrow right select-none">></span> </div>
3. Initialize the plugin on the slide element and done.
$(document).ready(function(){ $('.carousel-slide').sliderArrow(); });
4. The plugin provides 3 basic options to customize the carousel.
$(document).ready(function(){ $('.carousel-slide').sliderArrow({ transition_time : 1000, // animation speed next_slides : 2500, // animation delay slideOn :'.carousel-slide.on' // slide on element }); });
This awesome jQuery plugin is developed by haniepark. For more Advanced Usages, please check the demo page or visit the official website.