Get new jQuery plugins just once a week

×

Diagonal-Slider

April 29, 2015

A jQuery plugin to create a Responsive Diagonal Slider

A jQuery plugin to create a Responsive Image Diagonal Slider which works by expanding the image that you have hovered upon.

Created by Innvenio

Download

Example

Diagonal Slider jQuery plugin

triangular slider

DiagonalSlider

jQuery plugin to create a Diagonal Slider.
The diagonal image slider works like an accordion that when you mouse hover it expand each image. Also you can add a title to the image to give a brief description.


Demo

Demo in jsFiddle


How to use

Your HTML:

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="js/DiagonalSlider.js"></script>
</head>
<body>
    <div class="content_slider">
        <div class="content_title" data-default-text="<b>Diagonal Slider</b><br/>by @innvenio">
            <div class="text">
                <b>Diagonal Slider</b><br/>by @innvenio
            </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>
    <script type="text/javascript" src="js/script.js"></script>
</body>
</html>



Your script:

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



Your css:

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);
}



Result:


Diagonal-Slider

Related posts:

ayaSlider
Smooth-Slides
hero-slider

To install using Bower
bower install Diagonal-Slider

Diagonal Slider jQuery plugin

http://jquer.in/wp-content/uploads/2015/04/Diagonal-Slider.jpg

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever