Simple jQuery Responsive Image Slider Plugin - Prepost Slider

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.