Bootstrap 4 carousel cycle method

Question

I have a bootstrap 4 carousel, and it cycles through 6 different products that I offer.

On the right, I have a list of links for the 6 products that I offer. I was looking to add the ability to hover over the links, and flip the the corresponding carousel page.

If a user hovers over multiple links (imagine they drag the mouse down from link 1 to link 6) the carousel will cycle through, one by one, each image that is associated to the link that was hovered over. So it is real easy to hover down the list, and now the carousel is flipping through.

In this case, I'd like to jump directly to the last hovered link. Or some form of a solution similar to that.

Below is an example fiddle, this is my current jquery block:

$.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/

It would help get better answers with the HTML and a working snippet IN the question, a link is sometimes missed — Mark Schultheiss, Oct 02 '19 at 14:03
I added a link to the fiddle so it is possible to see what I am talking about. — Stuff, Oct 02 '19 at 14:04

score 0 · Answer 1 · answered Oct 02 '19 at 14:25

After messing with it, I found a solution, which is to add a type of throttle:

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

The 350ms timeout was simply what I found to be decent enough for my example.

Updated fiddle: https://jsfiddle.net/q4dwvjbn/

score 0 · Answer 2 · answered Oct 06 '19 at 14:22

You should be able to simply debounce it, borrow code from https://stackoverflow.com/a/24004942/125981 (without the comments)

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>

Bootstrap 4 carousel cycle method

2 Answers2