Press "Enter" to skip to content

Responsive Rotating Image Slider with jQuery/CSS3

Wipe Slider is a jQuery-based carousel/slideshow/automatic background image slider that uses CSS background-size: cover and background-position: center to get smooth wipe transition effects.

jquery responsive image slider, javascript rotating image carousel, jquery image rotator, rotate slider codepen, rotating slideshow html, 3d image rotate jquery

How to make use of it:

1. Create an image library/slider from an unordered HTML list.

<ul class="cover-slider">
  <li class="cover-slider-slide"> ... </li>
  <li class="cover-slider-slide"> ... </li>
  <li class="cover-slider-slide"> ... </li>
  <li class="cover-slider-slide"> ... </li>
  <li class="cover-slider-slide"> ... </li>
</ul>

2. Basic CSS/CSS3 Styles for Image carousel/Slider.

.cover-slider-wrap {
  position: relative;
  max-width: 640px;
  height: 480px;
  margin: 2em auto;
  padding: 5em 1em;
  color: #fff;
  line-height: 2;
  font-weight: bold;
  box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.5);
}

.cover-slider-inner {
  position: relative;
  min-height: 40em;
  text-align: center;
  z-index: 10;
}

.cover-slider {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.cover-slider-slide {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 100%;
  padding: 0;
  margin: 0;
  background-size: cover;
  background-position: center;
  list-style: none;
  z-index: 0;
  opacity: .5;
}

3. Add background images to the slides.

.cover-slider-slide:nth-child(1) { background-image: url("1.jpg"); }

.cover-slider-slide:nth-child(2) { background-image: url("2.jpg"); }

.cover-slider-slide:nth-child(3) { background-image: url("3.jpg"); }

.cover-slider-slide:nth-child(4) { background-image: url("4.jpg"); }

4. Basic CSS/CSS3 wipe Transition Effects.

.cover-slider-slide.active {
  -webkit-animation-duration: 2500ms;
  animation-duration: 2500ms;
  -webkit-animation-name: slidein;
  animation-name: slidein;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.cover-slider-slide.inactive {
  -webkit-animation-duration: 2500ms;
  animation-duration: 2500ms;
  -webkit-animation-name: slideout;
  animation-name: slideout;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@-webkit-keyframes 
slidein {  from {
 left: 0;
 right: 100%;
}

to {
  left: 0;
  right: 0;
}
}

@keyframes 
slidein {  from {
 left: 0;
 right: 100%;
}

to {
  left: 0;
  right: 0;
}
}

@-webkit-keyframes 
slideout {  from {
 left: 0;
 right: 0;
}

to {
  left: 100%;
  right: 0;
}
}

@keyframes 
slideout {  from {
 left: 0;
 right: 0;
}

to {
  left: 100%;
  right: 0;
}
}

5. Load the latest version of the jQuery library.

<script src="//code.jquery.com/jquery-2.1.3.min.js"></script> 

6. The core of JavaScript to enable the carousel/image slider.

jQuery(function($){
  
  $('.cover-slider').each(function(){

        var $slides = $(this).find('.cover-slider-slide');

        var numSlides = $slides.length - 1;

        var i = 0;
       

        var rotate = function(){

            $slides.removeClass('active inactive');

            $slides.eq(i).addClass('inactive');

            if(i == numSlides){
                i = -1;
            }

            $slides.eq(++i).addClass('active');

            var timer = window.setTimeout(rotate, 5000);
        };

        rotate();
  });
});

jQuery Auto Rotating Image Slider, Wipe Slider Plugin/Github


See Demo And Download

Official Website(tcmulder): Click Here

This superior jQuery/javascript plugin is developed by tcmulder. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.