javascript – Making a carousel that slides on mouse scroll-ThrowExceptions

Exception or error:

I am trying to create a similar carousel like the one on https://ueno.co/about/ (under the “value” section), that scrolls as the user continue to scroll down the page and then displays more information beneath it by adding the class .show to the hidden divs that will be below.

So far I have been using the flickity API and have created most of the setup necessary.

The only thing that is missing is being able to scroll through the carousel using the mouse wheel once it is in focus (which is setup once the user scrolls to it).

My guess was that I could simulate a left and right arrow key press when it is in focus which will change each slide, but if there is a cleaner way I would gladly use that.

jQuery(document).ready(function( $ ) {
  var $carousel = $('.js-carousel');
  $carousel.flickity({
    prevNextButtons: false,
    pageDots: false
  });
  // Split each word in the cell title into a span.
  var $cellTitle = $('.js-cell-title');

  // Wrap every letter in the cell title
  $cellTitle.each(function() {
    var $this = $(this);
    var letters = $this.text().split('');

    $this = $(this);
    $this.empty();

    $.each(letters, function(i, el) {
      $this.append($('<span class="text-split">')
        .append($('<span class="text-split__inner">')
          .text(el)));
    });
    // Dirty way of getting the whitespace
    var emptySplits = $this.find('.text-split__inner:contains( )');
    emptySplits.addClass('whitespace');
    emptySplits.parent().addClass('whitespace');
  });

  //focus the carousel when it is scrolled to
  $(window).scroll(function() {
    var carousel = $(".carousel");

   var carouselTop = $('.carousel').offset().top;
   var carouselHeight = $('.carousel').outerHeight();
   var windowHeight = $(window).height();
   var scrollTop = $(this).scrollTop();
   var isScrollMode = carousel.hasClass('scrollMode');
    var isInView = scrollTop > (carouselTop+carouselHeight-windowHeight) &&
                (carouselTop > scrollTop) && (scrollTop+windowHeight > carouselTop+carouselHeight);

    if(!isInView && isScrollMode){
      carousel.removeClass('scrollMode');
      carousel.blur();
      console.log('EXIT');
    } else if (!carousel.hasClass('scrollMode') && isInView){
        carousel.addClass('scrollMode');
        carousel.focus();
        //NEEDS FUNCTION TO SCROLL THE CAROUSEL
        console.log('ENTER');
       }
});

  //end of carousel event
  function carouselEnd() {
    var cells = $(".carousel-cell");
    var numberOfCells = cells.length;
    var lastCell = cells[numberOfCells - 1];
    if( lastCell.classList.contains('is-selected') ){
      //will add .show class to the hidden content
    }
  }

  $carousel.on( 'settle.flickity', function( event, pointer ) {
    carouselEnd();
  });

});
.carousel{
  .row{
    margin:0;
  }
  .carousel-cell {
    width: 66%;
    margin-right: 3rem;
  }

  .cell__wrap {
    width: 100%;
    margin: 0 auto;
  }

  .cell__inner {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
  }

  .cell__title {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 0;
    margin: 0;
    transform: translateY(-50%) translateX(-20%);
  }

  .text-split {
    overflow: hidden;
    display: inline-block;
    &.whitespace {
      display: initial;
    }

    @for $i from 1 through 100 {
      &:nth-child(#{$i}) .text-split__inner {
        transition-delay: 0.02s * $i;
      }
    }
  }

  .text-split__inner {
    transform: translateY(100%);
    display: inline-block;
    transition: transform 0.3s ease;

    .is-selected & {
      transform: translateY(0);
    }

    &.whitespace {
      display: initial;
    }
  }

  .cell__thumb {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  // Base styles
  html,
  body {
    width: 100%;
    height: 100%;
    font-family: 'Work Sans', sans-serif;
  }

  body {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    /* background-color: #00011D;
    color: #FFF; */
  }

  .container {
    width: 100%;
  }
}
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://unpkg.com/flickity@2.0/dist/flickity.pkgd.min.js"></script>
</head>

<section class="carousel">
  <div class="container a">
    <div class="carousel js-carousel">
      <div class="carousel-cell">
        <div class="cell__wrap">
          <div class="cell__inner">
            <img class="cell__thumb shadow-green" src='https://via.placeholder.com/1036x274.png'>
          </div>
          <div class="row">
              <h2>Title</h2>
          </div>
          <div class="row">
              <p> Here is the content</p>
          </div>
        </div>
      </div>
      <div class="carousel-cell">
        <div class="cell__wrap">
          <div class="cell__inner">
            <img class="cell__thumb shadow-green" src='https://via.placeholder.com/1036x274.png'>
          </div>
          <div class="row">
              <h2>Title</h2>
          </div>
          <div class="row">
              <p> Here is the content</p>
          </div>
        </div>
      </div>
      <div class="carousel-cell">
        <div class="cell__wrap">
          <div class="cell__inner">
            <img class="cell__thumb shadow-green" src='https://via.placeholder.com/1036x274.png'>
          </div>
          <div class="row">
              <h2>Title</h2>
          </div>
          <div class="row">
              <p> Here is the content</p>
          </div>
        </div>
      </div>
      <div class="carousel-cell">
        <div class="cell__wrap">
          <div class="cell__inner">
            <img class="cell__thumb shadow-green" src='https://via.placeholder.com/1036x274.png'>
          </div>
          <div class="row">
              <h2>Title</h2>
          </div>
          <div class="row">
              <p> Here is the content</p>
          </div>
        </div>
      </div>
      <div class="carousel-cell">
        <div class="cell__wrap">
          <div class="cell__inner">
            <img class="cell__thumb shadow-green" src='https://via.placeholder.com/1036x274.png'>
          </div>
          <div class="row">
              <h2>Title</h2>
          </div>
          <div class="row">
              <p> Here is the content</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
How to solve:

Leave a Reply

Your email address will not be published. Required fields are marked *