Bootstrap 4轮播循环方法

Question

我有一个 bootstrap 4 carousel，它循环浏览我提供的 6 种不同产品。

在右侧，我列出了我提供的 6 种产品的链接。 我希望添加将鼠标悬停在链接上并翻转相应轮播页面的功能。

如果用户将鼠标悬停在多个链接上（想象他们将鼠标从链接 1 向下拖动到链接 6），则轮播将逐个循环显示与悬停在链接上的链接相关联的每个图像。因此，将鼠标悬停在列表下方真的很容易，现在轮播正在翻转。

在这种情况下，我想直接跳转到最后一个悬停的链接。或某种形式的类似解决方案。

下面是一个示例小提琴，这是我当前的 jquery 块：

$.each($('.ql-links'), function(index, value) {
    $(this).mouseenter(function() {
        const frame = $(this).attr('data-frame');
        $('#products-carousel').carousel(Number(frame));
    });
});

https://jsfiddle.net/42gjaer3/1/

Answer 1

弄乱了之后，找到了解决办法，就是加一个类型的油门：

$('.ql-links').on('mouseenter', function() {
    const frame = $(this).attr('data-frame');
    timer = setTimeout(function() {
        $('#products-carousel').carousel(Number(frame));
    }, 350)
}).mouseleave(function() {
    clearTimeout(timer);
});

350 毫秒的超时时间对于我的示例来说已经足够了。

更新小提琴：https://jsfiddle.net/q4dwvjbn/

Answer 2

你应该可以简单地去抖动它，从https://stackoverflow.com/a/24004942/125981借代码（没有cmets）

function debounce(func, wait, immediate) {
  var timeout;
  return function() {
    var context = this,
      args = arguments;
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(function() {
      timeout = null;
      if (!immediate) {
        func.apply(context, args);
      }
    }, wait);
    if (callNow) {
      func.apply(context, args);
    }
  }
}
// Define the debounce delay
var delay = 100;
var timeout;
$('#quicklink-items')
  .on("mouseenter", '.ql-links', debounce(function(event) {
    const targetSlide = Number($(event.target).data('frame'));
    $('#products-carousel').carousel(targetSlide);
  }, delay));

/* Carousel */

