REZA SALEHI REZA SALEHI - 3 months ago 7
Javascript Question

Create a simple jQuery content slider

Im trying to create a simple content slider with jQuery and css.

The slider has two columns :


  • the right one acts as a slider pager

  • the left one contains current content



I've managed to create html, css and jQuery function which changes active tab and related content. but I want function to repeat itslef and by hovering to pagers slider stop paging, then by mouseout slider continue.

HTML

<div id="slider">
<div id="rightcol">
<div class="content" id="content1">
</div>
<div class="content" id="content2">
</div>
<div class="content" id="content3">
</div>
</div>
<div id="leftcol">
<ul>
<li id="1" class="active">a</li>
<li id="2">b</li>
<li id="3">c</li>
</ul>
</div>
</div>


CSS

#slider
{
width: 600px;
height: 300px;
}

#leftcol
{
width: 300px;
height: 300px;
float: left;
}
#rightcol
{
width: 300px;
height: 300px;
float: right;
background-color: #F0F0F0;
}

#leftcol ul li
{
width: 300px;
height: 100px;
}
#leftcol ul li.active
{
background-color: #F0F0F0;
}
.content
{
width: 300px;
height: 300px;
display: none;
}


jQuery

$(document).ready(function () {
sd(3);

});


function sd(currentId) {

var currentcontent = "content";
s = "#" + String(currentcontent) + String(currentId);
$("#leftcol ul li").removeClass("active");
$(".content").hide();
$("#" + String(currentId)).addClass("active");
$(s).show();
}


What should be added to js?

jsfiddle demo

Answer

To make it to reapeat you can use the setTimeout() and to make it stop whenever your mouse goes over the content you can use the hover() jquery event! Here's a Demo

Comments