Rotating Slider With jQuery CSS3 Plugin

Jumat, 08 November 2013

Rotating Slider With jQuery CSS3 Plugin

In the following tutorial we will create an asymmetrical image slider with a little twist: when sliding the pictures we will slightly rotate them and delay the sliding of each element. The unusual shape of the slider is created by some elements placement and the use of thick borders. We will also add an autoplay option and the mousewheel functionality.

We’ll use the jQuery 2D Transformation Plugin for rotating the images and the jQuery Mousewheel Plugin by Brandon Aaron for the mousewheel control.

The beautiful photos are by Andrew and Lili and you can see their Behance profile here:
http://www.behance.net/AndrewLili
The images are licensed under the Creative Commons Attribution-NonCommercial 3.0 Unported License.

Allrighty! Let’s start with the HTML!

CSS::

.rm_wrapper{
    width:1160px;
    margin:0 auto;
    position:relative;
}
.rm_container{
    width:1050px;
    overflow:hidden;
    position:relative;
    height:530px;
    margin:0 auto;
}
.rm_container h2{
    background:transparent url(http://tympanus.net/Tutorials/RotatingImageSlider/images/lines.png) repeat top left;
    padding:10px 30px;
    position:absolute;
    bottom:170px;
    right:0px;
    color:#000;
    font-size:36px;
    text-transform:uppercase;
    text-shadow:1px 0px 1px #fff;
}
.rm_container ul{
    width:1170px;
}
.rm_container ul li{
    float:left;
    margin-left:-80px;
    position:relative;
    overflow:hidden;
    width:310px;
    height:465px;
    border:30px solid #fff;box-shadow:0 0 2px #ddd;-moz-box-shadow:0 0 2px #ddd;-webkit-box-shadow:0 0 2px #ddd;
    border-width:50px 30px 0px 30px;
    background-color:#fff;
}
.rm_container ul li img{
    position:absolute;
    top:0px;
    left:0px;
}
.rm_mask_right, .rm_mask_left{
    position: absolute;
    height: 110px;
    background:#fff;
    width: 530px;
    bottom: -30px;
    left: 0px;
    -moz-transform:rotate(-3deg);
    -webkit-transform:rotate(-3deg);
    transform:rotate(-3deg);
}
.rm_mask_right{
    left:auto;
    right:0px;
    -moz-transform:rotate(3deg);
    -webkit-transform:rotate(3deg);
    transform:rotate(3deg);
}
.rm_corner_right, .rm_corner_left{
    background:#fff;
    position:absolute;
    width:200px;
    height:100px;
    bottom:0px;
    left:-65px;
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
}
.rm_corner_right{
    left:auto;
    right:-65px;
    -moz-transform:rotate(-45deg);
    -webkit-transform:rotate(-45deg);
    transform:rotate(-45deg);
}
.rm_nav a{
    position:absolute;
    top:200px;
    width:38px;
    height:87px;
    cursor:pointer;
    opacity:0.7;
}
.rm_nav a:hover{
    opacity:1.0;
}
.rm_nav a.rm_next{
    background:transparent url(http://tympanus.net/Tutorials/RotatingImageSlider/images/next.png) no-repeat top left;
    right:0px;
}
.rm_nav a.rm_prev{
    background:transparent url(http://tympanus.net/Tutorials/RotatingImageSlider/images/prev.png) no-repeat top left;
    left:0px;
}
.rm_controls{
    position:absolute;
    top:0px;
    left:-40px;
    height:20px;
}
.rm_controls a{
    cursor:pointer;
    opacity:0.7;
    padding-left:24px;
    font-size:16px;
    text-transform:uppercase;
    height:20px;
    float:left;
    line-height:20px;
}
.rm_controls a:hover{
    opacity:1.0;
}
.rm_controls a.rm_play{

    background:transparent url(http://tympanus.net/Tutorials/RotatingImageSlider/images/play.png) no-repeat center left;
}
.rm_controls a.rm_pause{
    display:none;
    background:transparent url(http://tympanus.net/Tutorials/RotatingImageSlider/images/pause.png) no-repeat center left;
}

SCRIPT::

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

<script type="text/javascript" src="http://tympanus.net/Tutorials/RotatingImageSlider/js/jquery.RotateImageMenu.js"></script>
<script type="text/javascript" src="http://tympanus.net/Tutorials/RotatingImageSlider/js/jquery.transform-0.9.3.min_.js"></script>
<script type="text/javascript" src="http://tympanus.net/Tutorials/RotatingImageSlider/js/jquery.mousewheel.js"></script>

HTML::

<div class="content">
<div class="rm_wrapper">
<div id="rm_container" class="rm_container">
<ul>
<li data-images="rm_container_1" data-rotation="-15"><img src="http://tympanus.net/Tutorials/RotatingImageSlider/images/1.jpg"/></li>
<li data-images="rm_container_2" data-rotation="-5"><img src="http://tympanus.net/Tutorials/RotatingImageSlider/images/2.jpg"/></li>
<li data-images="rm_container_3" data-rotation="5"><img src="http://tympanus.net/Tutorials/RotatingImageSlider/images/3.jpg"/></li>
<li data-images="rm_container_4" data-rotation="15"><img src="http://tympanus.net/Tutorials/RotatingImageSlider/images/4.jpg"/></li>
</ul>
<div id="rm_mask_left" class="rm_mask_left"></div>
<div id="rm_mask_right" class="rm_mask_right"></div>
<div id="rm_corner_left" class="rm_corner_left"></div>
<div id="rm_corner_right" class="rm_corner_right"></div>
<h2>Fashion Explosion 2013</h2>
<div style="display:none;">
<div id="rm_container_1">
<img src="http://tympanus.net/Tutorials/RotatingImageSlider/images/1.jpg"/>
<img src="http://tympanus.net/Tutorials/RotatingImageSlider/images/5.jpg"/>
<img src="http://tympanus.net/Tutorials/RotatingImageSlider/images/6.jpg"/>
<img src="http://tympanus.net/Tutorials/RotatingImageSlider/images/7.jpg"/>
</div>
<div id="rm_container_2">
<img src="http://tympanus.net/Tutorials/RotatingImageSlider/images/2.jpg"/>
<img src="http://tympanus.net/Tutorials/RotatingImageSlider/images/8.jpg"/>
<img src="http://tympanus.net/Tutorials/RotatingImageSlider/images/9.jpg"/>
<img src="http://tympanus.net/Tutorials/RotatingImageSlider/images/10.jpg"/>
</div>
<div id="rm_container_3">
<img src="http://tympanus.net/Tutorials/RotatingImageSlider/images/3.jpg"/>
<img src="http://tympanus.net/Tutorials/RotatingImageSlider/images/11.jpg"/>
<img src="http://tympanus.net/Tutorials/RotatingImageSlider/images/12.jpg"/>
<img src="http://tympanus.net/Tutorials/RotatingImageSlider/images/13.jpg"/>
</div>
<div id="rm_container_4">
<img src="http://tympanus.net/Tutorials/RotatingImageSlider/images/4.jpg"/>
<img src="http://tympanus.net/Tutorials/RotatingImageSlider/images/14.jpg"/>
<img src="http://tympanus.net/Tutorials/RotatingImageSlider/images/15.jpg"/>
<img src="http://tympanus.net/Tutorials/RotatingImageSlider/images/16.jpg"/>
</div>
</div>
</div>
<div class="rm_nav">
<a id="rm_next" href="#" class="rm_next"></a>
<a id="rm_prev" href="#" class="rm_prev"></a>
</div>
<div class="rm_controls">
<a id="rm_play" href="#" class="rm_play">Play</a>
<a id="rm_pause" href="#" class="rm_pause">Pause</a>
</div>
</div>
</div>