JSFiddle - React, Tailwind, and code Playground

by rome_margo

HTML

<div class="chapter-carousel">
   <a class="carousel-wrapper" href="#">
        <div
                class="carousel-body--category-title"
                style="tomato"
        >
        
          <div class="field--name-field-category-satellite-content">
            RANDOM TEXT
          </div>
          
          <img class="carousel-item--picto" src="https://source.unsplash.com/1600x900/?random">
          
        </div>
        <img class="image-file-img " src="https://source.unsplash.com/1600x900/?random">

        <div
                class="carousel--item-detail"
                style="background-color: tomato"
        >
            <p class="carousel--satellite-title">
                RANDOM TEXT
            </p>

            <div class="field__item">
              RABDIN TAEXt
            </div>
        </div>
    </a>
     <a class="carousel-wrapper" href="#">
        <div
                class="carousel-body--category-title"
                style="tomato"
        >
        
          <div class="field--name-field-category-satellite-content">
            RANDOM TEXT
          </div>
          
          <img class="carousel-item--picto" src="https://source.unsplash.com/1600x900/?random">
          
        </div>
        <img class="image-file-img " src="https://source.unsplash.com/1600x900/?random">

        <div
                class="carousel--item-detail"
                style="background-color: tomato"
        >
            <p class="carousel--satellite-title">
                RANDOM TEXT
            </p>

            <div class="field__item">
              RABDIN TAEXt
            </div>
        </div>
    </a>
     <a class="carousel-wrapper" href="#">
        <div
                class="carousel-body--category-title"
                style="tomato"
        >
        
          <div class="field--name-field-category-satellite-content">
            RANDOM TEXT
          </div>
          
          <img class="carousel-item--picto"...

SCSS

.chapter-carousel {
  margin-bottom: 22px;
  height: 445px;
  overflow: hidden;
  display: flex;

  .carousel-wrapper {
    display: block;
    text-decoration: none;
    position: relative;
    margin: 0px 10px;
    height: 100%;
    width: 420px;

    .carousel-wrapper:nth-child(odd) {
      margin-top: 90px;
    }

    .carousel-body--category-title {
      height: 56px;
      padding: 10px 70px 10px 0;
      text-align: right;

      .field--name-field-category-satellite-content {
        margin-right: 14px;
          font-size: 16px;
        display: inline-block;
      }

      .carousel-item--picto {
          height: 32px;
          width: 32px;
      }
    }

    .image-file-img {
      display: inline-block;
        width: 348px;
    }

    .carousel--item-detail {
      height: 150px;
      width: 262px;
      padding: 15px 14px 16px 15px;
      position: absolute;
      z-index: 1;
      bottom: 0;
      right: 0;

      .carousel--satellite-title {
        font-size: 22px;
        color: white;
      }

      .field__item {
        position: absolute;
        display: inline-block;
        color: white;
        bottom: 16px;
        font-size: 16px;
      }
    }
  }
}

JavaScript

$(window).on('load', function(){
  initCarouselLoop('.block','carouselloop');
});




/* function animatethis(targetElement, speed) {
    var scrollWidth = $(targetElement).get(0).scrollWidth;
    var clientWidth = $(targetElement).get(0).clientWidth;
    $(targetElement).animate({ scrollLeft: scrollWidth - clientWidth },
    {
        duration: speed,
        complete: function () {
            targetElement.animate({ scrollLeft: 0 },
            {
                duration: speed,
                complete: function () {
                    animatethis(targetElement, speed);
                }
            });
        }
    });
};
animatethis($('.chapter-carousel'), 5000); */