Basic Example

Базовый пример использования слайдера.

Basic Slider

Простой слайдер с навигацией и информацией о текущем слайде

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Current: 1 / 5

Код примера

HTML:

<div class="tvist-v1">
  <div class="tvist-v1__container">
    <div class="tvist-v1__slide">Slide 1</div>
    <div class="tvist-v1__slide">Slide 2</div>
    <div class="tvist-v1__slide">Slide 3</div>
    <div class="tvist-v1__slide">Slide 4</div>
    <div class="tvist-v1__slide">Slide 5</div>
  </div>
</div>

JavaScript:

const slider = new Tvist('.tvist', {
  perPage: 1,
  gap: 0,
  speed: 300,
  loop: false
});

CSS:

.tvist-v1__slide {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  color: white;
}

.tvist-v1__slide[data-tvist-slide-index="0"] { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.tvist-v1__slide[data-tvist-slide-index="1"] { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.tvist-v1__slide[data-tvist-slide-index="2"] { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.tvist-v1__slide[data-tvist-slide-index="3"] { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
.tvist-v1__slide[data-tvist-slide-index="4"] { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }