Simple jQuery Responsive Image Slider Plugin - Prepost Slider
File Size: | 5.45 KB |
---|---|
Views Total: | 933 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

prepostslider is a simple responsive jQuery image slider that has the ability to highlight the current slide while sliding through a set of images.
Features:
- Fully responsive that adapts to any devices.
- Smooth sliding effect based on CSS3.
- Swipe and keyboard navigation support.
- Focus your users on the current image with previews of next/previous images.
- Auto resize the images to fit your screen.
How to use it:
1. Add the following CSS snippets in your existing CSS file or include the prepostslider.css directly in your document.
.prepostslider { height: 100%; position: relative; overflow-y: hidden; overflow-x: scroll; background: #1a4559; } @media (max-height: 450px) { .prepostslider { height: 80%; } } .prepostslider > ul { position: relative; height: 100%; margin: 0; padding-left: 0; white-space: nowrap; -webkit-transition: -webkit-transform 1000ms; transition: transform 1000ms; font-size: 0; z-index: 10; } .prepostslider > ul > li { vertical-align: middle; position: relative; display: inline-block; height: 100%; list-style: none; max-width: 90%; -webkit-background-size: cover; background-size: cover; background-position: center; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: opacity 2000ms; transition: opacity 2000ms; -webkit-tap-highlight-color: transparent; } @media (max-height: 450px) { .prepostslider > ul > li { max-width: 80%; } } .prepostslider > ul > li.inactive-slide { opacity: .5; -webkit-transition: opacity 1000ms; transition: opacity 1000ms; } .prepostslider img { height: 100%; } .prepost-pre, .prepost-post { position: absolute; top: 50%; color: #fff; font-size: 1em; margin-top: -.5em; background-color: rgba(0, 0, 0, 0.5); padding: 1em; text-decoration: none; z-index: 20; -webkit-tap-highlight-color: transparent; } @media screen and (max-width: 500px) { .prepost-pre, .prepost-post { font-size: .8em; padding: 1em .2em; } } .prepost-pre { left: 0; border-radius: 0 2em 2em 0; } .prepost-post { right: 0; border-radius: 2em 0 0 2em; }
2. Add a set of images into a container with CSS class of 'prepostslider'.
<div class="prepostslider"> <ul> <li><img src="1.jpg"></li> <li><img src="2.jpg"></li> <li><img src="3.jpg"></li> ... </ul> </div>
3. Include the latest version of jQuery library and the jQuery prepostslider plugin at the bottom of the document.
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="prepostslider.js"></script>
4. A simple option to center the first and last slide.
centerEnds: true
This awesome jQuery plugin is developed by tcmulder. For more Advanced Usages, please check the demo page or visit the official website.