N
N
Norum2020-01-01 05:00:14
Vue.js
Norum, 2020-01-01 05:00:14

How to properly add photos to Vue Carousel 3D slider?

I'm trying to understand the documentation of Vue Carousel 3D and I can't figure out how to make it so that one picture is displayed in each slide. Let me explain: I want to make a slider, as in the documentation in the Controls Customized example.

There's a structure like this:

<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
  }
})


5fee81c045480447576602.jpeg

But when I tried to use the construction, as in the example, I got it like this and as a result, sliders with the same picture are displayed. Also I didn't understand what :index="i" is. I thought it was the priority of pictures, but I was wrong.

<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="/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>

5fee81fbd3e82134676437.jpeg

And here's how it should turn out . I

5fee820cc2b6a509216828.jpeg

also tried to use several figure tags in the slider tag, enclosing images in figures, but again, not that. Help to understand, please.

The website c96180og.beget.tech

Answer the question

In order to leave comments, you need to log in

1 answer(s)
0
0xD34F, 2020-01-01
@Norum

data: () => ({
  slides: [
    'путь к первой картинке',
    'путь ко второй картинке',
    ...
  ],
}),

<slide v-for="(n, i) in slides" :index="i">
  <figure>
    <img :src="n">
  </figure>
</slide>

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question