С помощью какого плагина можно сделать такой слайдер?

Question

[Norum]

С помощью какого плагина можно такое сделать или сможете посоветовать способы получше?

Comments

[RAX7]

Как сделать такой слайдер (в виде стопки) на Swiper?

Answer 1

[Владислав Черненко]

Vue Carousel 3D

Comments

[Norum]

а как им пользоваться? Там не понятно, как картинки отображать по отдельности, в руководстве мало что написано

[Владислав Черненко]

Norum, что значит отображать по отдельности? это карусель а не lightbox, его подключать отдельно нужно... если вы про это)

[Norum]

да не. Хочу сделать слайдер, как в документации в примере Controls Customised.
Там такая конструкция

<div id="example">
  <carousel-3d :controls-visible="true" :controls-prev-html="'❬ '" :controls-next-html="'❭'" :controls-width="30" :controls-height="60" :clickable="false">
    <slide v-for="(slide, i) in slides" :index="i">
      <figure>
        <img src="https://placehold.it/360x270">
      </figure>
    </slide>
  </carousel-3d>
</div>

new Vue({
  el: '#example',
  data: {
    slides: 8
  },
  components: {
    'carousel-3d': window['carousel-3d'].Carousel3d,
    'slide': window['carousel-3d'].Slide
  }
})

Но при попытке использовать конструкцию, как в примере, у меня получилось вот так и в итоге отображаются слайдеры с одной и той же картинкой. Так же я не понял, что такое :index="i". Я думал это приоритет картинок, но я оказался не прав.

<div id="example">
  <carousel-3d :controls-visible="true" :controls-prev-html="'&#10092; '" :controls-next-html="'&#10093;'" :controls-width="30" :controls-height="60" :clickable="false">
    <slide v-for="(slide, i) in slides" :index="i">
      <figure>
        <img src="/img/sliders/1.jpg">
      </figure>
    </slide>
    <slide v-for="(slide, i) in slides" :index="i">
      <figure>
        <img src="/img/sliders/2.jpg">
      </figure>
    </slide>
    <slide v-for="(slide, i) in slides" :index="i">
      <figure>
        <img src="/img/sliders/3.jpg">
      </figure>
    </slide>
    <slide v-for="(slide, i) in slides" :index="i">
      <figure>
        <img src="/img/sliders/4.jpg">
      </figure>
    </slide>
    <slide v-for="(slide, i) in slides" :index="i">
      <figure>
        <img src="/img/sliders/5.jpg">
      </figure>
    </slide>
    <slide v-for="(slide, i) in slides" :index="i">
      <figure>
        <img src="/img/sliders/6.jpg">
      </figure>
    </slide>
    <slide v-for="(slide, i) in slides" :index="i">
      <figure>
        <img src="/img/sliders/7.jpg">
      </figure>
    </slide>

  </carousel-3d>
</div>

Как в макете


Как у меня

с

Так же пробовал использовать несколько тэгов figure в тэге slider, заключая в figure картинки, но опять не то. Помогите разобраться, пожалуйста!
Сам сайт c96180og.beget.tech

[Владислав Черненко]

Norum, не нужны там i, такая конструкция полезна если циклом выводить слайды. Просто разные карктинки можно через:

<slide :index="0">
...

<slide :index="1">
...

и т.д

Пример:

[Norum]

Владислав Черненко, а можешь подсказать, как развернуть слайды прямо?

У меня получается так


а надо так



я сначала выставил для carousel-3d-slide { transform: rotateY(0deg)} и думал, что сработает, но в итоге слайдеры просто спрятались друг за друга. Вроде как в разделе API есть настройка perspective и она и отвечает за разворот слайдов, но как ее включить не ясно.

Вот можешь посмотреть, что у меня вышло c96180og.beget.tech

[Norum]

Владислав Черненко, Ну и еще один вопрос- как добавить еще слайды в поле видимости? У меня видно только 5 слайдов, а нужно чтобы были видны еще по одному справа и слева.

[Владислав Черненко]

Norum, обновил пример выше... значения
:perspective="0" :space="150" :display="7"

[Norum]

Владислав Черненко, спсаибо!!

Answer 2

[Юрий]

Swiper.js тоже так умеет.