[Vuejs]-How do I make a slideshow survey with Vue.js

by

1👍

Another way will be programmed routing. First you ask name then route to the next component which greets for that name and so and so.

https://router.vuejs.org/en/essentials/navigation.html

0👍

For a basic slideshow in vue, you could try the following:

HTML

<div id="app">
  <nav class="slide-nav">
    <div 
       v-if="currentSlide > 0" 
       v-on:click="currentSlide--" 
       class="prev-slide">
      <i class="material-icons">chevron_left</i>
    </div>
    <div 
       v-if="currentSlide < slides.length-1" 
       v-on:click="currentSlide++" 
       class="next-slide">
      <i class="material-icons">chevron_right</i>
    </div>
  </nav>
  <div class="slide">
    <h2>{{slides[currentSlide].title}}</h2>
    <div class="slideContent" v-html="slides[currentSlide].content"></div>
  </div>
</div>

Javascript:

let app = new Vue({
  el: '#app',
  data: {
    slides: [
        {
          title: 'Title 1',
          content: `<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>`
        },
        { 
          title: 'Title 2',
          content: `<p>Donec porttitor, <strong>ligula ut finibus efficitur</strong>, magna sapien eleifend sapien, accumsan consequat magna elit a leo.</p>`
        },
        { 
          title: 'Title 3',
          content: `<p>Vestibulum condimentum, neque ut tristique luctus, mi mauris egestas tellus, sed tincidunt tortor mi sed ante.<br>Donec purus ipsum, auctor et volutpat ut, aliquet id magna.</p>`
        }
    ],
    currentSlide: 0
  }
})

Codepen: https://codepen.io/hfoletto/pen/aGVRZM

The Title and content object of each slide is hold by the slides array data property.
Initializing the currentSlide property as 0 makes the default slide the first one.

In the HTML, conditional rendering does the trick for only showing the prev button if the currentSlide property is more than 0 (aka first slide) v-if="currentSlide > 0" and the next button only when the currentSlide is lower than index position of the last object in the slides array: v-if="currentSlide < slides.length-1"

Using the v-on:click event handler in the prev and next buttons, we can add or decreases 1 of the currentSlide property, so the content reactively changes.

Note: I’m using ES6 Template literals here, but you don’t have to.

I highly encourage you to take a deep dive into the Vue js Guide, it’s really straight forward!

If you want to add some animations, check out the Transitions & Animations Vue Guide.

Best wishes.

0👍

I recommended that you try Vueper Slides.
Easy to use slideshow for Vue JS with more features.

You just need this markup:

<vueper-slides>
  <vueper-slide v-for="(slide, i) in slides" :key="i" :title="slide.title" :content="slide.content"></vueper-slide>
</vueper-slides>

Leave a comment