jQuery Plugin For Touch-enabled Carousel Slider - Paginator
File Size: | 8.18 KB |
---|---|
Views Total: | 1303 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Paginator is a jQuery plugin that offers an easy way to implement a touch-enabled, multipurpose carousel / images slider with multiple CSS or JavaScript based transitions on your webpage.
Basic usage:
1. Add jQuery Paginator plugin's JS and CSS files into your project which has jQuery installed.
<link rel="stylesheet" href="paginator.css"> <script src="jquery.min.js"></script> <script src="paginator.jquery.js"></script>
2. Add your content to the carousel slider as follow:
<section class="paginator" id="paginator-demo"> <!-- Carousel content --> <div class="pages"> <article class="page page-simple">1</article> <article class="page page-simple">2</article> <article class="page page-simple">3</article> <article class="page page-simple">4</article> <article class="page page-simple">5</article> </div> <!-- Carousel controls --> <div class="actions"> <button data-action="prev"> <span class="entypo-left-open"></span> </button> <button data-action="next"> <span class="entypo-right-open"></span> </button> </div> </section>
3. Add your own styles to the carousel content & controls.
.paginator { position: relative; } .page-simple { display: block; width: 100%; height: 200px; line-height: 200px; background: #06A; box-sizing: border-box; text-align: center; color: white; font-size: 2em; } .page-simple:nth-child(2n) { background: #0A6; } .actions { margin-top: 8px; display: inline-block; } .actions > * { display: inline-block; background: #A00; color: white; border: none; height: 50px; line-height: 50px; width: 50px; cursor: pointer; } .actions > *:focus { outline: none; } .actions > [data-action="prev"], .actions > [data-action="next"] { position: absolute; top: 50%; margin-top: -25px; background: none; font-size: 4em; color: rgba(0, 0, 0, 0.8); } .actions > [data-action="prev"] { left: -50px; } .actions > [data-action="next"] { right: -50px; }
4. Initialize the plugin.
$('#paginator-demo').paginator({ // options });
5. All default options.
$('#paginator-demo').paginator({ // initial slide initialPage: 0, // bind actions bindActions: true, // animation duration in ms animateDuration: 500, // enable drag event dragEnabled: true, // drag distance per slide dragDistancePerPage: 'auto', // transition type // slide, slideVertical, fade, stack or zoom pageTransform: null, // roll back to the first slide when you reach the last one rewind: false, // an array of arguments for transitions pageTransformArgs: [], // allow to change the slide via methods allowPageChange: true });
This awesome jQuery plugin is developed by opatut. For more Advanced Usages, please check the demo page or visit the official website.