JSFiddle - React, Tailwind, and code Playground

by Johan Muller

HTML

<link rel="stylesheet" href="http://idangero.us/swiper/dist/css/swiper.min.css">
<script src="http://idangero.us/swiper/dist/js/swiper.min.js"></script>
<div class="circle-slider-parent">
  <div class="swiper-container">
    <div class="swiper-wrapper">

      <div class="swiper-slide">
        <div class="cs-title state-init">
          <span>
            Резервуары
          </span>
        </div>
        <div class="cs-circle state-init" data-index="0"></div>
        <div class="cs-details state-init">
          <span>
            Хранение химических веществ
          </span>
        </div>
      </div>

      <div class="swiper-slide">
        <div class="cs-title state-init">
          <span>
            Пожарная безопастность
          </span>
        </div>
        <div class="cs-circle state-init" data-index="1"></div>
        <div class="cs-details state-init">
          <span>
            Системы пожаротушения
          </span>
        </div>
      </div>

      <div class="swiper-slide">
        <div class="cs-title state-init">
          <span>
            Резервуары безопастность
          </span>
        </div>
        <div class="cs-circle state-init" data-index="2"></div>
        <div class="cs-details state-init">
          <span>
            Хранение химических веществ
          </span>
        </div>
      </div>

      <div class="swiper-slide">
        <div class="cs-title state-init">
          <span>
            Пожарная
          </span>
        </div>
        <div class="cs-circle state-init" data-index="3"></div>
        <div class="cs-details state-init">
          <span>
            Системы пожаротушения
          </span>
        </div>
      </div>

      <div class="swiper-slide">
         <div class="cs-title state-init">
         <span>
            Пожарная безопастность
          </span>
        </div>
        <div class="cs-circle state-init" data-index="4"></div>
        <div class="cs-details state-init">
          <span>
     ...

SCSS

.circle-slider-parent  {
  position: relative;
  display: block;
  width: 570px;
  height: 515px;
  background: #0072bb;
  .swiper-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .swiper-wrapper {
    height: 100%;
  }
  .swiper-slide {
    position: relative;
    display: block;
    float: left;
    width: 285px;
    height: 100%;
    overflow: hidden;
  }
  .cs-title {
    display: block;
    position: absolute;
    top: 40px;
    left: 0;
    width: 100%;
    height: 70px;
    text-align: center;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .5s, transform .5s;
    &:before {
      content: '';
      display: inline-block;
      vertical-align: middle;
      height: 100%;
      width: 1px;
      margin-left: -3px;
    }
    span {
      display: inline-block;
      vertical-align: middle;
      width: 90%;
      font-size: 20px;
      text-transform: uppercase;
      color: #fff;
      font-family: sans-serif;
      font-weight: bold;
    }
  }
  .cs-details {
    display: block;
    position: absolute;
    bottom: 70px;
    left: 0;
    width: 100%;
    height: 120px;
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .5s, transform .5s;
    &:before {
      content: '';
      display: inline-block;
      vertical-align: middle;
      height: 100%;
      width: 1px;
      margin-left: -3px;
    }
    span {
      display: inline-block;
      vertical-align: middle;
      width: 90%;
      font-size: 15px;
      line-height: 20px;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: #fff;
      font-family: sans-serif;
      font-weight: bold;
    }
  }
  .cs-circle {
    display: block;
    position: absolute;
    cursor: pointer;
    user-select: none;
    width: 176px;
    height: 176px;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -88px;
    background-color: #fff;
    background-image:...

JavaScript

$('.swiper-container').swiper({
	autoplay: 5000,
  speed: 500,
  loop: true,
  loopedSlides: 12,
  loopAdditionalSlides: 12,
  roundLengths: true,
  centeredSlides: true,
  slidesPerView: 'auto',
  cssWidthAndHeight: false,
  visibilityFullFit: true,
  pagination: '.cs-pager',
  paginationClickable: true,
  onlyExternal: true,
  slideToClickedSlide: true,
  onInit:function(){
    setTimeout(function(){
    	$('.state-init').removeClass('state-init');
    }, 500);
  }
});