jQuery Plugin To Create A Responsive Diagonal Accordion Slider

Diagonal slider jQuery plugin works like an accordion that, when hovered, expands each image. You can also add a title to the image to give a brief description.

responsive horizontal accordion slider, grid slider jquery, jquery plugins free download, jquery accordion design, simple jquery accordion

How to make use of it:

1. Include the jQuery library and jQuery diagonal slider plugin on your web page.

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

2. HTML markup structure.

<div class="content_slider">
  <div class="content_title" data-default-text="Diagonal Slider">
    <div class="text">
      Diagonal Slider
    </div>
  </div>
  <div class="gallery_content">
    <div class="gallery_item">
      <img src="images/1.jpg" data-title="Image 1"/>
    </div>
    <div class="gallery_item">
      <img src="images/2.jpg" data-title="Image 2"/>
    </div>
    <div class="gallery_item">
      <img src="images/3.jpg" data-title="Image 3"/>
    </div>
    <div class="gallery_item">
      <img src="images/2.jpg" data-title="Image 4"/>
    </div>
    <div class="gallery_item">
      <img src="images/1.jpg" data-title="Image 5"/>
    </div>
  </div>    
</div>

3. CSS/CSS3 style rules required for the scrollbar.

img {
  display: block;
  margin: 0px;
}

.content_title {
  position: absolute;
  padding: 50px 40px 50px 80px;
  background-color: #FFF;
  z-index: 100;
  font-size: 22px;
  margin-left: -60px;
  -webkit-transform: translate3d(0, 0, 0) skew(-20deg, 0deg);
  -moz-transform: translate3d(0, 0, 0) skew(-20deg, 0deg);
  -ms-transform: translate3d(0, 0, 0) skew(-20deg, 0deg);
  transform: translate3d(0, 0, 0) skew(-20deg, 0deg);
}

.content_title .text {
  -webkit-transform: translate3d(0, 0, 0) skew(20deg, 0deg);
  -moz-transform: translate3d(0, 0, 0) skew(20deg, 0deg);
  -ms-transform: translate3d(0, 0, 0) skew(20deg, 0deg);
  transform: translate3d(0, 0, 0) skew(20deg, 0deg);
}

.content_slider {
  width: 100%;
  overflow: hidden;
}

.gallery_content {
  overflow: hidden;
  margin-left: -170px;
}

.gallery_item {
  float: left;
  overflow: hidden;
  vertical-align: top;
  margin-left: -2px;
  -webkit-transition: width 500ms;
  -moz-transition: width 500ms;
  -o-transition: width 500ms;
  transition: width 500ms;
  -webkit-transform: translate3d(0, 0, 0) skew(-20deg, 0deg);
  -moz-transform: translate3d(0, 0, 0) skew(-20deg, 0deg);
  -ms-transform: translate3d(0, 0, 0) skew(-20deg, 0deg);
  transform: translate3d(0, 0, 0) skew(-20deg, 0deg);
}

.gallery_item img {
  position: relative;
  -webkit-transform: translate3d(0, 0, 0) skew(20deg, 0deg);
  -moz-transform: translate3d(0, 0, 0) skew(20deg, 0deg);
  -ms-transform: translate3d(0, 0, 0) skew(20deg, 0deg);
  transform: translate3d(0, 0, 0) skew(20deg, 0deg);
}

4. Call the plugin in the document ready.

$(document).ready(function(){
  $('.gallery_content').createDiagonalSlider();
});

jquery skewed accordion slider, DiagonalSlider Plugin/Github

See Demo And Download

Official Website(Innvenio): Click Here

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