antonreshetov / vue-glide

A slider and carousel as vue component on top of the Glide.js
https://antonreshetov.github.io/vue-glide/
MIT License
269 stars 39 forks source link

Slider inside slider controls #31

Open jaahoo opened 5 years ago

jaahoo commented 5 years ago

I have slider and inside it I have another nested slider. But controls from nested slider affect main slider. They should be somehow scoped.

madhurikulkarni commented 5 years ago

Is there a possibility to do this currently.?

sms-harc commented 4 years ago

I seem to be encountering this issue as well - I am disabling a "parent" glide to stop side swipe events, but once I initialize a child glide that is within one of the parent Glide slides, the parent seems to become re-enabled, not always, but often. I sense it is the scoping of event binding of Glide but have not investigated deeply. I may go to using a different carousel solution for the inner child carousel to work around the issue, but do not favor having multiple carousel components / codebases to worry about long term.

peppeg85 commented 4 years ago

hello, i also need to nest more gliders, or better, one main glider that has more nested gliders, is there a way to achieve this? i see that the inner controls affect also the parent glider. moreover, i can't set the main buttons of the glider, it changes the indexes to 00, 20, 30 and so on. i generate them with a v-for cicle. here is my example (i use tailwind in this project ):

    <vue-glide
                         v-model="active"
                         :perView="mainPerview"
                 >
                     <vue-glide-slide
                             v-for="(el,index) in tabs" :key="index">
                         <vue-glide
                                 v-model="inneractive"
                                 :perView="innerPerview"
                         >
                             <vue-glide-slide
                                     v-for="(item,index) in tabitems[el]" :key="index"
                                     class="mx-2 card-bottom-round rounded-lg images-gradient">
                                 <div v-text="item.title"
                                      class="cursor-pointer text-xs font-bold uppercase px-5 py-3 block">
                                 </div>
                             </vue-glide-slide>
                             <template slot="control">
                                 <button data-glide-dir="<">prev</button>
                                 <button data-glide-dir=">">next</button>
                             </template>
                         </vue-glide>
                     </vue-glide-slide>
                     <template slot="control">
                        <button v-for="(el,index) in tabs" :key="index" :data-glide-dir="index"> {{el+''+index}}</button>
                     </template>
                 </vue-glide>