JSFiddle - React, Tailwind, and code Playground

by satantx

HTML

<script src="http://www.slidesjs.com/js/jquery.slides.min.js"></script>
<div class="slider-block">
    <div class="over-text">Головные уборы</div>
    <div class="slides">
        <div class="slide">
            <div class="image"><a href=""><img src="http://placeimg.com/150/150/any" alt=""></a></div>
            <div class="image"><a href=""><img src="http://placeimg.com/150/150/nature" alt=""></a></div>
            <div class="image"><a href=""><img src="http://placeimg.com/150/150/arch" alt=""></a></div>
        </div>
        <div class="slide">
            <div class="image"><a href=""><img src="http://placeimg.com/150/150/any" alt=""></a></div>
            <div class="image"><a href=""><img src="http://placeimg.com/150/150/any" alt=""></a></div>
            <div class="image"><a href=""><img src="http://placeimg.com/150/150/any" alt=""></a></div>
        </div>
        <div class="slide">
            <div class="image"><a href=""><img src="http://placeimg.com/150/150/any" alt=""></a></div>
            <div class="image"><a href=""><img src="http://placeimg.com/150/150/any" alt=""></a></div>
            <div class="image"><a href=""><img src="http://placeimg.com/150/150/any" alt=""></a></div>
        </div>
    </div>
 </div>
 
                
<div class="slider-block">
    <div class="over-text">Защита головы и лица</div>
    <div class="slides">
        <div class="slide">
            <div class="image"><a href=""><img src="http://placeimg.com/150/150/any" alt=""></a></div>
            <div class="image"><a href=""><img src="http://placeimg.com/150/150/people" alt=""></a></div>
            <div class="image"><a href=""><img src="http://placeimg.com/150/150/tech" alt=""></a></div>
        </div>
        <div class="slide">
            <div class="image"><a href=""><img src="http://placeimg.com/150/150/any" alt=""></a></div>
            <div class="image"><a href=""><img src="http://placeimg.com/150/150/any" alt=""></a></div>
            <div...

CSS

body {
    padding: 50px;
    font-family: 'Ubuntu';
}

.slider-block {
    width: 300px;
    height: 100px;
    position: relative;
    float: left;
    padding-left: 150px;
}

.slider-block .over-text {
    content: '';
    width: 90px;
    height: 60px;
    position: absolute;
    right: 300px; top: 0;
    /* background: url(http://d503.ru/img/111.png); */
    z-index: 1000;
    font-size: 16px;
    line-height: 18px;
    color: #000;
    background: #FFC100;
    padding: 20px;
}

.slides {
    width: 300px;
    height: 100px;
    position: relative;
}

.slides .slide {
    width: 300px;
    height: 100px;
}

.slides .slide .image {
    display: table-cell;
    vertical-align: middle;
    width: 100px;
    height: 100px;
}

.slides .slide .image img {
    width: 100px;
     height: 100px;
}

JavaScript

$('.slides').slidesjs({
    width: 300,
    height: 100,
    navigation: false,
    play: {
      active: true,
      effect: "fade",
      interval: 3000,
      auto: true,
      swap: false,
      pauseOnHover: false,
      restartDelay: 2500
    }
});