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://spec-odezhda37.ru/upload/resize_cache/iblock/850/190_190_1ca09aa1aec2d2d8ff277a0f742047748/8504fa837e15f259d2386c8c500bcf4b.jpg" alt=""></a></div>
        </div>
        <div class="slide">
            <div class="image"><a href=""><img src="http://spec-odezhda37.ru/upload/resize_cache/iblock/850/190_190_1ca09aa1aec2d2d8ff277a0f742047748/8504fa837e15f259d2386c8c500bcf4b.jpg" alt=""></a></div>
        </div>
        <div class="slide">
            <div class="image"><a href=""><img src="http://spec-odezhda37.ru/upload/resize_cache/iblock/850/190_190_1ca09aa1aec2d2d8ff277a0f742047748/8504fa837e15f259d2386c8c500bcf4b.jpg" alt=""></a></div>
        </div>
    </div>
 </div>

CSS

body {
    padding: 50px;
}

.slider-block {
    width: 213px;
    height: 200px;
    position: relative;
    text-align: center;
}

.slider-block .over-text {
    content: '';
    width: 213px;
    height: 69px;
    position: absolute;
    left: -6px; bottom: -57px;
    background: url(http://d503.ru/img/111.png);
    z-index: 1000;
    line-height: 60px;
    font-size: 15px;
    color: #000;
}

.slides {
    width: 200px;
    height: 200px;
    position: relative;
    border: 1px solid #C09100;
    
}



.slides .slide {
    width: 200px;
    height: 200px;
}

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

JavaScript

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