jQuery plugin to create a Responsive Diagonal Slider
JavaScript CSS HTML
Latest commit 332c5fe May 9, 2015 @aesposito aesposito Bug firefox
Permalink
Failed to load latest commit information.
css Init Jan 30, 2015
images Fix first load Feb 6, 2015
js Bug firefox May 9, 2015
README.md Texts May 4, 2015
index.html Texts May 4, 2015

README.md

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: