Слайдер на Vue

Фреймворк Vue.js открыл новые возможности для создания интерактивных элементов, которые мгновенно реагируют на действия пользователя. Слайдер — один из ключевых элементов современного веб-сайта, и его реализация с помощью Vue становится невероятно простой. Реактивная система Vue позволяет управлять состоянием компонентов (например, активным слайдом) без необходимости прямого манипулирования DOM, что делает код чистым, логичным и легко поддерживаемым.

Убедитесь в этом сами: ниже представлен готовый интерактивный слайдер изображений, созданный на Vue 3. Кликните на любое фото, чтобы увидеть анимацию.

<div id="app">
  <div class="slider">
    <div class="slider__img" :class="{expanded: photo.isExpanded}" v-for="(photo,index) in photos" :key="index" @click="handleClick(index)">
      <img :src="`${photo.name}`" :alt="photo.alt" />
      <p class="slider__desc">{{ photo.desc }}</p>
    </div>
  </div>
</div>

.slider {  
  --tr: .3s ease-in-out;
  display: flex;
  gap: 0 2%;
  width: 100%;
  height: 50vh;    
}
.slider__img {
  position: relative;
  flex: 1 1;
  overflow: hidden;
  height: 100%;
  border-radius: 50px;
  cursor: pointer;
  transition: var(--tr);
}
.slider__img img {
  -o-object-fit: cover;
     object-fit: cover;
  height: 100%;
}
.slider__desc {
  position: absolute;
  left: 30px;
  bottom: 30px;
  width: -moz-max-content;
  width: max-content;
  color: white;
  font-size: clamp(1rem, 0.8261rem + 0.8696vi, 1.5rem);
  font-weight: 500;
  text-shadow: 0 0 6px hsla(0, 0%, 0%, 0.5);
  opacity: 0;
  transition: var(--tr);
}
.slider .expanded {
  flex-grow: 10;
}
.slider .expanded .slider__desc {
  opacity: 1;
}

const PHOTOS = [
	{		
		name: 'vue-slider-bridge.avif',
		alt: 'Красивый мост',
		desc: 'Исследуй мир',
		isExpanded: true
	},
	{		
		name: 'vue-slider-forest.avif',
		alt: 'Осенний лес',
		desc: 'Осенний лес',
		isExpanded: false
	},
	{		
		name: 'vue-slider-ocean.avif',
		alt: 'Солнечный пляж',
		desc: 'Солнечный пляж',
		isExpanded: false
	},
	{		
		name: 'vue-slider-city.avif',
		alt: 'Зимний город',
		desc: 'Зимний город',
		isExpanded: false
	},
	{		
		name: 'vue-slider-mountains.avif',
		alt: 'Облака в горах',
		desc: 'Облака в горах',
		isExpanded: false
	},
]

const {createApp,ref} = Vue
createApp({
    setup() {    
        const photos = ref(PHOTOS)     
        function handleClick(index) {
			photos.value.forEach((photo, i) => {
				if (i === index) {
					photo.isExpanded = true
				} else {
					photo.isExpanded = false
				}
			})
		}
        return {
            photos, handleClick
        }
    }        
}).mount('#app')

Внимание! Представленный код — это готовый компонент, но для его работы на странице должен быть установлен и подключен фреймворк Vue. Если вы начинающий разработчик, просто добавьте строку
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
в раздел <head> вашего HTML, и всё заработает.

Как работает этот Vue слайдер?

Давайте разберем код, чтобы понять, как легко и элегантно можно создать слайдер на Vue.

HTML (Шаблон компонента)

В шаблоне мы используем директиву v-for для отрисовки списка изображений из массива photos. Ключевые моменты:

:class="{expanded: photo.isExpanded}" – Динамически добавляет CSS-класс expanded только к активному (раскрытому) слайду. Это сердце нашей анимации.
@click="handleClick(index)" – Обрабатывает клик пользователя по слайду, передавая его индекс в метод.
{{ photo.desc }} – Реактивно отображает подпись к изображению, которая берется из нашего массива данных.

CSS (Стилизация)

Стили обеспечивают плавные переходы и внешний вид:

Контейнер .slider использует display: flex, чтобы слайды располагались в ряд.
Изначально все слайды имеют одинаковый flex-grow (благодаря flex: 1 1).
Класс .expanded резко увеличивает flex-grow активного слайда, заставляя его растягиваться, а остальные – сжиматься.
Класс .slider__desc скрыт (opacity: 0) и появляется только у активного слайда. Плавность анимации обеспечивает transition: var(--tr).

JS (Логика на Vue 3 Composition API)

Логика компонента проста и сосредоточена в одном месте:

Состояние: Мы используем реактивную ссылку const photos = ref(PHOTOS), которая хранит массив всех слайдов с их свойствами, включая флаг isExpanded.
Метод handleClick: При клике на слайд этот метод обходит весь массив photos и устанавливает isExpanded: true только для выбранного слайда (по индексу), а для всех остальных – isExpanded: false.
Реактивность Vue: Как только значение isExpanded меняется, Vue автоматически реагирует на это изменение и перерисовывает DOM, применяя или убирая CSS-классы. Это приводит к плавной анимации расширения/сжатия слайдов без необходимости писать какой-либо дополнительный код для манипуляций со стилями.

Этот пример наглядно демонстрирует мощь Vue для создания слайдеров и других интерактивных элементов при разработке сайтов: вы управляете данными, а фреймворк заботится об обновлении интерфейса.

Данный слайдер — лишь один из примеров того, как современные технологии могут оживить ваш сайт. Хотите реализовать на своем проекте нестандартные галереи, интерактивные элементы или сложные анимации? Наша команда разработчиков с глубоким знанием Vue готова создать для вас уникальное и эффективное решение. Закажите разработку компонентов под ключ — и ваш сайт заиграет по-новому!