.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}%` }')