Adding special effects to your site slider, makes it more professional and attract the visitors more. In this regard, the following code provides bar like slider with transition effects. The slides change automatically and you can use it in your site easily.
HTML
<!-- This script got from www.devanswer.com -->
<div class="container" id="container">
<ul>
<li class="active"><img src="http://devanswer.com/codes/files/photo_1.jpg" alt="" /></li>
<li><img src="http://devanswer.com/codes/files/photo_2.jpg" alt="" /></li>
<li><img src="http://devanswer.com/codes/files/photo_3.jpg" alt="" /></li>
<li><img src="http://devanswer.com/codes/files/photo_4.jpg" alt="" /></li>
</ul>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
CSS
body
{
background-color: #000;
padding: 2%;
color: #ccc;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 1em;
}
a
{
color: #0CC5DA;
text-decoration: none;
}
a:hover
{
color: #DCE808;
text-decoration: underline;
}
p
{
margin: 0 auto;
width: 960px;
margin-top: 1%;
text-align: center;
}
p.larger
{
font-size: 1.1em;
}
.container
{
margin: 0 auto;
position: relative;
overflow: hidden;
}
.container span
{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: absolute;
}
.container ul, .container li
{
padding: 0;
margin: 0;
list-style: none;
}
.container li
{
display: none;
}
.container li.active
{
display: inline;
}Javascript
$(document).ready(function(){
var width = 960;
height = 538;
var numberOfBlinds = 20;
var margin = 2;
var color = '#000';
gapHeight = 100;
var container = $('#container');
container.width(width).height(height);
var blindWidth = width / numberOfBlinds;
images = new Array();
$('ul li', container).each(function() {
images.push($(this));
});
images[0].addClass('active');
activeImage = 0;
for (var i = 0; i < numberOfBlinds; i++) {
var tempEl = $(document.createElement('span'));
var borders = calculateBorders();
tempEl.css({
'left': i * blindWidth,
border: margin + 'px solid ' + color,
borderTop: borders.borderWidthTop + 'px solid ' + color,
borderBottom: borders.borderWidthBottom + 'px solid ' + color,
'height': height,
'width': blindWidth
});
container.prepend(tempEl);
};
blinds = $('span', container);
setTimeout(animateBorders, 1000);
});
function calculateBorders() {
var random = Math.floor((Math.random()*9)+1);
var borderWidthTop = (random / 10) * gapHeight;
var borderWidthBottom = gapHeight - borderWidthTop;
return {borderWidthTop: borderWidthTop, borderWidthBottom: borderWidthBottom};
}
function animateBorders() {
var changeOccuredOnce = false;
blinds.animate({
borderTopWidth: height / 2,
borderBottomWidth: height / 2
}, 1000, function() {
if(!changeOccuredOnce) {
images[activeImage].removeClass('active');
activeImage = (activeImage + 1) % images.length;
images[activeImage].addClass('active');
setTimeout(animateBorders, 3000);
changeOccuredOnce = true;
}
var borders = calculateBorders();
$(this).delay(300).animate({
borderTopWidth: borders.borderWidthTop,
borderBottomWidth: borders.borderWidthBottom
}, 1000);
});
}
