Javascript-форум - Bxslider + drag

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Bxslider + drag (https://javascript.ru/forum/dom-window/55564-bxslider-drag.html)

Доброго времени суток,
возникла следующая проблема - есть 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) {

            }
        });

Valentinka_1,
Flickity: отзывчивые тач-галереи
по ссылке внизу примеры

Спасибо, но мне бы сделать костыль с bxslider

моск не насилуй, сам сделай

Цитата:

Сообщение от _0_ (Сообщение 369456)

моск не насилуй, сам сделай

Сказал человек, который в соседней теме не смог сам css селектор прописать.

Valentinka_1,
:write:

<!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>

Спасибище огромное)) даже не знаю что бы без вас делала :thanks:
А не подскажите как сделать что бы после окончания итерации не на 1й элемент перелистывала, а продолжало прибавлять слайды

Потому что в карусели на 5слайдов резкий переход

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>

:thanks: :thanks: ;)