CODEWITHSUNDEEP
vue.jsvuejs2
margherita pizza
margherita pizza

Reputation: 7185

carousel using pure vue js

I have an array which contains objects. Each object describe a social event.

const social_events = [

    {name:'Musical show',location:'Colombo'},
    {name:"DJ Party",location:'New york'},
    {name:"Dinner dance",location:"Paris"}
]

What I want to do is DISPLAY ONE SOCIAL EVENT AT A TIME inside a div tag. of cause this is exactly like a carousel expect carousel for images this for texts.

I want to change my text in every 15 seconds as well.

I think it's something with setTimeout and computed properties. How do I achieve this any clue?

Upvotes: 1

Views: 194

Answers (2)

Shu Yoshioka
Shu Yoshioka

Reputation: 466

You can use computed property and setInterval.

data () {
    return {
        i: 0,
        socialEvents: [
            {name:'Musical show',location:'Colombo'},
            {name:"DJ Party",location:'New york'},
            {name:"Dinner dance",location:"Paris"}
        ]
    }
},
created () {
    setInterval (() =>{
        this.i++
    }, 15000)
},
computed: {
    displayingEvent () {
        return this.socialEvents[this.i % this.socialEvents.length]
    }
}
  1. Count up a number i in every 15 second using setInterval
  2. Compute displaying event. You can use i mod 3 as the index of the displaying event

Upvotes: 1

Socrates Tuas
Socrates Tuas

Reputation: 181

This link might help I use setInterval, you can change the time to 15000

https://codepen.io/vibrates09/pen/KGemqQ?&editors=101

count() {
  let i = 0
  setInterval(() => {
    this.show = this.socialEvent[i]
    i++;
    i === this.socialEvent.length ? i = 0 : i
  }, 1000)
}

Upvotes: 0

Related Questions