Allow custom pager template slots for slide-show

[drewbaker]

It would be great if this worked:

    <div class="pager">
        <button class="pager-item" slot="pagination-item" slot-scope="args" :aria-label="args.slide.title"/>
    </div>

[SaFrMo]

@drewbaker Just want to make sure I understand - how would this differ from the current pagination-item slot? (link) Thanks!

[drewbaker]

From memory, I don't think you can put the pagination-item in it's own DIV like that. But it's been awhile since I opened this, I can't fully remember.

[drewbaker]

Yeah so I'm dealing with this today. You can't put wrappers around slot-scope items.

    <slide-show
        class="shortcode-gallery-slideshow"
        :slides="images"
    >
        <div class="slides">
            <responsive-image
                class="slide"
                slot="slide"
                slot-scope="{ slide, index }"
                :object="slide"
                size="fullscreen"
            />
        </div>
        <div class="nav-items">
            <div class="nav prev" slot="nav-prev"/>
            <div class="nav next" slot="nav-next"/>
        </div>
    </slide-show>

In the above example, the slides will be outside slides and the nav buttons will be outside of nav-items.

[johndigital]

Looking into this now, I don't actually think it's possible to do what you want unfortunately @drewbaker.

The slots are just being used to identify what a single one of those elements should look like, i.e. what a single pagination item should look like or a single slide should look like. The component itself wraps those items in its own markup and v-for statements and whatnot so the logic all works correctly, so being able to wrap them in your own markup would conflict.

I wish Vue had a good way to deal with this sort of tightly coupled logic between parent and child components but it doesn't. Any other ideas you can think of @SaFrMo ?