JSFiddle - React, Tailwind, and code Playground

by Vasilii Chugunov

HTML

<div class="container">
  <div id="slider">
    <div class="sidebar">
      <div class="control active" data-id="1">
        slide 1
      </div>
      <div class="control" data-id="2">
        slide 2
      </div>
      <div class="control" data-id="3">
        slide 3
      </div>
          </div>
    <div class="slide-wrapper">
      <div class="slide active " data-id="1">
        <img src="https://via.placeholder.com/960x640" alt="">
        <div class="title">Какая-то картинка.</div>
      </div>
      <div class="slide" data-id="2">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/gD7BDFXJlmc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>
      <div class="slide" data-id="3">
      <div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis accusantium ab obcaecati unde. Excepturi accusantium accusamus explicabo fugiat nobis debitis, autem delectus nulla animi eum quasi dolore, laudantium quis repellat voluptates corrupti itaque dolores, vel iusto blanditiis, asperiores voluptatum aperiam praesentium saepe? Esse temporibus, laudantium asperiores, vitae magnam optio necessitatibus! </div>
        <img src="https://via.placeholder.com/960x640" alt="">
        <div class="title">Какая-то другая картинка.</div>
      </div>
    </div>
  </div>
</div>

CSS

.container {
  width: 640px;
  margin: 10px auto;
}

#slider {
  width: 100%;
  display: flex;
}

#slider .slide {
  position: absolute;
  display: flex;
  align-items: center;
  height: 100%;
  width: 100%;
  justify-content: center;
  opacity: 0;
  transition: all 0.5s;
}

#slider .control {
  width: 50px;
  cursor: pointer;
  padding: 5px;
}

#slider .slide-wrapper {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 300px;
}

#slider .slide-wrapper .slide>* {
  width: 100%;
}

#slider .slide.active {
  opacity: 1
}

#slider .control.active {
  background-color: blue;
  color: white;
}
#slider .slide .title{
  transform: translateX(300px);
  position: absolute;
  left: 50px;
  transition: all 1s;
  bottom: 50px;
  font-size: 2rem;
}
#slider .slide.active .title{
  transform: translateX(0px);
}
#slider .slide .description{
  transform: translateX(-300px);
  position: absolute;
  left: 15px;
  transition: all 1s;
  top: 50px;
  }
#slider .slide.active .description{
  transform: translateX(0px);
}

JavaScript

/* $('#slider .control').click(function() {
  var dataId = $(this).attr('data-id')
  $('#slider .slide').removeClass('active')
  $('#slider .slide[data-id=' + dataId + ']').addClass('active');
  $('#slider .control').removeClass('active')
  $(this).addClass('active')
}) */

createSlider('#slider', '.control', '.slide', 'active');



/** Library */
function createSlider(sliderSelector, controlSelector, slideSelector, activeClass) {
	$(sliderSelector + ' ' + controlSelector).click(function() {
    var dataId = $(this).attr('data-id')
    $(sliderSelector + ' ' + slideSelector).removeClass('active')
    $(sliderSelector + ' ' + slideSelector + '[data-id=' + dataId + ']').addClass(activeClass);
    $(sliderSelector + ' ' + controlSelector).removeClass(activeClass)
    $(this).addClass('active')
  })
}