JSFiddle - React, Tailwind, and code Playground

by rome_margo

HTML

<div class="chapter-carousel">
  <div class="view-content">
     <a class="carousel-wrapper" href="{#{{ url }}#}">
          <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>
  </div>
</div>

SCSS

.chapter-carousel {
  margin-bottom: 22px;
  height: 445px;
  width: 100vw;
  overflow: hidden;
  position: relative;
  
  .view-content {
    display: flex;
    position: absolute;
  }
  
  .carousel-wrapper {
    display: block;
    text-decoration: none;
    position: relative;
    margin: 0px 10px;
    height: 100%;
    width: 348px;

    .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;

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

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

JavaScript

function animatethis(targetElement, speed, timing) {
	let itemsWidth = $('.view-content').width();
  let carouselWidth = $('.chapter-carousel').width();
  let constantSpeed = (itemsWidth - carouselWidth)/speed;
  
  console.log(itemsWidth); 
  console.log(carouselWidth);
  console.log(constantSpeed);
  
  targetElement.css({
    'left': 'auto',
    'right': 'auto'
  });

    $(targetElement).animate({ 'right': 0  },
    {
        duration: speed,
        easing: timing,
        complete: function () {
            targetElement.animate({ 
            'left': 0 
            },
            {
                duration: speed,
                easing: timing,
                complete: function () {
                    animatethis(targetElement, speed, timing);
                }
            });
        }
    });
};
animatethis($('.view-content'), 5000, "swing");