Слайдер на bxSlider
Доброго времени суток!
Имеется слайдер на основе bxSlider вот такого типа: http://bxslider.com/examples/thumbnail-pager-1 Подскажите, пожалуйста, как реализовать переход по слайдам с помощью превьюшек без участия data-slide-index? Всем спасибо. Подскажите, пожалуйста, как можно передать ссылку через HTML, а не location.href =? |
malsyst,
а чуть ниже кнопку нажать на метод 2 http://bxslider.com/examples/thumbnail-pager-2 или он тоже неподходит тогда ваш код покажите? |
Дело в том, что имеется ряд:
<div id="bx-pager"> <a href=""><img src="/images/thumbs/tree_root.jpg" /></a> <a href=""><img src="/images/thumbs/houses.jpg" /></a> <a href=""><img src="/images/thumbs/hill_fence.jpg" /></a> </div>. Ссылки генерируются автоматически и прописать data-slide-index не получается( |
malsyst,
:write:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<style type="text/css">
.bx-wrapper .bx-pager {
bottom: -95px;
}
.bx-wrapper .bx-pager a {
border: solid #ccc 1px;
display: block;
margin: 0 5px;
padding: 3px;
}
.bx-wrapper .bx-pager a:hover,
.bx-wrapper .bx-pager a.active {
border: solid #5280DD 1px;
}
.bx-wrapper {
margin-bottom: 120px;
}
</style>
<script>
$(function () {
$('#bx-pager a')
.each(function (i, el) {
$(el)
.attr({
'data-slide-index': i
})
.mouseenter(function () {
slider.goToSlide(i);
})
}).click(function () {
location.href = "http://javascript.ru/forum/"
});
var slider = $('.bxslider')
.bxSlider({
pagerCustom: '#bx-pager'
});
}) </script>
</head>
<body>
<ul class="bxslider">
<li><img src="http://bxslider.com/images/730_200/tree_root.jpg" /></li>
<li><img src="http://bxslider.com/images/730_200/houses.jpg" /></li>
<li><img src="http://bxslider.com/images/730_200/hill_fence.jpg" /></li>
</ul>
<div id="bx-pager">
<a href=""><img src="http://bxslider.com/images/thumbs/tree_root.jpg" /></a>
<a href=""><img src="http://bxslider.com/images/thumbs/houses.jpg" /></a>
<a href=""><img src="http://bxslider.com/images/thumbs/hill_fence.jpg" /></a>
</div>
</body>
</html>
|
рони, спасибо. :)
|
рони, подскажите, пожалуйста, как можно передать ссылку через HTML, а не location.href =?
|
malsyst,
:-?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<link href="http://bxslider.com/lib/jquery.bxslider.css" rel="stylesheet" />
<script>
$(function () {
$('#bx-pager a')
.each(function (i, el) {
$(el).mouseenter(function () {
slider.goToSlide(i);
})
})
var slider = $('.bxslider')
.bxSlider({pager : false,controls : false});
})
</script>
</head>
<body>
<ul class="bxslider">
<li><img src="http://bxslider.com/images/730_200/tree_root.jpg" /></li>
<li><img src="http://bxslider.com/images/730_200/houses.jpg" /></li>
<li><img src="http://bxslider.com/images/730_200/hill_fence.jpg" /></li>
</ul>
<div id="bx-pager">
<a href="http://javascript.ru/forum/" target="_blank"><img src="http://bxslider.com/images/thumbs/tree_root.jpg" /></a>
<a href="http://javascript.ru/forum/" target="_blank"><img src="http://bxslider.com/images/thumbs/houses.jpg" /></a>
<a href="http://javascript.ru/forum/" target="_blank"><img src="http://bxslider.com/images/thumbs/hill_fence.jpg" /></a>
</div>
</body>
</html>
|
Привет Рони - все бы понятно, но есть вопросы. Я использую этот метод - Thumbnail pager - method 1, также использую автостарт, но я заметим - что при клике по миниатюре - слайдер чере 4-5 сек остается на месте .. то есть не стартует автоматически .. а если не трогать - то он стартует и меняет слайды нормально.
что может быть не так? вот те опции которые я использую
<script>
$(document).ready(function(){
$('.bxslider').bxSlider(
{
auto: true,
autoStart:true,
infiniteLoop: true,
autoHover: true,
autoControls: false,
controls: false,
responsive: false,
speed: 800,
slideWidth:564,
slideHeight:312,
pagerCustom: '#bx-pager'
}
);
});
</script>
|
|
bxslider запуск после клика по миниатюре
zerofx,
:write: строки 12-14
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<link href="http://bxslider.com/lib/jquery.bxslider.css" rel="stylesheet" />
<script>
$(function() {
$('#bx-pager a').mouseleave(function() {
slider.startAuto();
})
var slider = $('.bxslider')
.bxSlider({
auto: true,
autoStart: true,
infiniteLoop: true,
autoHover: true,
autoControls: false,
controls: false,
responsive: false,
speed: 800,
slideWidth: 564,
slideHeight: 312,
pagerCustom: '#bx-pager'
});
})
</script>
</head>
<body>
<ul class="bxslider">
<li><img src="http://bxslider.com/images/730_200/tree_root.jpg" />
</li>
<li><img src="http://bxslider.com/images/730_200/houses.jpg" />
</li>
<li><img src="http://bxslider.com/images/730_200/hill_fence.jpg" />
</li>
</ul>
<div id="bx-pager">
<a data-slide-index="0" href="http://javascript.ru/forum/" target="_blank"><img src="http://bxslider.com/images/thumbs/tree_root.jpg" />
</a>
<a data-slide-index="1" href="http://javascript.ru/forum/" target="_blank"><img src="http://bxslider.com/images/thumbs/houses.jpg" />
</a>
<a data-slide-index="2" href="http://javascript.ru/forum/" target="_blank"><img src="http://bxslider.com/images/thumbs/hill_fence.jpg" />
</a>
</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 14:37. |