Question

我有一个可以通过Ion.RangeSlider移动的旋转木马。滑块宽度取决于旋转木马项目的数量。

旋转木马本身也可以通过鼠标拖动来移动。我想在拖动轮播时更新滑块位置，所以我初始化了滑块的更新。

但是当我更新滑块时，它丢失了样式属性。所以我再次计算它。但是滑块位置似乎不在预期点的中心，它向右移动。

观看演示时可能更容易理解：

尝试将旋转木马拖到最后，您将看到问题所在。

jQuery(document).ready(function($){
     var itemsNum = 0;

var owl = $('.owl-carousel');
owl.on('initialized.owl.carousel', function(event) {
	var itemCount =  event.item.count;
  var size      = event.page.size;
  var dragLength = 100 / (itemCount/size);
  $("#range").ionRangeSlider({
    type: "single",
    min: 1,
    max: itemCount - (size - 1),
    keyboard: true,
    step: 1,
    onChange: function (data) {
      //owl.trigger('changed.owl.carousel', [???]);
          owlTo = (data.from) - 1;
          owl.trigger('to.owl.carousel', [owlTo, 500, true]);
    }
  });
  $('.irs-slider.single').css('width', dragLength + "%")
});

//Слайдер
owl.owlCarousel({
    loop:false,
    margin:10,
    nav:false,
    dots: false,
    slideBy:1,
    items: 8,
    responsiveClass:true,
    responsive:{
        0:{
            items:2
        },
        500:{
            items:3
        },
        600:{
            items:4
        },
        700:{
            items:5
        },
        800:{
            items:6
        },
        900:{
            items:7
        },
        1000:{
            items:8
        }
    }
});

owl.on('dragged.owl.carousel', function(event) {
		var itemCount =  event.item.count;
	  var size      = event.page.size;
	  var curItem = event.item.index + 1;
	  var dragLength = 100 / (itemCount/size);
	  console.log(curItem);
		$("#range").data("ionRangeSlider").update({from: curItem});
		$('.irs-slider.single').css('width', dragLength + "%");
});

owl.on('resized.owl.carousel', function(event) {
	var itemCount =  event.item.count;
  var size      = event.page.size;
  var curItem = event.item.index + 1;
  var dragLength = 100 / (itemCount/size);
  $("#range").data("ionRangeSlider").update({
  	max: itemCount - (size - 1),
    from: curItem
  });
  $('.irs-slider.single').css('width', dragLength + "%");
});                  
                       
})

.owl-carousel .owl-item {
    background-color: #ccc;
    text-align: center;
}

.irs-bar, .irs-bar-edge, .irs-min, .irs-max, .irs-from, .irs-to, .irs-single{opacity: 0;}

.irs-slider.single {
    transition: all 0.3s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.theme.default.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/owl.carousel.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.carousel.min.css" rel="stylesheet"/>
<link href="http://ionden.com/a/plugins/ion.rangeSlider/static/css/ion.rangeSlider.skinHTML5.css" rel="stylesheet"/>
<script src="http://ionden.com/a/plugins/ion.rangeSlider/static/js/ion-rangeSlider/ion.rangeSlider.js"></script>
<link href="http://ionden.com/a/plugins/ion.rangeSlider/static/css/ion.rangeSlider.css" rel="stylesheet"/>

<div class="owl-carousel">
    <div class="item"><h4>1</h4></div>
    <div class="item"><h4>2</h4></div>
    <div class="item"><h4>3</h4></div>
    <div class="item"><h4>4</h4></div>
    <div class="item"><h4>5</h4></div>
    <div class="item"><h4>6</h4></div>
    <div class="item"><h4>7</h4></div>
    <div class="item"><h4>8</h4></div>
    <div class="item"><h4>9</h4></div>
    <div class="item"><h4>10</h4></div>
    <div class="item"><h4>11</h4></div>
    <div class="item"><h4>12</h4></div>
</div>

<div style="position: relative; padding: 20px 100px;">
    <div><input type="text" id="range" value="" name="range" /></div>
</div>

Answer 1

脚本几乎是正确的。

在拖动owl.carousel之后更新ionRangeSlider的部分中有：

var curItem = event.item.index + 1;。

应该是：

var curItem = event.item.index - 1;。

检查这个小提琴： http://jsfiddle.net/broezer/mwams6g2/28/

这仅适用于连续4个项目的图库。

更新

但是我确实注意到了响应的一些怪癖。所以我想，它必须对脚本的那一部分做些什么。

经过一些测试，我发现改变了物品的价值。拖动的更新功能彼此相关。所以要注意这个怪癖。您可以在拖动功能中设置断点，以根据您在var curItem设置中定义的断点更改owl.owCarousel

Ion.RangeSlider，滑块宽度和更新位置

1 个答案: