4

Есть такой код с кастомной пагинацией для слайдера

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Swiper demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">


</head>

<body>
  <!-- Swiper -->
  <div class="swiper-container timeline-dates">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <div>1949</div>
      </div>
      <div class="swiper-slide">
        <div>1954</div>
      </div>
      <div class="swiper-slide">
        <div>1965</div>
      </div>
      <div class="swiper-slide">
        <div>1968</div>
      </div>
      <div class="swiper-slide">
        <div>1974</div>
      </div>
      <div class="swiper-slide">
        <div>1986</div>
      </div>
      <div class="swiper-slide">
        <div>1995</div>
      </div>
      <div class="swiper-slide">
        <div>2005</div>
      </div>
      <div class="swiper-slide">
        <div>2011</div>
      </div>
      <div class="swiper-slide">
        <div>2018</div>
      </div>
    </div>
  </div>

  <div class="swiper-container timeline-contents">
    <div class="swiper-wrapper">

      <div class="swiper-slide">
        <h5>Lorem ipsum dolor sit amet</h6>
          <p>Donec vitae nibh nunc. Quisque in rhoncus augue. Nam eleifend in ligula volutpat vestibulum. Morbi sodales congue odio, ac ornare sem sagittis pharetra. Praesent ullamcorper nisi ut lectus bibendum, eleifend commodo nibh gravida. Donec volutpat
            porttitor vehicula. Aenean consequat, dui vitae sagittis consectetur, risus nulla lacinia elit, quis aliquam risus est at lectus. In quis luctus lectus, ac mattis felis. Integer non feugiat diam. Aenean ut turpis bibendum, imperdiet mauris
            a, dictum enim. Ut sed lacus posuere libero dignissim finibus. Nulla et eros bibendum, congue justo ut, interdum neque. In laoreet placerat pretium. Praesent sed libero nec arcu tincidunt efficitur vestibulum nec erat.</p>
      </div>

      <div class="swiper-slide">
        <h5>Sed ultrices magna lorem</h6>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean aliquet augue metus, ut ultrices ex euismod vel. Morbi accumsan condimentum dictum. Ut sed mi nec tortor accumsan iaculis sed vel urna. Curabitur pharetra, nunc a volutpat ultrices,
            quam mi congue diam, ac mollis ante felis ac eros. Nunc varius ut sapien at ornare. Etiam pellentesque magna quis est lacinia, in tempor massa tempor. Mauris condimentum nisi sed ligula ultricies, vitae tempus enim auctor. Integer et diam
            condimentum, pulvinar risus eu, lacinia tortor. Phasellus nisi felis, bibendum in mauris a, varius congue diam. Proin semper massa lacus, tempus placerat nisl consequat id. Maecenas scelerisque consequat dapibus.</p>
      </div>

      <div class="swiper-slide">
        <h5>Pellentesque nec ligula lectus</h6>
          <p>Phasellus quis laoreet arcu. Integer fringilla pellentesque arcu vel malesuada. Vestibulum vel venenatis arcu, eget ullamcorper ante. Sed bibendum laoreet sapien vitae scelerisque. Donec id mollis erat. Fusce at diam consectetur lorem gravida
            fringilla in ac sem. Ut in ipsum at enim commodo vestibulum sed vitae lectus. Praesent libero mi, elementum a tortor quis, suscipit pretium magna. Curabitur nec bibendum orci. Donec dapibus malesuada lorem vitae tincidunt.</p>
      </div>

      <div class="swiper-slide">
        <h5>Praesent accumsan vulputate fermentum</h6>
          <p>Donec nulla ex, feugiat sed felis ut, dapibus dapibus urna. Morbi placerat id arcu vitae egestas. Ut lorem lacus, dignissim elementum nunc sit amet, convallis placerat purus. Nunc laoreet id felis et mollis. Nam id magna eu mi convallis euismod.
            Quisque suscipit a erat at vestibulum. Donec convallis nisi quis pretium elementum. Phasellus massa sem, molestie sit amet dui eu, bibendum ornare velit. Curabitur porttitor egestas enim, vel pretium eros. Sed feugiat mi lorem, nec porttitor
            massa ornare ut. Phasellus vitae bibendum libero. Duis sed odio ex. In in nisl mi. Phasellus vitae auctor dolor, ut pretium nisi. Fusce consequat dolor quis mi eleifend blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
            posuere cubilia Curae.</p>
      </div>

      <div class="swiper-slide">
        <h5>Donec sed erat fermentum</h6>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultrices magna lorem, vel scelerisque sapien blandit ac. Pellentesque nec ligula lectus. Praesent accumsan vulputate fermentum. Donec sed erat fermentum, porttitor justo quis, pretium
            dui. Sed pellentesque, enim in euismod hendrerit, velit nisi scelerisque eros, eleifend vehicula ante sem sed lorem. Phasellus nulla nisl, tristique vel ipsum cursus, pellentesque gravida odio. Morbi efficitur sit amet nunc eu vulputate. Donec
            non interdum dui.</p>
      </div>

      <div class="swiper-slide">
        <h5>Lorem ipsum dolor sit amet</h6>
          <p>Donec vitae nibh nunc. Quisque in rhoncus augue. Nam eleifend in ligula volutpat vestibulum. Morbi sodales congue odio, ac ornare sem sagittis pharetra. Praesent ullamcorper nisi ut lectus bibendum, eleifend commodo nibh gravida. Donec volutpat
            porttitor vehicula. Aenean consequat, dui vitae sagittis consectetur, risus nulla lacinia elit, quis aliquam risus est at lectus. In quis luctus lectus, ac mattis felis. Integer non feugiat diam. Aenean ut turpis bibendum, imperdiet mauris
            a, dictum enim. Ut sed lacus posuere libero dignissim finibus. Nulla et eros bibendum, congue justo ut, interdum neque. In laoreet placerat pretium. Praesent sed libero nec arcu tincidunt efficitur vestibulum nec erat.</p>
      </div>

      <div class="swiper-slide">
        <h5>Sed ultrices magna lorem</h6>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean aliquet augue metus, ut ultrices ex euismod vel. Morbi accumsan condimentum dictum. Ut sed mi nec tortor accumsan iaculis sed vel urna. Curabitur pharetra, nunc a volutpat ultrices,
            quam mi congue diam, ac mollis ante felis ac eros. Nunc varius ut sapien at ornare. Etiam pellentesque magna quis est lacinia, in tempor massa tempor. Mauris condimentum nisi sed ligula ultricies, vitae tempus enim auctor. Integer et diam
            condimentum, pulvinar risus eu, lacinia tortor. Phasellus nisi felis, bibendum in mauris a, varius congue diam. Proin semper massa lacus, tempus placerat nisl consequat id. Maecenas scelerisque consequat dapibus.</p>
      </div>

      <div class="swiper-slide">
        <h5>Pellentesque nec ligula lectus</h6>
          <p>Phasellus quis laoreet arcu. Integer fringilla pellentesque arcu vel malesuada. Vestibulum vel venenatis arcu, eget ullamcorper ante. Sed bibendum laoreet sapien vitae scelerisque. Donec id mollis erat. Fusce at diam consectetur lorem gravida
            fringilla in ac sem. Ut in ipsum at enim commodo vestibulum sed vitae lectus. Praesent libero mi, elementum a tortor quis, suscipit pretium magna. Curabitur nec bibendum orci. Donec dapibus malesuada lorem vitae tincidunt.</p>
      </div>

      <div class="swiper-slide">
        <h5>Praesent accumsan vulputate fermentum</h6>
          <p>Donec nulla ex, feugiat sed felis ut, dapibus dapibus urna. Morbi placerat id arcu vitae egestas. Ut lorem lacus, dignissim elementum nunc sit amet, convallis placerat purus. Nunc laoreet id felis et mollis. Nam id magna eu mi convallis euismod.
            Quisque suscipit a erat at vestibulum. Donec convallis nisi quis pretium elementum. Phasellus massa sem, molestie sit amet dui eu, bibendum ornare velit. Curabitur porttitor egestas enim, vel pretium eros. Sed feugiat mi lorem, nec porttitor
            massa ornare ut. Phasellus vitae bibendum libero. Duis sed odio ex. In in nisl mi. Phasellus vitae auctor dolor, ut pretium nisi. Fusce consequat dolor quis mi eleifend blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
            posuere cubilia Curae.</p>
      </div>

      <div class="swiper-slide">
        <h5>Donec sed erat fermentum</h6>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultrices magna lorem, vel scelerisque sapien blandit ac. Pellentesque nec ligula lectus. Praesent accumsan vulputate fermentum. Donec sed erat fermentum, porttitor justo quis, pretium
            dui. Sed pellentesque, enim in euismod hendrerit, velit nisi scelerisque eros, eleifend vehicula ante sem sed lorem. Phasellus nulla nisl, tristique vel ipsum cursus, pellentesque gravida odio. Morbi efficitur sit amet nunc eu vulputate. Donec
            non interdum dui.</p>
      </div>

    </div>
  </div>

  <!-- Swiper JS -->
  <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var swiper_date = new Swiper('.timeline-dates', {
      slidesPerView: 4,
      spaceBetween: 30,
      centeredSlides: true,
      slideToClickedSlide: true,
      navigation: {
        nextEl: '.timeline-button-next',
        prevEl: '.timeline-button-prev',
      },
    });
    var swiper_info_date = new Swiper('.timeline-contents', {
      allowTouchMove: false
    });

    swiper_date.controller.control = swiper_info_date;
  </script>
</body>

</html>

Нашел рабочий вариант как сделать такой слайдер, через 2 и общее управление для них. Как сверстать верхнюю часть с датами как по ссылке.(хотя бы примерно). Хочу сделать слайдер на подобии того что тут http://www.omskcarbongroup.com/company/ Подскажите как правильно такой сделать

4
  • Очень красивый еффект =) Commented 17 февр. 2021 в 19:19
  • @Давид Манжула да, понять бы как ещё что-то похоже сверстать(
    – zxcqwe
    Commented 17 февр. 2021 в 19:56
  • дак возьмите у них прям с версткой и кодом там slick slider
    – rodigy
    Commented 18 февр. 2021 в 0:34
  • @Вадим так посмотрите в коде страницы, там куча дивов, да сверстаете. Не уверен, но возможно, что какая-то карусель.
    – Need_Code
    Commented 18 февр. 2021 в 5:32

2 ответа 2

5

var swiper_date = new Swiper('.timeline-dates .swiper-container', {
  slidesPerView: 3,
  spaceBetween: 0,
  centeredSlides: true,
  slideToClickedSlide: true,
  navigation: {
    nextEl: '.timeline-button-next',
    prevEl: '.timeline-button-prev'
  }
});
var swiper_info_date = new Swiper('.timeline-contents', {
  allowTouchMove: false,
  on: {
    slideChange: function (e) {
      swiper_date.slideToLoop(e.realIndex, 0);
    }
  }
});

swiper_date.controller.control = swiper_info_date;
body {
  background: #304ffe;
  font-family: Proxima Nova,sans-serif;
  font-weight: 400;
  color: #fff;
}

.timeline-dates {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.timeline-dates .timeline-button-prev,
.timeline-dates .timeline-button-next {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 auto;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  border: 1px solid white;
  box-sizing: border-box;
  cursor: pointer;
}

.timeline-dates .swiper-container {
  height: 1.5em;
  background: linear-gradient(0deg, white, white) no-repeat center bottom calc(.75em + .5px) / 100% 1px;
  margin: 0 .5em;
  padding-top: 5em;
}

.timeline-dates .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: flex-end;
  height: 1.5em;
  padding-bottom: 1px;
  position: relative;
  cursor: pointer;
}

.timeline-dates .swiper-slide::before,
.timeline-dates .swiper-slide::after {
  content: '';
  display: block;
  border-radius: 50%;
  position: absolute;
  box-sizing: border-box;
  margin-bottom: 1px;
  transition: all .3s linear;
}

.timeline-dates .swiper-slide::before {
  width: 1em;
  height: 1em;
  border: 1px solid rgba(255,255,255,.5);
  background: rgba(255,255,255,.25);
}

.timeline-dates .swiper-slide::after {
  width: .5em;
  height: .5em;
  background: white;
}

.timeline-dates .swiper-slide > div {
  display: inline-block;
  transform: translateY(-100%);
}

.timeline-dates .swiper-slide.swiper-slide-active::before {
  width: 1.5em;
  height: 1.5em;
}

.timeline-dates .swiper-slide.swiper-slide-active > div {
  font-size: 3em;
  transform: translateY(-75%);
}

.as-console-row-code.as-console-info {
  z-index: 99999;
}
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<link href="https://unpkg.com/swiper/swiper-bundle.min.css" rel="stylesheet" />
<!-- Swiper -->
<div class="timeline-dates">
  <div class="timeline-button-prev">←</div>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><div>1949</div></div>
      <div class="swiper-slide"><div>1954</div></div>
      <div class="swiper-slide"><div>1965</div></div>
      <div class="swiper-slide"><div>1968</div></div>
      <div class="swiper-slide"><div>1974</div></div>
      <div class="swiper-slide"><div>1986</div></div>
      <div class="swiper-slide"><div>1995</div></div>
      <div class="swiper-slide"><div>2005</div></div>
      <div class="swiper-slide"><div>2011</div></div>
      <div class="swiper-slide"><div>2018</div></div>
    </div>
  </div>
  <div class="timeline-button-next">→</div>
</div>

<div class="swiper-container timeline-contents">
  <div class="swiper-wrapper">

    <div class="swiper-slide">
      <h5>Lorem ipsum dolor sit amet</h6>
        <p>Donec vitae nibh nunc. Quisque in rhoncus augue. Nam eleifend in ligula volutpat vestibulum. Morbi sodales congue odio, ac ornare sem sagittis pharetra. Praesent ullamcorper nisi ut lectus bibendum, eleifend commodo nibh gravida. Donec volutpat
          porttitor vehicula. Aenean consequat, dui vitae sagittis consectetur, risus nulla lacinia elit, quis aliquam risus est at lectus. In quis luctus lectus, ac mattis felis. Integer non feugiat diam. Aenean ut turpis bibendum, imperdiet mauris a,
          dictum enim. Ut sed lacus posuere libero dignissim finibus. Nulla et eros bibendum, congue justo ut, interdum neque. In laoreet placerat pretium. Praesent sed libero nec arcu tincidunt efficitur vestibulum nec erat.</p>
    </div>

    <div class="swiper-slide">
      <h5>Sed ultrices magna lorem</h6>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean aliquet augue metus, ut ultrices ex euismod vel. Morbi accumsan condimentum dictum. Ut sed mi nec tortor accumsan iaculis sed vel urna. Curabitur pharetra, nunc a volutpat ultrices,
          quam mi congue diam, ac mollis ante felis ac eros. Nunc varius ut sapien at ornare. Etiam pellentesque magna quis est lacinia, in tempor massa tempor. Mauris condimentum nisi sed ligula ultricies, vitae tempus enim auctor. Integer et diam condimentum,
          pulvinar risus eu, lacinia tortor. Phasellus nisi felis, bibendum in mauris a, varius congue diam. Proin semper massa lacus, tempus placerat nisl consequat id. Maecenas scelerisque consequat dapibus.</p>
    </div>

    <div class="swiper-slide">
      <h5>Pellentesque nec ligula lectus</h6>
        <p>Phasellus quis laoreet arcu. Integer fringilla pellentesque arcu vel malesuada. Vestibulum vel venenatis arcu, eget ullamcorper ante. Sed bibendum laoreet sapien vitae scelerisque. Donec id mollis erat. Fusce at diam consectetur lorem gravida
          fringilla in ac sem. Ut in ipsum at enim commodo vestibulum sed vitae lectus. Praesent libero mi, elementum a tortor quis, suscipit pretium magna. Curabitur nec bibendum orci. Donec dapibus malesuada lorem vitae tincidunt.</p>
    </div>

    <div class="swiper-slide">
      <h5>Praesent accumsan vulputate fermentum</h6>
        <p>Donec nulla ex, feugiat sed felis ut, dapibus dapibus urna. Morbi placerat id arcu vitae egestas. Ut lorem lacus, dignissim elementum nunc sit amet, convallis placerat purus. Nunc laoreet id felis et mollis. Nam id magna eu mi convallis euismod.
          Quisque suscipit a erat at vestibulum. Donec convallis nisi quis pretium elementum. Phasellus massa sem, molestie sit amet dui eu, bibendum ornare velit. Curabitur porttitor egestas enim, vel pretium eros. Sed feugiat mi lorem, nec porttitor
          massa ornare ut. Phasellus vitae bibendum libero. Duis sed odio ex. In in nisl mi. Phasellus vitae auctor dolor, ut pretium nisi. Fusce consequat dolor quis mi eleifend blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
          posuere cubilia Curae.</p>
    </div>

    <div class="swiper-slide">
      <h5>Donec sed erat fermentum</h6>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultrices magna lorem, vel scelerisque sapien blandit ac. Pellentesque nec ligula lectus. Praesent accumsan vulputate fermentum. Donec sed erat fermentum, porttitor justo quis, pretium
          dui. Sed pellentesque, enim in euismod hendrerit, velit nisi scelerisque eros, eleifend vehicula ante sem sed lorem. Phasellus nulla nisl, tristique vel ipsum cursus, pellentesque gravida odio. Morbi efficitur sit amet nunc eu vulputate. Donec
          non interdum dui.</p>
    </div>

    <div class="swiper-slide">
      <h5>Lorem ipsum dolor sit amet</h6>
        <p>Donec vitae nibh nunc. Quisque in rhoncus augue. Nam eleifend in ligula volutpat vestibulum. Morbi sodales congue odio, ac ornare sem sagittis pharetra. Praesent ullamcorper nisi ut lectus bibendum, eleifend commodo nibh gravida. Donec volutpat
          porttitor vehicula. Aenean consequat, dui vitae sagittis consectetur, risus nulla lacinia elit, quis aliquam risus est at lectus. In quis luctus lectus, ac mattis felis. Integer non feugiat diam. Aenean ut turpis bibendum, imperdiet mauris a,
          dictum enim. Ut sed lacus posuere libero dignissim finibus. Nulla et eros bibendum, congue justo ut, interdum neque. In laoreet placerat pretium. Praesent sed libero nec arcu tincidunt efficitur vestibulum nec erat.</p>
    </div>

    <div class="swiper-slide">
      <h5>Sed ultrices magna lorem</h6>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean aliquet augue metus, ut ultrices ex euismod vel. Morbi accumsan condimentum dictum. Ut sed mi nec tortor accumsan iaculis sed vel urna. Curabitur pharetra, nunc a volutpat ultrices,
          quam mi congue diam, ac mollis ante felis ac eros. Nunc varius ut sapien at ornare. Etiam pellentesque magna quis est lacinia, in tempor massa tempor. Mauris condimentum nisi sed ligula ultricies, vitae tempus enim auctor. Integer et diam condimentum,
          pulvinar risus eu, lacinia tortor. Phasellus nisi felis, bibendum in mauris a, varius congue diam. Proin semper massa lacus, tempus placerat nisl consequat id. Maecenas scelerisque consequat dapibus.</p>
    </div>

    <div class="swiper-slide">
      <h5>Pellentesque nec ligula lectus</h6>
        <p>Phasellus quis laoreet arcu. Integer fringilla pellentesque arcu vel malesuada. Vestibulum vel venenatis arcu, eget ullamcorper ante. Sed bibendum laoreet sapien vitae scelerisque. Donec id mollis erat. Fusce at diam consectetur lorem gravida
          fringilla in ac sem. Ut in ipsum at enim commodo vestibulum sed vitae lectus. Praesent libero mi, elementum a tortor quis, suscipit pretium magna. Curabitur nec bibendum orci. Donec dapibus malesuada lorem vitae tincidunt.</p>
    </div>

    <div class="swiper-slide">
      <h5>Praesent accumsan vulputate fermentum</h6>
        <p>Donec nulla ex, feugiat sed felis ut, dapibus dapibus urna. Morbi placerat id arcu vitae egestas. Ut lorem lacus, dignissim elementum nunc sit amet, convallis placerat purus. Nunc laoreet id felis et mollis. Nam id magna eu mi convallis euismod.
          Quisque suscipit a erat at vestibulum. Donec convallis nisi quis pretium elementum. Phasellus massa sem, molestie sit amet dui eu, bibendum ornare velit. Curabitur porttitor egestas enim, vel pretium eros. Sed feugiat mi lorem, nec porttitor
          massa ornare ut. Phasellus vitae bibendum libero. Duis sed odio ex. In in nisl mi. Phasellus vitae auctor dolor, ut pretium nisi. Fusce consequat dolor quis mi eleifend blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
          posuere cubilia Curae.</p>
    </div>

    <div class="swiper-slide">
      <h5>Donec sed erat fermentum</h6>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultrices magna lorem, vel scelerisque sapien blandit ac. Pellentesque nec ligula lectus. Praesent accumsan vulputate fermentum. Donec sed erat fermentum, porttitor justo quis, pretium
          dui. Sed pellentesque, enim in euismod hendrerit, velit nisi scelerisque eros, eleifend vehicula ante sem sed lorem. Phasellus nulla nisl, tristique vel ipsum cursus, pellentesque gravida odio. Morbi efficitur sit amet nunc eu vulputate. Donec
          non interdum dui.</p>
    </div>

  </div>
</div>

4
  • @Sevastopol', "активный" слайд не находится в центре, а каждый раз смещается в сторону, из-за чего ближе к концу он оказывается за пределами родительского элемента.
    – De.Minov
    Commented 18 февр. 2021 в 11:23
  • @Sevastopol', очень серьёзный косяк с моей стороны был, сейчас переделал, так что уже лучше)
    – De.Minov
    Commented 18 февр. 2021 в 11:40
  • точка под активным слайдом чуть съезжает вверх. А так красиво)
    – qwerty
    Commented 18 февр. 2021 в 11:54
  • @Vadim.Sharoikin, да, верно, забыл убрать
    – De.Minov
    Commented 18 февр. 2021 в 12:25
4
+200

Добавил стрелочки. Все выравнивается по центру(вроде бы)

var swiper_date = new Swiper('.timeline-dates', {
  slidesPerView: 5,
  spaceBetween: 30,
  centeredSlides: true,
  slideToClickedSlide: true,
  navigation: {
    nextEl: '.timeline-button-next',
    prevEl: '.timeline-button-prev',
  },
});
var swiper_info_date = new Swiper('.timeline-contents', {
  allowTouchMove: false,
});

swiper_date.controller.control = swiper_info_date;
.timeline-dates {
  position: relative;
  margin-top: 70px;
}

.swiper-container {
  max-width: 1000px;
  height: 100%;
}

.slide_time {
  text-align: center;
}

.timeline-dates .before,
.timeline-dates .after {
  z-index: -1;
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  margin-top: 48px;
  height: 1px;
  background: red;
}

.timeline {
  margin-top: 100px;
  width: 100%;
}

.slide_time p {
  display: inline-block;
  position: relative;
  width: 10px;
  height: 10px;
  border: 2px solid red;
  border-radius: 100%;
  background: #fff;
  color: red;
  transition: 0.3s all ease;
}

.slide_time i {
  text-align: center;
  display: block;
  position: absolute;
  top: -40px;
  left: -15px;
  width: 30px;
  height: 200px;
  border-radius: 100%;
  line-height: 30px;
  color: red;
  font-style: normal;
  font-size: 20px;
}

