Fade Effect

Плавный переход через прозрачность (Cross-fade).

Эффект затухания

Плавный переход через прозрачность

Slide 1

Slide 2

Slide 3

Slide 4

Код примера

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>
</div>

JavaScript:

const slider = new Tvist('.tvist', {
  effect: 'fade',
  fadeEffect: {
    crossFade: false // или true для одновременного показа слайдов
  },
  speed: 600,
  loop: true
});

CSS:

.tvist-v1 {
  width: 100%;
  height: 400px;
  background: #000;
  border-radius: 12px;
}

.tvist-v1__slide {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  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%); }