How To Create jquery Image Slider

We are going to create an animated jquery image slider by using SVG paths (for transition effects) to directly clip the slide images.

The HTML Structure

The HTML structure is comprised of an unordered list (ul.cd-slider), containing the slides, and two additional list elements ( ul.cd-slider-navigation and ol.cd-slider-controls) for the slider navigations.

All the list items inside the ul.cd-slider are createdch by an svg containing a <clipPath>element (used to transform slide image’s clipping area) and an <image> element (whose clip-path url attribute is the <clipPath> id).

<div class="cd-slider-wrapper">
<ul class="cd-slider"data-step1="M1402,800h-2V0.6c0-0.3,0-0.3,0-0.6h2v294V800z"
data-step2="M1400,800H383L770.7,0.6c0.2-0.3,0.5-0.6,0.9-0.6H1400v294V800z"
data-step3="M1400,800H0V0.6C0,0.4,0,0.3,0,0h1400v294V800z"
data-step4="M-2,800h2L0,0.6C0,0.3,0,0.3,0,0l-2,0v294V800z"
data-step5="M0,800h1017L629.3,0.6c-0.2-0.3-0.5-0.6-0.9-0.6L0,0l0,294L0,800z"
data-step6="M0,800h1400V0.6c0-0.2,0-0.3,0-0.6L0,0l0,294L0,800z">

<li class="visible">
<div class="cd-svg-wrapper">
<svg viewBox="0 0 1400 800">
                    <title>Aimated SVG</title>
<defs>
<clipPath id="cd-image-1">
<path id="cd-changing-path-1"d="M1400,800H0V0.6C0,0.4,0,0.3,0,0h1400v294V800z"/>
</clipPath>
</defs>
 
<image height='800px'width="1400px"clip-path="url(#cd-image-1)"xlink:href="img/img-1.jpg"></image>
</svg>
</div><!-- .cd-svg-wrapper -->
</li>
 
<li>
<div class="cd-svg-wrapper">
<svg viewBox="0 0 1400 800">
<!-- svg content here -->
</svg>
</div><!-- .cd-svg-wrapper -->
</li>
 
<!-- other list items here -->
 
</ul><!-- .cd-slider -->
 
<ul class="cd-slider-navigation">
<li><a href="#0"class="next-slide">Next</a></li>
<li><a href="#0"class="prev-slide">Prev</a></li>
</ul><!-- .cd-slider-navigation -->
 
<ol class="cd-slider-controls">
<li class="selected"><a href="#0"><em>Item 1</em></a></li>
<li><a href="#0"><em>Item 2</em></a></li>
<!-- other list items here -->
</ol><!-- .cd-slider-controls -->
</div><!-- .cd-slider-wrapper -->

The CSS Styling

We have pretty basic slider structure here: all slides  are in absolute position (placed on top of each other) with opacity set to ‘0’ .visible  class is added to the selected slides to make them visible, whereas the .is-animating class is added to the list item during the clipping animation (z-index: 3 so that it comes over the li.visible item).

Note: we had to use the ‘Padding Hack’ from this website to make the svg responsive (IE consider svg’s height as 150px if you haven’t defined it). Essentialy, we set the div.cd-svg-wrapper height to 0 and its padding-bottom to 57.15% (to maintain svg proportion, in this case 800/1400), and set the svg height and width to 100%.

.cd-slider > li {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  opacity:0;
}
.cd-slider > li.visible {
  position:relative;
  z-index:2;
  opacity:1;
}
.cd-slider > li.is-animating {
  z-index:3;
  opacity:1;
}
.cd-slider .cd-svg-wrapper {
  /* using padding Hack to fix bug on IE - svg height not properly calculated */
  height:0;
  padding-bottom:57.15%;
}
.cd-slider svg {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

The Event Handlers

Now, for animating the slide image clipping area, we animated the 'd' attribute of the <path>element under the <clipPath>.

Firstly, we have to define all the steps of the animation: we have used the similar process like in this article; but here, we have only used 6 steps (3 steps to animate from a slide to the next one and 3 more steps to animate from a slide to the previous one).

clipPath.attr('d',path1).animate({'d':path2},duration,firstCustomMinaAnimation,function(){
clipPath.animate({'d':path3},duration,secondCustomMinaAnimation,function(){
oldSlide.removeClass('visible');
newSlide.addClass('visible').removeClass('is-animating');
});
});

However, we designed a basic slider for the image gallery which have navigation support for touch swipe, keyboard, next/previous and dots.

Please follow and like us:



Leave a Comment

Your email address will not be published. Required fields are marked *