.swiper-slide-active i {
  top: -50px;
  font-size: 60px;
  left: -55px;
}

.timeline-dates .swiper-slide-active p {
  background: red;
  transform: scale(2);
}

.main-cont {
  padding: 0 50px;
  position: relative;
}

.timeline-button-prev {
  left: 0;
  bottom: 11px;
  width: 31px;
  height: 31px;
  position: absolute;
}

.timeline-button-next {
  width: 31px;
  height: 31px;
  position: absolute;
  right: 0;
  bottom: 11px;
}

.main-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 64px;
  box-sizing: border-box;
}

.main-cont .fa {
  color: red;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Swiper demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css">

</head>

<body>
  <!-- Swiper -->
  <div class="main-container">
    <div class="main-cont">
      <div class="timeline-button-prev"><i class="fa fa-arrow-circle-left fa-2x"></i></div>

      <div class="swiper-container timeline-dates">
        <div class="before"></div>
        <div class="after"></div>
        <div class="swiper-wrapper timeline">
          <div class="swiper-slide slide_time time">
            <p><i>1979</i></p>
          </div>
          <div class="swiper-slide slide_time">
            <p><i>1979</i></p>
          </div>
          <div class="swiper-slide slide_time">
            <p><i>1979</i></p>
          </div>
          <div class="swiper-slide slide_time">
            <p><i>1979</i></p>
          </div>
          <div class="swiper-slide slide_time">
            <p><i>1979</i></p>
          </div>
          <div class="swiper-slide slide_time">
            <p><i>1979</i></p>
          </div>
          <div class="swiper-slide slide_time">
            <p><i>1979</i></p>
          </div>
          <div class="swiper-slide slide_time">
            <p><i>1979</i></p>
          </div>
          <div class="swiper-slide slide_time">
            <p><i>1979</i></p>
          </div>
          <div class="swiper-slide slide_time">
            <p><i>1979</i></p>
          </div>
        </div>
      </div>
      <div class="timeline-button-next"><i class="fa fa-arrow-circle-right fa-2x"></i></div>
    </div>
    <div class="swiper-container timeline-contents">
      <div class="swiper-wrapper">

        <div class="swiper-slide">
          <h5>Lorem ipsum dolor sit amet</h6>
            <p>Donec vitae nibh nunc. Quisque in rhoncus augue. Nam eleifend in ligula volutpat vestibulum. Morbi sodales congue odio, ac ornare sem sagittis pharetra. Praesent ullamcorper nisi ut lectus bibendum, eleifend commodo nibh gravida. Donec volutpat
              porttitor vehicula. Aenean consequat, dui vitae sagittis consectetur, risus nulla lacinia elit, quis aliquam risus est at lectus. In quis luctus lectus, ac mattis felis. Integer non feugiat diam. Aenean ut turpis bibendum, imperdiet mauris
              a, dictum enim. Ut sed lacus posuere libero dignissim finibus. Nulla et eros bibendum, congue justo ut, interdum neque. In laoreet placerat pretium. Praesent sed libero nec arcu tincidunt efficitur vestibulum nec erat.</p>
        </div>

        <div class="swiper-slide">
          <h5>Sed ultrices magna lorem</h6>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean aliquet augue metus, ut ultrices ex euismod vel. Morbi accumsan condimentum dictum. Ut sed mi nec tortor accumsan iaculis sed vel urna. Curabitur pharetra, nunc a volutpat ultrices,
              quam mi congue diam, ac mollis ante felis ac eros. Nunc varius ut sapien at ornare. Etiam pellentesque magna quis est lacinia, in tempor massa tempor. Mauris condimentum nisi sed ligula ultricies, vitae tempus enim auctor. Integer et diam
              condimentum, pulvinar risus eu, lacinia tortor. Phasellus nisi felis, bibendum in mauris a, varius congue diam. Proin semper massa lacus, tempus placerat nisl consequat id. Maecenas scelerisque consequat dapibus.</p>
        </div>

        <div class="swiper-slide">
          <h5>Pellentesque nec ligula lectus</h6>
            <p>Phasellus quis laoreet arcu. Integer fringilla pellentesque arcu vel malesuada. Vestibulum vel venenatis arcu, eget ullamcorper ante. Sed bibendum laoreet sapien vitae scelerisque. Donec id mollis erat. Fusce at diam consectetur lorem gravida
              fringilla in ac sem. Ut in ipsum at enim commodo vestibulum sed vitae lectus. Praesent libero mi, elementum a tortor quis, suscipit pretium magna. Curabitur nec bibendum orci. Donec dapibus malesuada lorem vitae tincidunt.</p>
        </div>

        <div class="swiper-slide">
          <h5>Praesent accumsan vulputate fermentum</h6>
            <p>Donec nulla ex, feugiat sed felis ut, dapibus dapibus urna. Morbi placerat id arcu vitae egestas. Ut lorem lacus, dignissim elementum nunc sit amet, convallis placerat purus. Nunc laoreet id felis et mollis. Nam id magna eu mi convallis euismod.
              Quisque suscipit a erat at vestibulum. Donec convallis nisi quis pretium elementum. Phasellus massa sem, molestie sit amet dui eu, bibendum ornare velit. Curabitur porttitor egestas enim, vel pretium eros. Sed feugiat mi lorem, nec porttitor
              massa ornare ut. Phasellus vitae bibendum libero. Duis sed odio ex. In in nisl mi. Phasellus vitae auctor dolor, ut pretium nisi. Fusce consequat dolor quis mi eleifend blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
              posuere cubilia Curae.</p>
        </div>

        <div class="swiper-slide">
          <h5>Donec sed erat fermentum</h6>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultrices magna lorem, vel scelerisque sapien blandit ac. Pellentesque nec ligula lectus. Praesent accumsan vulputate fermentum. Donec sed erat fermentum, porttitor justo quis, pretium
              dui. Sed pellentesque, enim in euismod hendrerit, velit nisi scelerisque eros, eleifend vehicula ante sem sed lorem. Phasellus nulla nisl, tristique vel ipsum cursus, pellentesque gravida odio. Morbi efficitur sit amet nunc eu vulputate.
              Donec non interdum dui.</p>
        </div>

        <div class="swiper-slide">
          <h5>Lorem ipsum dolor sit amet</h6>
            <p>Donec vitae nibh nunc. Quisque in rhoncus augue. Nam eleifend in ligula volutpat vestibulum. Morbi sodales congue odio, ac ornare sem sagittis pharetra. Praesent ullamcorper nisi ut lectus bibendum, eleifend commodo nibh gravida. Donec volutpat
              porttitor vehicula. Aenean consequat, dui vitae sagittis consectetur, risus nulla lacinia elit, quis aliquam risus est at lectus. In quis luctus lectus, ac mattis felis. Integer non feugiat diam. Aenean ut turpis bibendum, imperdiet mauris
              a, dictum enim. Ut sed lacus posuere libero dignissim finibus. Nulla et eros bibendum, congue justo ut, interdum neque. In laoreet placerat pretium. Praesent sed libero nec arcu tincidunt efficitur vestibulum nec erat.</p>
        </div>

        <div class="swiper-slide">
          <h5>Sed ultrices magna lorem</h6>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean aliquet augue metus, ut ultrices ex euismod vel. Morbi accumsan condimentum dictum. Ut sed mi nec tortor accumsan iaculis sed vel urna. Curabitur pharetra, nunc a volutpat ultrices,
              quam mi congue diam, ac mollis ante felis ac eros. Nunc varius ut sapien at ornare. Etiam pellentesque magna quis est lacinia, in tempor massa tempor. Mauris condimentum nisi sed ligula ultricies, vitae tempus enim auctor. Integer et diam
              condimentum, pulvinar risus eu, lacinia tortor. Phasellus nisi felis, bibendum in mauris a, varius congue diam. Proin semper massa lacus, tempus placerat nisl consequat id. Maecenas scelerisque consequat dapibus.</p>
        </div>

        <div class="swiper-slide">
          <h5>Pellentesque nec ligula lectus</h6>
            <p>Phasellus quis laoreet arcu. Integer fringilla pellentesque arcu vel malesuada. Vestibulum vel venenatis arcu, eget ullamcorper ante. Sed bibendum laoreet sapien vitae scelerisque. Donec id mollis erat. Fusce at diam consectetur lorem gravida
              fringilla in ac sem. Ut in ipsum at enim commodo vestibulum sed vitae lectus. Praesent libero mi, elementum a tortor quis, suscipit pretium magna. Curabitur nec bibendum orci. Donec dapibus malesuada lorem vitae tincidunt.</p>
        </div>

        <div class="swiper-slide">
          <h5>Praesent accumsan vulputate fermentum</h6>
            <p>Donec nulla ex, feugiat sed felis ut, dapibus dapibus urna. Morbi placerat id arcu vitae egestas. Ut lorem lacus, dignissim elementum nunc sit amet, convallis placerat purus. Nunc laoreet id felis et mollis. Nam id magna eu mi convallis euismod.
              Quisque suscipit a erat at vestibulum. Donec convallis nisi quis pretium elementum. Phasellus massa sem, molestie sit amet dui eu, bibendum ornare velit. Curabitur porttitor egestas enim, vel pretium eros. Sed feugiat mi lorem, nec porttitor
              massa ornare ut. Phasellus vitae bibendum libero. Duis sed odio ex. In in nisl mi. Phasellus vitae auctor dolor, ut pretium nisi. Fusce consequat dolor quis mi eleifend blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
              posuere cubilia Curae.</p>
        </div>

        <div class="swiper-slide">
          <h5>Donec sed erat fermentum</h6>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultrices magna lorem, vel scelerisque sapien blandit ac. Pellentesque nec ligula lectus. Praesent accumsan vulputate fermentum. Donec sed erat fermentum, porttitor justo quis, pretium
              dui. Sed pellentesque, enim in euismod hendrerit, velit nisi scelerisque eros, eleifend vehicula ante sem sed lorem. Phasellus nulla nisl, tristique vel ipsum cursus, pellentesque gravida odio. Morbi efficitur sit amet nunc eu vulputate.
              Donec non interdum dui.</p>
        </div>

      </div>
    </div>
  </div>
  <!-- Swiper JS -->
  <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>


</body>

</html>

0

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.