Allow next/prev controls outside of slide-show

[cyrusdean]

It would be very useful to be able to have the next/prev controls outside the slide-show. Just for designs where the arrows are outside the slideshow.

        <slide-show>
             <slide/>
        </slide-show>
        <svg-image slot="nav-prev" src="arrow-left.svg"/>
        <svg-image slot="nav-next" src="arrow-right.svg"/>  

Perhaps using $refs or maybe just methods or commits that we can use to trigger next/prev.

[SaFrMo]

@cyrusdean Good idea! One way to set up that functionality would be to change the index prop from the container. For example:

<template>
  <div>
    <slide-show :index.sync="index"/>
    <button @click="index++">Next</button>
    <button @click="index--">Previous</button>
  </div>
</template>

<script>
export default {
  data(){
    return {
      index: 0
    }
  }
}
</script>

The sync modifier bidirectionally binds the index prop, so autoplay will still work and be reflected correctly in the index in this component's data. Would that do what you're looking for?

[drewbaker]

Yeah you just end up having to right a lot of repetitive code to get the next/prev to loop or not loop correctly. Not a big deal, but would be slick if it worked out of the box.

[SaFrMo]

Got it! I added a prop in the last week or two that might solve this called manual-loop. This makes the slideshow loop on both automatic and manual index changes.

Now that I'm looking at it, this is probably the desired behavior anyway and should be the default, yeah?

[drewbaker]

Really the issue is if you have 5 slides, and you set index to 6, it obviously doesn't do anything. So you end up writing code every time to make sure index can't go about slides.length or 0.

[drewbaker]

Ideally we'd have someway of telling slideshow to just go next/prev and not even have to worry about index. Setting index is pretty low level, but I get that it might be the only way.