JSFiddle - React, Tailwind, and code Playground

by Vasiliy

HTML

<div class="scrollable" id="adoricDTMenRandomItemCarousel">
    <div class="items">
        <div class="adoricDTCarouselSlide">
            <a href="https://www.factory54.co.il/men/products/JT-Oversized-Hooded-Worker-Shirt-in-Red-No-204" style="height: 100%; display: block; text-decoration: none; outline: none; border: none;">
                <div style="width: 136px; height: 135px; margin: 0 auto 10px auto;">
                    <img class="adoricItemImgPath" src="https://res-2.cloudinary.com/drqbzjpt5/image/upload/s--uEefhtM---/q_auto:best,f_auto/v1/media/catalog/product/5/5/550037204_1.jpg" data-event-name="Conversion" data-shadow-distance="0" style="height: 100%; opacity: 1; box-shadow: none; border-radius: 0px;">
                </div>
                <span class="adoricLbItemBrand" data-gramm="false" data-shadow-distance="0" style="overflow: hidden; max-height: 10px; color: rgb(0, 0, 0); font-style: normal; font-variant: normal; font-weight: 700; font-size: 10px; line-height: 1; font-family: 'Noto Sans', sans-serif; white-space: pre-line; overflow-wrap: break-word; display: block; opacity: 1; text-align: inherit; letter-spacing: 0em; margin-right: 0em; text-shadow: none;" data-width="NaN" data-height="NaN" data-left="NaN" data-top="NaN">LEVI`S</span>
                <span class="adoricLbItemDescr" data-gramm="false" data-shadow-distance="0" style="overflow: hidden; max-height: 16px; color: rgb(0, 0, 0); font-style: normal; font-variant: normal; font-weight: normal; font-size: 8px; line-height: 2; font-family: 'Noto Sans', sans-serif; white-space: pre-line; overflow-wrap: break-word; display: block; opacity: 1; text-align: inherit; letter-spacing: 0em; margin-right: 0em; text-shadow: none;">JT Oversized Hooded Worker Shirt in Red</span>
                <span data-gramm="false" data-shadow-distance="0" style="color: rgb(0, 0, 0); font-style: normal; font-variant: normal; font-weight: normal; font-size: 10px; line-height: 1; font-family: 'Noto Sans',...

CSS

.scrollable {
  height: 633px;
  width: 137px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.adoricNewItemPrice {
  font-size: 11px;
  color: rgb(180, 49, 40);
}

.adoricOldItemPrice {
  direction: rtl;
  text-decoration: line-through;
  font-size: 11px;
}

.adoricDTCarouselSlide {
  height: 202px;
  margin-bottom: 10px;
}

.items {
  -webkit-animation: scroll 23s linear 1 forwards;
  -moz-animation: scroll 23s linear 1 forwards;
  -ms-animation: scroll 23s linear 1 forwards;
}

@-webkit-keyframes scroll {
  3.99% {
    margin-top: 0;
  }
  10% {
    margin-top: 0;
  }
  13.99% {
    margin-top: -155%;
  }
  20% {
    margin-top: -155%;
  }
  23.99% {
    margin-top: -310%;
  }
  30% {
    margin-top: -310%;
  }
  33.99% {
    margin-top: -465%;
  }
  40% {
    margin-top: -465%;
  }
  43.99% {
    margin-top: -620%;
  }
  50% {
    margin-top: -620%;
  }
  53.99% {
    margin-top: -775%;
  }
  60% {
    margin-top: -775%;
  }
  63.99% {
    margin-top: -930%;
  }
  70% {
    margin-top: -930%;
  }
  73.99% {
    margin-top: -1085%;
  }
  80% {
    margin-top: -1085%;
  }
  83.99% {
    margin-top: -1240%;
  }
  90% {
    margin-top: -1240%;
  }
  93.99% {
    margin-top: -1395%;
  }
  100% {
    margin-top: -1395%;
  }
}

@-moz-keyframes scroll {
  3.99% {
    margin-top: 0;
  }
  10% {
    margin-top: 0;
  }
  13.99% {
    margin-top: -155%;
  }
  20% {
    margin-top: -155%;
  }
  23.99% {
    margin-top: -310%;
  }
  30% {
    margin-top: -310%;
  }
  33.99% {
    margin-top: -465%;
  }
  40% {
    margin-top: -465%;
  }
  43.99% {
    margin-top: -620%;
  }
  50% {
    margin-top: -620%;
  }
  53.99% {
    margin-top: -775%;
  }
  60% {
    margin-top: -775%;
  }
  63.99% {
    margin-top: -930%;
  }
  70% {
    margin-top: -930%;
  }
  73.99% {
    margin-top: -1085%;
  }
  80% {
    margin-top: -1085%;
  }
  83.99% {
    margin-top: -1240%;
  }
  90% {
    margin-top: -1240%;
  }
  93.99% {
    margin-top: -1395%;
 ...

JavaScript

(function () {
  var xml = new XMLHttpRequest();
  xml.onreadystatechange = function() {
    if (this.status === 200 && this.readyState === 4) {
      var indexes = [];
      var parser = new DOMParser();
      var resDoc = parser.parseFromString(this.responseText, "text/html");
      var catItems = resDoc.querySelectorAll('.woman_item');
      var lbItems = document.querySelectorAll('#adoricDTMenRandomItemCarousel .adoricDTCarouselSlide');

      while(indexes.length < 12){
        var r = Math.floor(Math.random()*14) + 1;
        if(indexes.indexOf(r) === -1) indexes.push(r);
      }

      for (var i = 0; i < lbItems.length; i++) {
        lbItems[i].querySelector('.adoricItemImgPath').setAttribute('src', catItems[indexes[i]].querySelector('FIGURE A > IMG').getAttribute('data-src'));
        lbItems[i].querySelector('.adoricLbItemBrand').innerText = catItems[indexes[i]].querySelector('H2 A').innerText.toUpperCase();
        lbItems[i].querySelector('.adoricLbItemDescr').innerText = catItems[indexes[i]].querySelector('P A').innerText;
        lbItems[i].querySelector('A').setAttribute('href', catItems[indexes[i]].querySelector('H2 A').getAttribute('href'));
        lbItems[i].querySelector('.adoricNewItemPrice').innerText = (catItems[indexes[i]].querySelector('[id^="product-price"]').innerText).replace(/[^0-9,]/g, "");
        lbItems[i].querySelector('.adoricOldItemPrice').innerText = (catItems[indexes[i]].querySelector('[id^="old-price"]').innerText).replace(/[^0-9,]/g, "");
      }

    }
  };
  xml.open('GET', 'https://www.factory54.co.il/men/sale-fw18-men');
  xml.send();
})()