在Bootstrap 3轮播中排队点击事件 | 3轮播中排队点击事件

本文介绍了在Bootstrap 3轮播中排队点击事件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在开发一个自定义的Bootstrap 3旋转木马，具有垂直，单向，滑动转换。它处于当前状态：

  var carouselDuration = function（）{ $ .fn.carousel.Constructor.TRANSITION_DURATION = 1000;} carouselDuration（）;

  .carousel.vertical {position：relative;}。carousel.vertical .carousel-inner {height：100％; width：auto;}。carousel.vertical .carousel-inner> .item {width：auto;过渡：1s轻松进出; transform：translate3d（0,100％，0）; top：0;}。carousel.vertical .carousel-inner> .next，.carousel.vertical .carousel-inner> .prev，.carousel.vertical .carousel-inner> .right {transform：translate3d（0,100％， 0）; top：0;}。carousel.vertical .carousel-inner> .left，.carousel.vertical .carousel-inner> .prev.right，.carousel.vertical .carousel-inner> .next.left，.carousel.vertical。 carousel-inner> .active {transform：translate3d（0,0,0）; top：0;}。carousel.vertical .carousel-inner> .active.right，.carousel.vertical .carousel-inner> .active.left {transform：translate3d（0，-100％，0）; top：0;}。carousel.vertical .carousel-indicators {display：inline-block;宽度：自动;填充：0;保证金：0;左：汽车;右：10px;底部：2px; z-index：9; font-size：0;}。carousel.vertical .carousel-indicators li {border：none;游标：指针; display：inline-block;宽度：18px;身高：18px; text-indent：-9999px; background：url（https://grgs.ro/1/i/sprite.png）no-repeat -528px -502px;}。carousel.vertical .carousel-indicators li.active {background-position：-528px  - 524px;}

 < link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css>< script src =https://ajax.googleapis.com/ajax/libs/jquery/ 3.3.1 / jquery.min.js>< / script>< script src =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js>< ; / script>< div class =container> < div id =myCarouselclass =carousel vertical slidedata-ride =carouseldata-interval =9000> <！ - 幻灯片包装 - > < div class =carousel-inner> < div class =item active> < img src =https://picsum.photos/1200/300/?gravity=eastalt => < / DIV> < div class =item> < img src =https://picsum.photos/1200/300/?gravity=southalt => < / DIV> < div class =item> < img src =https://picsum.photos/1200/300/?gravity=westalt => < / DIV> < / DIV> <！ - 指标 - > < ol class =carousel-indicators> < li data-target =＃myCarouseldata-slide-to =0class =active>< / li> < li data-target =＃myCarouseldata-slide-to =1>< / li> < li data-target =＃myCarouseldata-slide-to =2>< / li> < /醇> < / div>< / div>

它有一个bug：当我快速连续点击2个项目符号时 - 这意味着在第一个项目完成之前点击第二个项目符号 - 过渡重叠。

什么是一种简单而有效的方法来防止这种重叠错误？

解决方案

这是一个妥协的解决方案：不排队点击事件，只要正在进行幻灯片转换就禁用它们，然后在它们之间启用它们转换：

  var carouselDuration = function（）{$ .fn.carousel。 Constructor.TRANSITION_DURATION = 1000;} carouselDuration（）; //正在进行转换（幻灯片事件），d o这个$（'＃myCarousel'）。on（'slide.bs.carousel'，function（e）{var $ indicator = $（this）.find（'。carousel-indicators> li'）; $ indicator.css（'pointer-events'，'none'）;}）; //转换完成后（滑动事件），执行此$（'＃myCarousel'）。on（'slid.bs.carousel' ，function（e）{var $ indicator = $（this）.find（'。carousel-indicators> li'）; $ indicator.css（'pointer-events'，'auto'）;}）;

  .carousel.vertical {position：relative;}。carousel.vertical .carousel -inner {身高：100％; width：auto;}。carousel.vertical .carousel-inner> .item {width：auto;过渡：1s轻松进出; transform：translate3d（0,100％，0）; top：0;}。carousel.vertical .carousel-inner> .next，.carousel.vertical .carousel-inner> .prev，.carousel.vertical .carousel-inner> .right {transform：translate3d（0,100％， 0）; top：0;}。carousel.vertical .carousel-inner> .left，.carousel.vertical .carousel-inner> .prev.right，.carousel.vertical .carousel-inner> .next.left，.carousel.vertical。 carousel-inner> .active {transform：translate3d（0,0,0）; top：0;}。carousel.vertical .carousel-inner> .active.right，.carousel.vertical .carousel-inner> .active.left {transform：translate3d（0，-100％，0）; top：0;}。carousel.vertical .carousel-indicators {display：inline-block;宽度：自动;填充：0;保证金：0;左：汽车;右：10px;底部：2px; z-index：9; font-size：0;}。carousel.vertical .carousel-indicators li {border：none;游标：指针; display：inline-block;宽度：18px;身高：18px; text-indent：-9999px; background：url（https://grgs.ro/1/i/sprite.png）no-repeat -528px -502px;}。carousel.vertical .carousel-indicators li.active {background-position：-528px  - 524px;}

 < link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css>< script src =https://ajax.googleapis.com/ajax/libs/jquery/ 3.3.1 / jquery.min.js>< / script>< script src =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js>< ; / script>< div class =container> < div id =myCarouselclass =carousel vertical slidedata-ride =carouseldata-interval =9000> <！ - 幻灯片包装 - > < div class =carousel-inner> < div class =item active> < img src =https://picsum.photos/1200/300/?gravity=eastalt => < / DIV> < div class =item> < img src =https://picsum.photos/1200/300/?gravity=southalt => < / DIV> < div class =item> < img src =https://picsum.photos/1200/300/?gravity=westalt => < / DIV> < / DIV> <！ - 指标 - > < ol class =carousel-indicators> < li data-target =＃myCarouseldata-slide-to =0class =active>< / li> < li data-target =＃myCarouseldata-slide-to =1>< / li> < li data-target =＃myCarouseldata-slide-to =2>< / li> < /醇> < / div>< / div>

仍在寻找排队机制，因为它更自然，更优雅。

I am working on a custom Bootstrap 3 carousel, with vertical, unidirectional, slide tranitions. Here it is in its current state:

var carouselDuration = function() {
  $.fn.carousel.Constructor.TRANSITION_DURATION = 1000;
}
carouselDuration();

.carousel.vertical {
  position: relative;
}

.carousel.vertical .carousel-inner {
  height: 100%;
  width: auto;
}

.carousel.vertical .carousel-inner>.item {
  width: auto;
  transition: 1s ease-in-out;
  transform: translate3d(0, 100%, 0);
  top: 0;
}

.carousel.vertical .carousel-inner>.next,
.carousel.vertical .carousel-inner>.prev,
.carousel.vertical .carousel-inner>.right {
  transform: translate3d(0, 100%, 0);
  top: 0;
}

.carousel.vertical .carousel-inner>.left,
.carousel.vertical .carousel-inner>.prev.right,
.carousel.vertical .carousel-inner>.next.left,
.carousel.vertical .carousel-inner>.active {
  transform: translate3d(0, 0, 0);
  top: 0;
}

.carousel.vertical .carousel-inner>.active.right,
.carousel.vertical .carousel-inner>.active.left {
  transform: translate3d(0, -100%, 0);
  top: 0;
}

.carousel.vertical .carousel-indicators {
  display: inline-block;
  width: auto;
  padding: 0;
  margin: 0;
  left: auto;
  right: 10px;
  bottom: 2px;
  z-index: 9;
  font-size: 0;
}

.carousel.vertical .carousel-indicators li {
  border: none;
  cursor: pointer;
  display: inline-block;
  width: 18px;
  height: 18px;
  text-indent: -9999px;
  background: url("https://grgs.ro/1/i/sprite.png") no-repeat -528px -502px;
}

.carousel.vertical .carousel-indicators li.active {
  background-position: -528px -524px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container">
  <div id="myCarousel" class="carousel vertical slide" data-ride="carousel" data-interval="9000">
    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <div class="item active">
        <img src="https://picsum.photos/1200/300/?gravity=east" alt="">
      </div>

      <div class="item">
        <img src="https://picsum.photos/1200/300/?gravity=south" alt="">
      </div>

      <div class="item">
        <img src="https://picsum.photos/1200/300/?gravity=west" alt="">
      </div>
    </div>

    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
  </div>
</div>

It has a bug: when I click 2 bullets in rapid succession - which means clicking the second before the transition triggered by the first is finished - the transitions overlap.

Is this a Bootstrap bug or is it a bug of the above carousel?

What would be a simple and robust way to prevent this overlap bug?

解决方案

Here is a compromise solution: not queuing the click events, but disabling them as long as a slide transition is in progress, then enabling them between transitions:

var carouselDuration = function() {
  $.fn.carousel.Constructor.TRANSITION_DURATION = 1000;
}

carouselDuration();
// While a transition is in progress (slide event), do this
$('#myCarousel').on('slide.bs.carousel', function (e) {
    var $indicator = $(this).find('.carousel-indicators>li');
    $indicator.css('pointer-events', 'none');
});

// While a transition has finished (slid event), do this
$('#myCarousel').on('slid.bs.carousel', function (e) {
    var $indicator = $(this).find('.carousel-indicators>li');
    $indicator.css('pointer-events', 'auto');
});

.carousel.vertical {
  position: relative;
}

.carousel.vertical .carousel-inner {
  height: 100%;
  width: auto;
}

.carousel.vertical .carousel-inner>.item {
  width: auto;
  transition: 1s ease-in-out;
  transform: translate3d(0, 100%, 0);
  top: 0;
}

.carousel.vertical .carousel-inner>.next,
.carousel.vertical .carousel-inner>.prev,
.carousel.vertical .carousel-inner>.right {
  transform: translate3d(0, 100%, 0);
  top: 0;
}

.carousel.vertical .carousel-inner>.left,
.carousel.vertical .carousel-inner>.prev.right,
.carousel.vertical .carousel-inner>.next.left,
.carousel.vertical .carousel-inner>.active {
  transform: translate3d(0, 0, 0);
  top: 0;
}

.carousel.vertical .carousel-inner>.active.right,
.carousel.vertical .carousel-inner>.active.left {
  transform: translate3d(0, -100%, 0);
  top: 0;
}

.carousel.vertical .carousel-indicators {
  display: inline-block;
  width: auto;
  padding: 0;
  margin: 0;
  left: auto;
  right: 10px;
  bottom: 2px;
  z-index: 9;
  font-size: 0;
}

.carousel.vertical .carousel-indicators li {
  border: none;
  cursor: pointer;
  display: inline-block;
  width: 18px;
  height: 18px;
  text-indent: -9999px;
  background: url("https://grgs.ro/1/i/sprite.png") no-repeat -528px -502px;
}

.carousel.vertical .carousel-indicators li.active {
  background-position: -528px -524px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container">
  <div id="myCarousel" class="carousel vertical slide" data-ride="carousel" data-interval="9000">
    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <div class="item active">
        <img src="https://picsum.photos/1200/300/?gravity=east" alt="">
      </div>

      <div class="item">
        <img src="https://picsum.photos/1200/300/?gravity=south" alt="">
      </div>

      <div class="item">
        <img src="https://picsum.photos/1200/300/?gravity=west" alt="">
      </div>
    </div>

    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
  </div>
</div>

Still looking for a queuing mechanism, as it is more natural and elegant.

这篇关于在Bootstrap 3轮播中排队点击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！