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