jQuery Skewed Accordion Slider Plugin - Diagonal Slider

Diagonal Slider is a small jQuery plugin to create a full window diagonal image slider that auto expands/collapses on mouse hover like an accordion control.

How to use it:

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

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

2. Markup Html 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. The required CSS/CSS3 style rules for the slider.

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 on document ready.

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

Change log:

2015-05-09

• fixed for firefox.

---

This awesome jQuery plugin is developed by Innvenio. For more Advanced Usages, please check the demo page or visit the official website.