carousel using pure vue js

Question

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?

did you try anything with setTImeout ?

Niklesh Raut
– Niklesh Raut

2018-10-20 07:14:49 +00:00
Commented Oct 20, 2018 at 7:14 — Niklesh Raut
– Niklesh Raut, Commented Oct 20, 2018 at 7:14

Shu Yoshioka · Accepted Answer · 2018-10-20 11:36:37Z

1

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

Count up a number i in every 15 second using setInterval
Compute displaying event. You can use i mod 3 as the index of the displaying event

answered Oct 20, 2018 at 11:36

Shu Yoshioka

4662 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Socrates Tuas · Accepted Answer · 2018-10-20 10:46:46Z

0

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

answered Oct 20, 2018 at 10:46

Socrates Tuas

1811 silver badge9 bronze badges

Collectives™ on Stack Overflow

carousel using pure vue js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related