JSFiddle - React, Tailwind, and code Playground

by Варлам Ерофеич

HTML

<header>
<h1>WGSHOP</h1>
</header>
<div id="slider" class="slider">
    <ol class="slider__indicators">
      <li class="slider__indicator slider__indicator_active" data-slide-to="0"></li>
      <li class="slider__indicator" data-slide-to="1"></li>
      <li class="slider__indicator" data-slide-to="2"></li>

    </ol>
    <div class="slider__items">
      <div class="slider__item slider__item_active">
        <a href="#"><div class="textimg1"><img src="https://static-pss-ru.wgcdn.co/shop/media/carousel/58/4f/584fce62aa8b458b96f310acd056e1f2.jpg" alt="c1"><span class="textimg">Бонусы и скидки<br>февраля</span></div></a>
      </div>


      <div class="slider__item">
       <a href="#"><img src="source/img/own4.jpg" alt="c1"></a>
      </div>
	  <div class="slider__item">
        <a href="#"><img src="source/img/own5.jpg" alt="c1"></a>
      </div>
    </div>
    <a class="slider__control slider__control_prev" href="#" role="button"></a>
    <a class="slider__control slider__control_next" href="#" role="button"></a>
  </div>

CSS

*{
	margin: 0;
	padding: 0;
}
html, body{
	width: 100%;
	height: 100%;
}
body{
	font-family: "WarheliosBold_Web","Arial Narrow",Tahoma,arial,sans-serif;
	background-image: url(../source/img/background.jpg);
}
header{
	background: #232323;
}
h1{
	margin-left: 100px;
	color: #999;
}
header a{
	text-decoration: none;
	display: inline-block;
}
a{
	text-decoration: none;
	color: #fff;
}


.logoimg{
	/*width: 3%;*/
	width: 50px;
	height: 50px;
	position: absolute;
	user-select: none;
	margin-left: 2%; /* отступ слева = 100% минус ширина .slider */
}

/* Слайдер */

.slider {
      /* устанавливаем относительное позиционирование элементу */
	  cursor: pointer;
	  margin-left: 2%;
	  margin-top: 50px;
      position: relative;
      display: inline-block;
      width: 96%; /* ширина .slider = 100% минус отступ слева умноженный на 2 */
    }

    .slider__items {
      /* устанавливаем относительное позиционирование элементу */
      position: relative;
      /* устанавливаем элементу ширину, равную 100% от родителя */
      width: 100%;
      overflow: hidden;
    }

    .slider__item {
      /* устанавливаем относительное позиционирование элементу */
      position: relative;
      /* отключаем по умолчанию отображение всех слайдов */
      display: none;
      /* устанавливаем элементу ширину, равную 100% */
      width: 100%;
      /* длительность анимации трансформации */
      transition: transform 0.6s ease;
      /* не показывать обратную сторону трансформируемого элемента */
      backface-visibility: hidden;
    }

    .slider__item_active,
    .slider__item_next,
    .slider__item_prev {
      /* отображаем слайд, если он имеет один из этих классов */
      display: block;
    }

    .slider__item_next,
    .slider__item_prev {
      /* устанавливаем абсолютное позиционирование для элемента, на который будет сменяться слайд (на время трансформации) */
      position: absolute;
      /* устанавливаем положение элемента, т.е. координату top */
      top: 0;
   ...