Responsive Diagonal Slider Plugin With jQuery And CSS3 - Skewed Slider

A jQuery and CSS3 powered responsive, skewed accordion slider that enables the user to expand each image on mouse hover.

How to use it:

1. Load the necessary jQuery javascript library in the html page.

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

2. The main html structure for the accordion slider with 4 skewed slides:

<section id="slider">
  <div class="slider-content">
    <div class="image" data-href="#">
      <div class="slider-item">
        <div class="item-img-1" data-src="Action-1.jpg"></div>
        <div class="item-img-2" data-src="Prep-1.jpg"></div>
      </div>
      <span class="image-text">Description 1</span>
    </div>
    <div class="image" data-href="#">
      <div class="slider-item">
        <div class="item-img-1" data-src="Action-2.jpg"></div>
        <div class="item-img-2" data-src="Prep-2.jpg"></div>
      </div>
      <span class="image-text">Description 2</span>
    </div>
    <div class="image" data-href="#">
      <div class="slider-item">
        <div class="item-img-1" data-src="Action-3.jpg"></div>
        <div class="item-img-2" data-src="Prep-3.jpg"></div>
      </div>
      <span class="image-text">Description 3</span>
    </div>
    <div class="image image-last" data-href="#">
      <div class="slider-item">
        <div class="item-img-1" data-src="Action-4.jpg"></div>
        <div class="item-img-2" data-src="Prep-4.jpg"></div>
      </div>
      <span class="image-text">Description 4</span>
    </div>
  </div>
</section>

3. The primary CSS/CSS3 rules:

#slider {
  height: 650px;
  overflow: hidden;
}

.slider-content {
  height: 650px;
  width: 10000px;
  font-weight: 300;
}

.slider-item {
  position: relative;
  height: 650px;
  overflow: hidden;
  -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);
  transition: all 0.5s;
}

.slider-item:first-child { margin-left: -123px; }

.image {
  float: left;
  position: relative;
  transition: all 0.5s;
  cursor: pointer;
}

.item-img-1, .item-img-2 {
  height: 650px;
  width: 200%;
  top: 0px;
  position: absolute;
  left: -115px;
  background-size: 1200px 650px !important;
  -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);
  transition: all 0.5s;
}

.item-img-2 { opacity: 0; }

.item-text { position: absolute; }

.image-text {
  top: 35%;
  left: 42%;
  position: absolute;
  font-size: 35px;
  color: black;
  transition: all 0.5s;
}

.image:hover .image-text { font-size: 40px; }

@media (min-width:1400px) {

.image:nth-child(2) .item-img-1 { left: -400px; }

.image:last-child .item-img-1, .image:last-child .item-img-2 { left: -320px; }

.image:last-child .image-text { left: 0px; }

.image:last-child:hover .image-text { left: 20%; }
}

@media (max-width:1400px) {

.image:first-child .image-text { left: 5%; }

.image-text { left: 0px; }

.image:last-child .image-text { left: -70px; }

.image:hover .image-text { left: 20%; }

.image:nth-child(1) .item-img-2 { background-position-x: -300px!important; }

.image:nth-child(2) .item-img-1, .image:nth-child(2) .item-img-2 { background-position-x: -600px!important; }

.image:nth-child(2) .item-img-2 { background-position-x: -400px!important; }

.image:nth-child(3) .item-img-2 { background-position-x: -400px!important; }

.image:nth-child(4) .item-img-1 { background-position-x: -200px!important; }

.image:nth-child(4) .item-img-2 { background-position-x: -400px!important; }
}

@media (max-width:700px) {

.item-img-1, .item-img-2 { height: 450px; }

.image-text { font-size: 25px; }

.image:not(:last-child) .image-text { left: -50px; }

.image:hover .image-text { left: 5%; }

.image:nth-child(2) .item-img-2 { background-position-x: -650px!important; }

.image:nth-child(3) .item-img-2 { background-position-x: -550px!important; }

.image:nth-child(4) .item-img-1 { background-position-x: -250px!important; }

.image:nth-child(4) .item-img-2 { background-position-x: -550px!important; }
}

4. The core JavaScript to active the accordion slider.

$(document).ready(function(){
  $(".image").width($("#slider").width()/3.3);

  $(window).resize(function(){
    $(".image").width($("#slider").width()/3.3);
  })

  $(".item-img-1, .item-img-2").each(function(){
    var src = $(this).attr("data-src")
    $(this).css({
      background:`url(images/${src}) no-repeat`,
    })
  })

  $(".image").mouseover(function(){
    $(this).find(".item-img-1").css({
      opacity:0
    })

    $(this).find(".item-img-2").css({
      opacity:1
    })

    $(".image").width($("#slider").width()/4)
    $(".image").css({"z-index":"-999px"});

    $(this).css({"z-index":"999px"})
    $(this).width($("#slider").width()/2)
  })

  $(".image").mouseout(function(){
    $(this).find(".item-img-2").css({
      opacity:0
    })

    $(this).find(".item-img-1").css({
      opacity:1
    })

    $(".image").width($("#slider").width()/3.3)
    $(this).css({"z-index":0})
  })

  $(".image:last-child").mouseover(function(event){
    $(this).find(".item-img-1").css({
      opacity:0
    })
 
    $(this).find(".item-img-2").css({
      opacity:1
    })

    $(".image").width($("#slider").width()/5)
    $(".image").css({"z-index":"-999px"});

    $(this).css({"z-index":"999px"})
    $(this).width($("#slider").width()/1.5)
  })

  $(".image").click(function(){
    window.open($(".image").attr("data-href") || "/");
  })
})

How to use it:

2016-08-12

• update

---

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