Главная
Проекты на Vue
Слайдер изображений с эффектом «окна»

Слайдер изображений с эффектом «окна»

Создание интерактивных и визуально эффектных компонентов для сайта может быть сложной задачей, но с Vue.js этот процесс становится значительно проще. Vue позволяет разработчикам легко управлять состоянием интерфейса, создавать реактивные элементы и реализовывать сложную логику с помощью чистого и структурированного кода. На этой странице представлен готовый компонент слайдера изображений, который наглядно демонстрирует возможности Vue в создании динамического и привлекательного UI.

Этот компонент — не просто слайдер, а визуальный акцент, который превращает простое переключение картинок в запоминающееся взаимодействие. Он создаёт эффект «живого окна» в контент, приковывая взгляд пользователя и делая навигацию по галерее эстетическим опытом.

<div id="app">
  <div class="app__slider" :style="`background-image: url(/img/${imgs[ind].name}.webp)`">
    <button class="app__slider-btn _left" @click="increaseInd()"></button>
    <div class="app__slider-img">
      <img :src="`./img/${imgs[ind].name}.webp`" :alt="imgs[0].alt">
    </div>
    <button class="app__slider-btn _right" @click="decreaseInd()"></button>
  </div>
</div>

#app {
  position: absolute;
  inset: 0;
}
.app__slider {
  --move: 15%;
  --w: 2px;
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.app__slider::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: hsla(0, 0%, 0%, 0.55);
}
.app__slider-img {
  position: absolute;
  z-index: 2;
  inset: 0;
  clip-path: inset(var(--move));
}
.app__slider-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.app__slider-btn {
  position: absolute;
  z-index: 1;
  top: 50%;
  padding: 24px;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3Cpath d='M19 12H5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  border: var(--w) solid #F1C40F;
}
.app__slider-btn._left {
  left: var(--move);
  transform: translate(calc(-100% + var(--w)), -50%);
}
.app__slider-btn._right {
  right: var(--move);
  transform: translate(calc(100% - var(--w)), -50%) scale(-1, 1);
}

const IMAGES = [
	{name: '01',alt: 'молния'},
	{name: '02',alt: 'горы'},
	{name: '03',alt: 'вода'},
	{name: '04',alt: 'огонь'},
	{name: '05',alt: 'ветрогенератор'}
]
const {createApp, ref} = Vue
createApp({
    setup(){
        const imgs = ref(IMAGES)
		const ind = ref(0)
        function increaseInd() {
			if (ind.value === imgs.value.length - 1) {
				ind.value = 0
				return
			}
			ind.value++
		}
		function decreaseInd() {
			if (ind.value === 0) {
				ind.value = imgs.value.length - 1
				return
			}
			ind.value--
		}
        return{imgs, ind, increaseInd, decreaseInd}
    }
}).mount('#app')

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

Разбираем код Vue-компонента «Слайдер изображений с эффектом окна»

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

HTML-структура (шаблон)

Контейнер слайдера .app__slider имеет фоновое изображение, которое меняется реактивно через директиву :style. Фон всегда показывает текущее изображение.
Кнопки навигации ._left и ._right используют директиву @click для вызова методов increaseInd() и decreaseInd(), что является примером простой и понятной обработки событий во Vue.
Основное изображение обёрнуто в блок .app__slider-img. Ключевой визуальный трюк достигается с помощью CSS-свойства clip-path: inset(var(--move)), которое «вырезает» внутреннюю область, создавая эффект рамки. Изображение внутри загружается реактивно через :src.

Стили (CSS)

Эффект «окна» реализован через комбинацию clip-path у .app__slider-img и фона у родительского .app__slider.
Кнопки стилизованы с использованием SVG в качестве фона и имеют динамическое позиционирование относительно переменной --move, что обеспечивает их точное размещение у границ «окна».
Использование CSS-переменных (--move, --w) делает компонент легко настраиваемым.
Псевдоэлемент .app__slider::before добавляет затемнение фоновому изображению для лучшего визуального разделения слоёв.

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

Массив изображений IMAGES хранится в реактивной переменной imgs с помощью ref().
Текущий индекс слайда хранится в реактивной переменной ind.
Функции increaseInd() и decreaseInd() управляют переключением слайдов. Они обеспечивают бесконечную цикличность слайдера: после последнего изображения следует первое, и наоборот.
Вся логика инкапсулирована внутри функции setup(), что является отличительной чертой Composition API, и возвращается в шаблон для использования.

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

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

Нравится этот слайдер?

Мы создадим для вашего сайта уникальные и динамичные компоненты, которые выделят его среди конкурентов.

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

Предыдущий Следующий