pj.media,
вариант ... первый слайдер управляет вторым
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<link rel="stylesheet" type="text/css" href="http://bxslider.com/css/styles.css">
<link rel="stylesheet" type="text/css" href="http://bxslider.com/lib/jquery.bxslider.css">
<style type="text/css">
.bxslider {
width: 100%;
}
#reklama_right {
width:240px; height:1200px;
padding: 5px;
}
</style>
<script>
$(function () {
var slider = $('#slider_2').bxSlider({
speed: 500,
wrapperClass: "bx-wrapper",
autoHover: true,
pause: 3000
});
$('#slider_1').bxSlider({
onSlideNext: function($slideElement, oldIndex, newIndex){ slider.goToNextSlide(); },
auto: true,
speed: 500,
wrapperClass: "bx-wrapper",
autoHover: true,
pause: 3000
});
})
</script>
</head>
<body>
<div id="reklama_right" >
<div id="slider_1" class="bxslider">
<div><a href="http://" target="_blank"><img src="http://bxslider.com/images/730_200/tree_root.jpg" alt="kbn" width="240" height="240"/></a></div>
<div><a href="http://" target="_blank"><img src="http://bxslider.com/images/730_200/houses.jpg" alt="kbn" width="240" height="240"/></a></div>
<div><a href="http://" target="_blank"><img src="http://bxslider.com/images/730_200/hill_fence.jpg" alt="kbn" width="240" height="240"/></a></div>
</div>
<div id="slider_2" class="bxslider">
<div><a href="http://" target="_blank"><img src="http://bxslider.com/images/730_200/tree_root.jpg" alt="kbn" width="240" height="240"/></a></div>
<div><a href="http://" target="_blank"><img src="http://bxslider.com/images/730_200/houses.jpg" alt="kbn" width="240" height="240"/></a></div>
<div><a href="http://" target="_blank"><img src="http://bxslider.com/images/730_200/hill_fence.jpg" alt="kbn" width="240" height="240"/></a></div>
</div>
</div>
</body>
</html>
|