| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152 |
- .imageslider.relative.overflow-hidden.rounded-xl.shadow-lg(class='max-w-6xl mx-auto')
- //- Контейнер слайдов
- .slides-container.relative.h-96.flex.transition-transform.duration-500.ease-in-out( class="md:h-112"
- :style='{ transform: `translateX(-${currentIndex * 100}%)` }'
- @touchstart='handleTouchStart'
- @touchmove='handleTouchMove'
- @touchend='handleTouchEnd'
- )
- .slide.flex-shrink-0.w-full.h-full.relative(
- v-for='(slide, index) in slides'
- :key='index'
- )
- img.w-full.h-full.object-cover(:src='slide.image' :alt='slide.title || "Изображение слайда"')
- .slide-content.absolute.inset-0.flex.items-end
- .content-wrapper.w-full.p-8.bg-gradient-to-t.from-black.to-transparent.text-white(class="via-black/70")
- h3.text-2xl.font-bold.mb-2(v-if='slide.title' class="md:text-3xl") {{ slide.title }}
- p.text-lg.mb-4.opacity-90(v-if='slide.description' class="md:text-xl") {{ slide.description }}
- button.bg-accent.text-white.px-6.py-2.rounded-lg.transition-colors( class="hover:bg-yellow-600"
- v-if='slide.cta'
- @click='$emit("slide-click", slide)'
- ) {{ slide.cta }}
- //- Кнопки навигации
- button.nav-btn.absolute.left-4.text-gray-800.p-3.rounded-full.shadow-lg.transition-all(
- @click='prevSlide'
- class='hover:scale-110 top-1/2 transform -translate-y-1/2 dark:text-white bg-white/80 dark:bg-gray-800/80 hover:bg-white dark:hover:bg-gray-700'
- aria-label='Предыдущий слайд'
- )
- svg.w-5.h-5(fill='none' stroke='currentColor' viewBox='0 0 24 24')
- path(stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 19l-7-7 7-7')
-
- button.nav-btn.absolute.right-4.text-gray-800.p-3.rounded-full.shadow-lg.transition-all(
- @click='nextSlide'
- class='hover:scale-110 top-1/2 transform -translate-y-1/2 bg-white/80 dark:bg-gray-800/80 dark:text-white hover:bg-white dark:hover:bg-gray-700'
- aria-label='Следующий слайд'
- )
- svg.w-5.h-5(fill='none' stroke='currentColor' viewBox='0 0 24 24')
- path(stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 5l7 7-7 7')
- //- Индикаторы
- .indicators.absolute.bottom-4.transform.flex.space-x-2(class="left-1/2")
- .indicator.w-3.h-3.rounded-full.border.border-white.cursor-pointer.transition-all(
- v-for='(slide, index) in slides'
- :key='index'
- :class='"-translate-x-1/2"+currentIndex === index ? "bg-white scale-110" : "bg-white/50"'
- @click='goToSlide(index)'
- :aria-label='`Перейти к слайду ${index + 1}`'
- )
- //- Прогресс-бар автопрокрутки
- .progress-bar.absolute.top-0.left-0.w-full.h-1(v-if='autoplay' class="bg-white/30")
- .progress-fill.h-full.bg-accent.transition-all.duration-1000(:style='{ width: `${progress}%` }')
|
