04.05.2015, 16:34
|
|
Аспирант
|
|
Регистрация: 09.09.2012
Сообщений: 38
|
|
|
Bxslider + drag
Доброго времени суток,
возникла следующая проблема - есть bxslider и нужно сделать прокрутку перетаскиванием - использую draggable. Слайдер цикличный, но при перетаскивании почему-то происходит только 2 итерации, уже нету идей что не так и как это исправить(
заранее спасибо
var $slider = $(".brand-carousel_new");
var slider = $slider.bxSlider({
minSlides: 2,
maxSlides: 200,
slideWidth: 174,
slideMargin: 0,
moveSlides: 1,
autoHover: true,
touchEnabled:true,
});
$slider.on('mousewheel', function(event) {
if (event.originalEvent.deltaY > 0) {
slider.goToNextSlide();
}
if (event.originalEvent.deltaY < 0){
slider.goToPrevSlide();
}
event.stopPropagation();
event.preventDefault();
});
$slider.draggable({
axis: "x" ,
start: function(event, ui) {
},
drag: function(event) {
},
stop: function(event) {
}
});
|
|
04.05.2015, 17:05
|
|
Аспирант
|
|
Регистрация: 09.09.2012
Сообщений: 38
|
|
|
Спасибо, но мне бы сделать костыль с bxslider
|
|
04.05.2015, 20:30
|
|
Аспирант
|
|
Регистрация: 10.05.2013
Сообщений: 56
|
|
|
моск не насилуй, сам сделай
|
|
04.05.2015, 20:53
|
 |
Профессор
|
|
Регистрация: 16.07.2014
Сообщений: 267
|
|
Сообщение от _0_
|
|
моск не насилуй, сам сделай
|
Сказал человек, который в соседней теме не смог сам css селектор прописать. |
|
05.05.2015, 01:17
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,072
|
|
Valentinka_1,
<!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://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<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 img{
width: 100%;
}
#reklama_right {
width:350px;
padding: 5px;
margin: 0 auto;
}
</style>
<script>
$(function() {
var c = $(".bxslider").bxSlider({
controls: false,
auto: false,
speed: 500,
randomStart: true
}),
d, a, e = c.getSlideCount();
$(".bxslider").draggable({
axis: "x",
start: function(e, b) {
d = b.position.left;
a = c.getCurrentSlide()
},
drag: function(a, b) {},
stop: function(f, b) {
b.position.left > d && (a--, 0 > a && (a = e - 1));
b.position.left < d && (a++, a == e && (a = 0));
$(this).css({
left: 0
});
c.goToSlide(a)
}
})
});
</script>
</head>
<body>
<div id="reklama_right" >
<div id="slider_1" class="bxslider">
<div><a href="http://" target="_blank"><img src="http://download-multimedia.com/images/wallpaper/medium/2/sezon_ohoti_1024x768_2252_download-multimedia.com.jpg" alt="kbn" width="240" height="240"/></a></div>
<div><a href="http://" target="_blank"><img src="http://download-multimedia.com/images/wallpaper/medium/2/12.jpg" alt="kbn" width="240" height="240"/></a></div>
<div><a href="http://" target="_blank"><img src="http://cartoons.kartinki-i-oboi.ru/user-content/uploads/wall/thumb/39/248013-1920x1080.jpg" alt="kbn" width="240" height="240"/></a></div>
<div><a href="http://" target="_blank"><img src="http://brightwallpapers.ru/Uploads/2-7-2013/5831/thumb-myltfilm-oblako-piksar-pixar.jpg" alt="kbn" width="240" height="240"/></a></div>
<div><a href="http://" target="_blank"><img src="http://www.instapics.ru/mini/201211/52978.jpg" alt="kbn" width="240" height="240"/></a></div>
<div><a href="http://" target="_blank"><img src="http://www.bolshoyvopros.ru/files/users/images/67/2e/672e187ac1a5b9a6c029f6cbc61f7065.jpg" alt="kbn" width="240" height="240"/></a></div>
</div>
</div>
</body>
</html>
|
|
05.05.2015, 01:35
|
|
Аспирант
|
|
Регистрация: 09.09.2012
Сообщений: 38
|
|
Спасибище огромное)) даже не знаю что бы без вас делала 
А не подскажите как сделать что бы после окончания итерации не на 1й элемент перелистывала, а продолжало прибавлять слайды |
|
05.05.2015, 08:34
|
|
Аспирант
|
|
Регистрация: 09.09.2012
Сообщений: 38
|
|
|
Потому что в карусели на 5слайдов резкий переход
|
|
05.05.2015, 11:02
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,072
|
|
Valentinka_1,
<!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://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<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 img{
width: 100%;
}
#reklama_right {
width:350px;
padding: 5px;
margin: 0 auto;
}
</style>
<script>
$(function() {
var b, c = $(".bxslider").draggable({
axis: "x",
start: function(c, a) {
b = a.position.left
},
drag: function(b, a) {},
stop: function(d, a) {
$(this).css({
left: b
});
a.position.left > b && c.goToPrevSlide();
a.position.left < b && c.goToNextSlide()
}
}).bxSlider({
controls: false,
auto: false,
speed: 500,
randomStart: true
})
});
</script>
</head>
<body>
<div id="reklama_right" >
<div id="slider_1" class="bxslider">
<div><a href="http://" target="_blank"><img src="http://download-multimedia.com/images/wallpaper/medium/2/sezon_ohoti_1024x768_2252_download-multimedia.com.jpg" alt="kbn" width="240" height="240"/></a></div>
<div><a href="http://" target="_blank"><img src="http://download-multimedia.com/images/wallpaper/medium/2/12.jpg" alt="kbn" width="240" height="240"/></a></div>
<div><a href="http://" target="_blank"><img src="http://cartoons.kartinki-i-oboi.ru/user-content/uploads/wall/thumb/39/248013-1920x1080.jpg" alt="kbn" width="240" height="240"/></a></div>
<div><a href="http://" target="_blank"><img src="http://brightwallpapers.ru/Uploads/2-7-2013/5831/thumb-myltfilm-oblako-piksar-pixar.jpg" alt="kbn" width="240" height="240"/></a></div>
<div><a href="http://" target="_blank"><img src="http://www.bolshoyvopros.ru/files/users/images/67/2e/672e187ac1a5b9a6c029f6cbc61f7065.jpg" alt="kbn" width="240" height="240"/></a></div>
</div>
</div>
</body>
</html>
Последний раз редактировалось рони, 05.05.2015 в 11:04.
|
|
05.05.2015, 11:20
|
|
Аспирант
|
|
Регистрация: 09.09.2012
Сообщений: 38
|
|
|
|
|
|
|
