JSFiddle - React, Tailwind, and code Playground

by ledak

HTML

<div class="face-product-grid wrapper fc">
        
                <a href="/collection/frontpage/product/supierosvietfioliet50ml-superschiarente-viola-kiemon" class="product fl frontpage_product" style="background-image: url(http://static2.insales.ru/images/products/1/1491/6235603/thumb_2314.jpg); display: none; background-position: 50% 50%; background-repeat: no-repeat no-repeat;">
        <!-- <a href="/collection/frontpage/product/supierosvietfioliet50ml-superschiarente-viola-kiemon" class="product fl" style="background-image:url(http://static2.insales.ru/images/products/1/1491/6235603/medium_2314.jpg)"> -->
                <div class="title">1007 суперосвет.фиолет.50мл Superschiarente Viola Kemon</div>
                <div class="price fr">798.20 руб</div>
        </a>
        
                <a href="/collection/frontpage/product/745-mandarin-80ml-mandarino-kemon" class="product fl frontpage_product" style="background-image: url(http://static2.insales.ru/images/products/1/7681/6053377/thumb_68376_2_.jpg); display: none; background-position: 50% 50%; background-repeat: no-repeat no-repeat;">
        <!-- <a href="/collection/frontpage/product/745-mandarin-80ml-mandarino-kemon" class="product fl" style="background-image:url(http://static2.insales.ru/images/products/1/7681/6053377/medium_68376_2_.jpg)"> -->
                <div class="title">7,45 мандарин 80мл Mandarino Kemon</div>
                <div class="price fr">650.80 руб</div>
        </a>
        
                <a href="/collection/frontpage/product/73-ruszolot80ml-biondo-medio-dorato-performance-hd-kemon" class="product fl frontpage_product" style="background-image: url(http://static2.insales.ru/images/products/1/5133/6239245/thumb_Performance_HD_4dc25dbcede87.jpg); display: none; background-position: 50% 50%; background-repeat: no-repeat no-repeat;">
        <!-- <a href="/collection/frontpage/product/73-ruszolot80ml-biondo-medio-dorato-performance-hd-kemon" class="product fl"...

JavaScript

var alist = document.querySelectorAll('.face-product-grid a'),
    total = alist.length,
    i = 0, l = 0, t = 0;
function carusel() {
  if(i >= total-1) i = 0;
  for(l = i + 5; i<l; i++) {
    alist[i].style.display = 'none';
    t = (i > total-6) ? i - total : i;
    alist[t+5].style.display = 'block';     
  }
  setTimeout(carusel, 300);    
}
carusel();