JSFiddle - React, Tailwind, and code Playground

by Taras Pyatyhorskyy

HTML

<div class="main-slider">
<div class="main-slide-1">
                <div class="main-text">
                <h1 class="main-text__title">
                  Производство упаковки из гофрокартона
                </h1>
                <!-- /.main-text__title -->
                <div class="main-text__subtitle">
                  с доставкой по всей России
                </div>
                <!-- /.main-text__subtitle -->
                <div class="main-text__form">
                  <div class="form-title">
                    Получите индивидуальное предложение
                    на производство и поставку гофропродукции
                    <span class="form-title__important">
                      Образцы упаковки бесплатно!
                    </span>
                  </div>
</div>
<div class="main-slide-2">
  <div class="main-text">
              <div class="main-text">
                <h1 class="main-text__title">
                  Производство упаковки из гофрокартона
                </h1>
                <!-- /.main-text__title -->
                <div class="main-text__subtitle">
                  с доставкой по всей России
                </div>
                <!-- /.main-text__subtitle -->
                <div class="main-text__form">
                  <div class="form-title">
                    Получите индивидуальное предложение
                    на производство и поставку гофропродукции
                    <span class="form-title__important">
                      Образцы упаковки бесплатно!
                    </span>
                  </div>
</div>
</div>

CSS

.main-slide-1 {
  background: #373737 url("https://s18.postimg.org/o3tnpswph/main-bg.jpg") center no-repeat;
  padding: 65px 0 60px 0;
  background-size: cover;
  overflow: hidden;
  color: #ffffff;
  z-index: 1;
}

.main-slide-2 {
  background: #373737 url("https://s18.postimg.org/v71j5fhkl/main-bg-two.png") center no-repeat;
  padding: 65px 0 60px 0;
  background-size: cover;
  overflow: hidden;
  color: #ffffff;
  z-index: 1;
}

JavaScript

$('.main-slider').slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: true,
      centerMode: true,
      fade: true,
      autoplay: false,
      autoplaySpeed: 3000,
      cssEase: 'linear'
      
      });