How to move multi slider in same page
<head>
<link rel="stylesheet" type="text/css" href="css/resets.css" />
<script type="text/javascript" src="scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="scripts/jcarousellite_1.0.1.min.js"></script>
<script type="text/javascript" src="scripts/jquery.easing.1.3.js"></script>
<script type="text/javascript" charset="utf-8">
jQuery(function(){
jQuery("#slider_one").jCarouselLite({
btnNext: ".next1",
btnPrev: ".prev1",
//easing: "easeOutElastic",
//auto: 2500,
auto: 1200,
speed: 500,
visible: 5
});
jQuery("#slider_two").jCarouselLite({
btnNext: ".next2",
btnPrev: ".prev2",
//easing: "easeOutElastic",
//auto: 2200,
auto: 1200,
speed: 400,
visible: 5
});
jQuery("#slider_three").jCarouselLite({
btnNext: ".next3",
btnPrev: ".prev3",
//easing: "easeOutElastic",
//auto: 2600,
auto: 1200,
speed: 600,
visible: 5
});
});
</script>
<head>
<link rel="stylesheet" type="text/css" href="css/resets.css" />
<script type="text/javascript" src="scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="scripts/jcarousellite_1.0.1.min.js"></script>
<script type="text/javascript" src="scripts/jquery.easing.1.3.js"></script>
<script type="text/javascript" charset="utf-8">
jQuery(function(){
jQuery("#slider_one").jCarouselLite({
btnNext: ".next1",
btnPrev: ".prev1",
//easing: "easeOutElastic",
//auto: 2500,
auto: 1200,
speed: 500,
visible: 5
});
jQuery("#slider_two").jCarouselLite({
btnNext: ".next2",
btnPrev: ".prev2",
//easing: "easeOutElastic",
//auto: 2200,
auto: 1200,
speed: 400,
visible: 5
});
jQuery("#slider_three").jCarouselLite({
btnNext: ".next3",
btnPrev: ".prev3",
//easing: "easeOutElastic",
//auto: 2600,
auto: 1200,
speed: 600,
visible: 5
});
});
</script>
</head>
<body>
<div id="wrapper">
<div class="todays_Ad">
<div class="tag_text">
<h3>Todays Ad</h3>
<span class="bt"></span>
</div>
<div id="slider_one">
<ul>
<li class="work">
<a href="#">
<img src="images/mobile.jpg" width="138" height="138" />
<div class="mid_data">
<p>Sony Experia</p>
<p><span class="icon-rupee"></span>1200.00</p>
</div>
</a>
</li>
<li class="work">
<a href="#">
<img src="images/mobile.jpg" width="138" height="138" />
<div class="mid_data">
<p>Sony Experia</p>
<p><span class="icon-rupee"></span>1200.00</p>
</div>
</a>
</li>
<li class="work">
<a href="#">
<img src="images/mobile.jpg" width="138" height="138" />
<div class="mid_data">
<p>Sony Experia</p>
<p><span class="icon-rupee"></span>1200.00</p>
</div>
</a>
</li>
<li class="work">
<a href="#">
<img src="images/mobile.jpg" width="138" height="138" />
<div class="mid_data">
<p>Sony Experia</p>
<p><span class="icon-rupee"></span>1200.00</p>
</div>
</a>
</li>
<li class="work">
<a href="#">
<img src="images/mobile.jpg" width="138" height="138" />
<div class="mid_data">
<p>Sony Experia</p>
<p><span class="icon-rupee"></span>1200.00</p>
</div>
</a>
</li>
<li class="work">
<a href="#">
<img src="images/mobile.jpg" width="138" height="138" />
<div class="mid_data">
<p>Sony Experia</p>
<p><span class="icon-rupee"></span>1200.00</p>
</div>
</a>
</li>
</ul>
</div>
<!--slider_one end-->
<div id="slider_two">
<ul>
<li class="work">
<a href="#">
<img src="images/mobile.jpg" width="138" height="138" />
<div class="mid_data">
<p>Sony Experia</p>
<p><span class="icon-rupee"></span>1200.00</p>
</div>
</a>
</li>
<li class="work">
<a href="#">
<img src="images/mobile.jpg" width="138" height="138" />
<div class="mid_data">
<p>Sony Experia</p>
<p><span class="icon-rupee"></span>1200.00</p>
</div>
</a>
</li>
<li class="work">
<a href="#">
<img src="images/mobile.jpg" width="138" height="138" />
<div class="mid_data">
<p>Sony Experia</p>
<p><span class="icon-rupee"></span>1200.00</p>
</div>
</a>
</li>
<li class="work">
<a href="#">
<img src="images/mobile.jpg" width="138" height="138" />
<div class="mid_data">
<p>Sony Experia</p>
<p><span class="icon-rupee"></span>1200.00</p>
</div>
</a>
</li>
<li class="work">
<a href="#">
<img src="images/mobile.jpg" width="138" height="138" />
<div class="mid_data">
<p>Sony Experia</p>
<p><span class="icon-rupee"></span>1200.00</p>
</div>
</a>
</li>
<li class="work">
<a href="#">
<img src="images/mobile.jpg" width="138" height="138" />
<div class="mid_data">
<p>Sony Experia</p>
<p><span class="icon-rupee"></span>1200.00</p>
</div>
</a>
</li>
</ul>
</div>
<!--slider_two end-->
<div id="slider_three">
<ul>
<li class="work">
<a href="#">
<img src="images/mobile.jpg" width="138" height="138" />
<div class="mid_data">
<p>Sony Experia</p>
<p><span class="icon-rupee"></span>1200.00</p>
</div>
</a>
</li>
<li class="work">
<a href="#">
<img src="images/mobile.jpg" width="138" height="138" />
<div class="mid_data">
<p>Sony Experia</p>
<p><span class="icon-rupee"></span>1200.00</p>
</div>
</a>
</li>
<li class="work">
<a href="#">
<img src="images/mobile.jpg" width="138" height="138" />
<div class="mid_data">
<p>Sony Experia</p>
<p><span class="icon-rupee"></span>1200.00</p>
</div>
</a>
</li>
<li class="work">
<a href="#">
<img src="images/mobile.jpg" width="138" height="138" />
<div class="mid_data">
<p>Sony Experia</p>
<p><span class="icon-rupee"></span>1200.00</p>
</div>
</a>
</li>
<li class="work">
<a href="#">
<img src="images/mobile.jpg" width="138" height="138" />
<div class="mid_data">
<p>Sony Experia</p>
<p><span class="icon-rupee"></span>1200.00</p>
</div>
</a>
</li>
<li class="work">
<a href="#">
<img src="images/mobile.jpg" width="138" height="138" />
<div class="mid_data">
<p>Sony Experia</p>
<p><span class="icon-rupee"></span>1200.00</p>
</div>
</a>
</li>
</ul>
</div>
<!--slider_three end-->
</div>
<!--todays_Ad end-->
</div>
<!--wrapper end-->
</body>
OUTPUT
No comments:
Post a Comment