.nav-btns {
  width: 6%;
  opacity: 1;
  background: #11375c;
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.nav-btns:hover {
  width: 6%;
  opacity: 1;
  background: #bc0a29;
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

#products-carousel {
  background: #222222;
}

.carousel-img {
  height: 68vh;
}

.carousel-caption {
  background: rgba(34, 33, 32, 0.8);
}

.carousel-indicators-numbers li {
  text-indent: 0;
  text-align: center;
  line-height: 20px;
  height: 20px;
  width: 20px;
  color: white;
  background-color: #333;
  opacity: 1;
  /*   color: #fff; */
  /*   background-color: #999; */
  transition: all 0.25s ease;
}

.carousel-indicators-numbers li.visited,
.carousel-indicators-numbers li:hover,
.carousel-indicators-numbers li.active {
  background-color: #45668E;
  color: white;
}


/* Carousel caption animation */

.c-captions {
  opacity: 0;
}

.carousel-item.active .carousel-caption {
  animation: animate-carousel-title 1s normal forwards;
}

@keyframes animate-carousel-title {
  0% {
    transform: translate(0, -2em);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}


/* Animation for title and subtitle text */

.c-title {
  opacity: 0;
}

.c-subtitle {
  opacity: 0;
}

.caption-text {
  opacity: 0;
}

.carousel-item.active .c-title {
  animation: animate-carousel-c-title 1s normal forwards;
  animation-delay: 1s;
}

.carousel-item.active .c-subtitle {
  animation: animate-carousel-c-title 1s normal forwards;
  animation-delay: 1s;
}

.carousel-item.active .caption-text {
  animation: animate-carousel-c-subtitle 1s normal forwards;
  animation-delay: 2s;
}

@keyframes animate-carousel-c-title {
  0% {
    opacity: 0;
    transform: translate(-3em, 0);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@keyframes animate-carousel-c-subtitle {
  0% {
    opacity: 0;
    transform: translate(3em, 0);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}


/* Quicklinks*/

.quicklinks .link {
  list-style-type: none;
  opacity: 1;
  display: block;
  padding: 10px 10px 10px 10px;
  color: #4D4D4D;
  font-size: 14px;
  font-weight: 700;
  border-bottom: 1px solid #CCC;
  position: relative;
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.quicklinks li:last-child .link {
  border-bottom: 0;
}

.quicklinks li.list-header {
  list-style-type: none;
}

.quicklinks li.list-header .link {
  color: white;
  background: #222222;
}

.list-items {
  list-style-type: none;
  display: block;
  background: #222222;
  font-size: 14px;
  padding: 0px;
}

.list-items li {
  border-bottom: 1px solid #000;
}

.list-items a {
  display: block;
  text-decoration: none;
  color: white;
  background: #11375c;
  padding: 10px;
  padding-left: 30px;
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

.list-items a:hover {
  background: #bc0a29;
  color: #FFF;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-9">

      <div id="products-carousel" class="carousel slide carousel-fade" data-ride="carousel" data-interval="6000" style="">
        <ol class="carousel-indicators carousel-indicators-numbers">
          <li class="carousel-indicator-item active" data-target="#products-carousel" data-slide-to="0">1</li>
          <li class="carousel-indicator-item" data-target="#products-carousel" data-slide-to="1">2</li>
          <li class="carousel-indicator-item" data-target="#products-carousel" data-slide-to="2">3</li>
          <li class="carousel-indicator-item" data-target="#products-carousel" data-slide-to="3">4</li>
          <li class="carousel-indicator-item" data-target="#products-carousel" data-slide-to="4">5</li>
          <li class="carousel-indicator-item" data-target="#products-carousel" data-slide-to="5">6</li>
          <li class="carousel-indicator-item" data-target="#products-carousel" data-slide-to="6">7</li>
        </ol>
        <div class="carousel-inner">

          <div class="carousel-item active">
            <a class="clickable-card" href="#">
              <div id="">
                <img src="https://via.placeholder.com/600x400" class="d-block carousel-img img-fluid mx-auto">
              </div>
            </a>
            <div class="carousel-caption c-captions">
              <h3 class="c-title">1</h3>
              <p class="caption-text" id="">text</p>
            </div>
          </div>

          <div class="carousel-item">
            <a class="clickable-card" href="#">
              <div id=""><img src="https://via.placeholder.com/600x400" class="d-block carousel-img img-fluid mx-auto"></div>
            </a>
            <div class="carousel-caption c-captions">
              <h3 class="c-title">2</h3>
              <p class="c-subtitle">Subtitle</p>
              <p class="caption-text">More info</p>
            </div>
          </div>

          <div class="carousel-item">
            <a class="clickable-card" href="#">
              <div id=""><img src="https://via.placeholder.com/600x400" class="d-block carousel-img img-fluid mx-auto"></div>
            </a>
            <div class="carousel-caption c-captions">
              <h3 class="c-title">3</h3>
              <p class="c-subtitle">subtitle</p>
              <p class="caption-text" id="home-csdb">Stuff</p>
            </div>
          </div>

          <div class="carousel-item">
            <a class="clickable-card" href="#">
              <div id=""><img src="https://via.placeholder.com/600x400" class="d-block carousel-img img-fluid mx-auto"></div>
            </a>
            <div class="carousel-caption c-captions">
              <h3 class="c-title">4</h3>
              <p class="c-subtitle">subtitle</p>
              <p class="caption-text" id="">Stuff</p>
            </div>
          </div>

          <div class="carousel-item">
            <a class="clickable-card" href="#">
              <div id=""><img src="https://via.placeholder.com/600x400" class="d-block carousel-img img-fluid mx-auto"></div>
            </a>
            <div class="carousel-caption c-captions">
              <h3 class="c-title">5</h3>
              <p class="c-subtitle">subtitle</p>
              <p class="caption-text" id="">wf</p>
            </div>
          </div>

          <div class="carousel-item">
            <a class="clickable-card" href="#">
              <div id=""><img src="https://via.placeholder.com/600x400" class="d-block carousel-img img-fluid mx-auto"></div>
            </a>
            <div class="carousel-caption c-captions">
              <h3 class="c-title">6</h3>
              <p class="c-subtitle">subtitle</p>
              <p class="caption-text" id="">sdfghvjnb</p>
            </div>
          </div>

          <div class="carousel-item">
            <a class="clickable-card" href="#" id="elms-link">
              <span id=""><img src="https://via.placeholder.com/600x400" class="d-block carousel-img img-fluid mx-auto"></span>
            </a>
            <div class="carousel-caption c-captions">
              <h3 class="c-title">7</h3>
              <p class="c-subtitle">subtitle</p>
              <p class="caption-text" id="">stuff</p>
            </div>
          </div>

        </div>
      </div>
    </div>
    <div class="col-3">
      <ul id="products-quicklinks" class="quicklinks p-0 m-0 mx-auto">
        <li class="list-header">
          <div class="link text-center">
            Our Products
          </div>
          <ul class="list-items" id="quicklink-items">
            <li><a class="ql-links" data-frame="0" href="#">0</a></li>
            <li><a class="ql-links" data-frame="1" href="#">1</a></li>
            <li><a class="ql-links" data-frame="2" href="#">2</a></li>
            <li><a class="ql-links" data-frame="3" href="#">3</a></li>
            <li><a class="ql-links" data-frame="4" href="#">4</a></li>
            <li><a class="ql-links" data-frame="5" href="#">5</a></li>
            <li><a class="ql-links" data-frame="6" href="#">6</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>
<div id="show-what" class="container"></div>