Infinite Image Carousel Slider Plugin with jQuery and CSS3 - slidr
File Size: | 27.1 KB |
---|---|
Views Total: | 2575 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Just another jQuery responsive and touch-enabled carousel / slider plugin that loops through a list of images with numerious cool transition effects based on CSS3 transforms and transitions.
How to use it:
1. Place your slider images into an html list.
<ul class="slidr"> <li><img src="1.jpg" alt="Image 1"></li> <li><img src="2.jpg" alt="Image 2"></li> <li><img src="3.jpg" alt="Image 3"></li> ... </ul>
2. Place jQuery library and the jQuery slidr plugin at the end of the html document.
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script> <script src="slidr.js"></script>
3. The required CSS styles for the slider plugin.
.slidr-container { width: 100%; position: relative; overflow: hidden; } .slidr-container.init .slidr { opacity: 1; visibility: visible; } .slidr { position: relative; overflow: hidden; margin: 0; padding: 0; list-style: none; width: 100%; z-index: 1; opacity: 0; visibility: hidden; } .slidr.animating > * { -webkit-transition-property: all; transition-property: all; } .slidr.animating > *.fade { opacity: 1; } .slidr.animating > *.scale { border-radius: 0; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .slidr.animating > *.wipe.left, .slidr.animating > *.wipe.right { -webkit-transform: translateZ(0) translateX(0); transform: translateZ(0) translateX(0); } .slidr.animating > *.wipe-out.left { -webkit-transform: translateZ(0) translateX(100%); transform: translateZ(0) translateX(100%); } .slidr.animating > *.wipe-out.right { -webkit-transform: translateZ(0) translateX(-100%); transform: translateZ(0) translateX(-100%); } .slidr.animating > *.horizontal.left { -webkit-transform: translateZ(0) translateX(100%); transform: translateZ(0) translateX(100%); } .slidr.animating > *.horizontal.right { -webkit-transform: translateZ(0) translateX(-100%); transform: translateZ(0) translateX(-100%); } .slidr.animating > *.vertical-next.left, .slidr.animating > *.vertical-next.right { -webkit-transform: translateZ(0) translateY(0); transform: translateZ(0) translateY(0); } .slidr.animating > *.vertical.left { -webkit-transform: translateZ(0) translateY(100%); transform: translateZ(0) translateY(100%); } .slidr.animating > *.vertical.right { -webkit-transform: translateZ(0) translateY(-100%); transform: translateZ(0) translateY(-100%); } .slidr > * { display: inline-block; padding: 0; margin: 0; z-index: 1; opacity: 0; } .slidr > * img { display: block; width: 100%; } .init .slidr > * { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .slidr > *.active { z-index: 100; opacity: 1; } .slidr > *.fade { opacity: 0; z-index: 101; } .slidr > *.scale { opacity: 1; z-index: 101; border-radius: 100%; overflow: hidden; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); } .slidr > *.wipe { opacity: 1; z-index: 101; } .slidr > *.wipe.right { -webkit-transform: translateZ(0) translateX(100%); transform: translateZ(0) translateX(100%); } .slidr > *.wipe.left { -webkit-transform: translateZ(0) translateX(-100%); transform: translateZ(0) translateX(-100%); } .slidr > *.behind { opacity: 1; z-index: 99; } .slidr > *.wipe-out { opacity: 1; } .slidr > *.wipe-out.right { -webkit-transform: translateZ(0) translateX(0); transform: translateZ(0) translateX(0); } .slidr > *.wipe-out.left { -webkit-transform: translateZ(0) translateX(0); transform: translateZ(0) translateX(0); } .slidr > *.horizontal { opacity: 1; z-index: 101; -webkit-transform: translateZ(0) translateY(0); transform: translateZ(0) translateY(0); } .slidr > *.vertical-next { opacity: 1; z-index: 101; } .slidr > *.vertical-next.right { -webkit-transform: translateZ(0) translateY(100%); transform: translateZ(0) translateY(100%); } .slidr > *.vertical-next.left { -webkit-transform: translateZ(0) translateY(-100%); transform: translateZ(0) translateY(-100%); } .slidr > *.vertical { opacity: 1; z-index: 101; -webkit-transform: translateZ(0) translateY(0); transform: translateZ(0) translateY(0); } .slidr-pagination { position: relative; padding: 0; margin: 0 0 20px 0; list-style: none; font-size: 0; text-align: center; z-index: 102; } .slidr-pagination.over { position: absolute; bottom: 0; margin: 0; padding: 20px 0; left: 0; right: 0; } .slidr-pagination.over li { background: white; } .slidr-pagination.over li.active { background: black; } .slidr-pagination.hide:hover li { visibility: visible; opacity: 1; -webkit-transition: opacity 0.3s ease 0s; transition: opacity 0.3s ease 0s; } .slidr-pagination.hide li { visibility: hidden; opacity: 0; -webkit-transition: visibility 0s 0.3s, opacity 0.3s ease; transition: visibility 0s 0.3s, opacity 0.3s ease; } .slidr-pagination li { font-size: 14px; display: inline-block; width: 20px; height: 20px; margin: 0 4px; background: #ccc; border-radius: 100%; cursor: pointer; text-indent: -9999px; } .slidr-pagination li.active { background: black; } .slidr-navigation { padding: 0; margin: 0; list-style: none; } .slidr-navigation li { position: absolute; top: 0; bottom: 0; width: 50px; cursor: pointer; z-index: 102; text-indent: -9999px; } .slidr-navigation li:after { content: ''; position: absolute; top: 50%; display: block; width: 30px; height: 30px; border: 2px solid white; border-width: 3px 3px 0 0; color: white; } .slidr-navigation li.slidr-prev { left: 0; } .slidr-navigation li.slidr-prev:after { left: 30px; -webkit-transform: translateY(-50%) rotate(225deg); -ms-transform: translateY(-50%) rotate(225deg); transform: translateY(-50%) rotate(225deg); } .slidr-navigation li.slidr-next { right: 0; } .slidr-navigation li.slidr-next:after { right: 30px; -webkit-transform: translateY(-50%) rotate(45deg); -ms-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg); } .slidr-navigation li.hide:hover:after { visibility: visible; opacity: 1; -webkit-transition: opacity 0.3s ease 0s; transition: opacity 0.3s ease 0s; } .slidr-navigation li.hide:after { visibility: hidden; opacity: 0; -webkit-transition: visibility 0s 0.3s, opacity 0.3s ease; transition: visibility 0s 0.3s, opacity 0.3s ease; } .slidr + .slidr-pagination { margin: 20px 0 0 0; }
4. Plugin's default options.
// 'fade', 'wipe', 'wipe-out' // 'scale', 'horizontal', 'vertical' mode: "fade", // animation speed speed: 500, // aniamtion duration slideDuration: 0, // easing effect easing: 'ease', // initial slide start: 1, // pause on hover pauseOnHover: true, // pagination options pagination: { active: true, location: 'bottom', showOnHover: false }, // navigation options navigation: { active: true, showOnHover: false }, // enable touch events touchEnabled: true, // swipe threshold on touch devices swipeThreshold: 50, // enable responsive layout responsive: true
This awesome jQuery plugin is developed by dapacreative. For more Advanced Usages, please check the demo page or visit the official website.