Как скользить по элементу щелчка с помощью Vue-Carousel?
Я рад задать свой первый вопрос сегодня :) Как скользить по элементу щелчка с помощью Vue-Carousel?
Я хотел бы запустить слайд вправо одним щелчком мыши на моем вводе. Это мой код, основанный на документации:
<carousel id = "demo_carousel">
<slide class = "slides_demo">
<input type = "button" @click = "getNextPage()" value = "Go" />
</slide>
<slide class = "slides_demo">
<p>This is next page</p>
</slide>
</carousel>
И это моя функция:
methods: {
getNextPage:function() {
if (this.currentPage < this.pageCount - 1) {
return this.currentPage + 1;
}
return this.loop ? 0 : this.currentPage;
}
}
Но скольжения не срабатывает. Что я сделал не так? Должен ли я создать свою собственную функцию?
Документация Vue-Carousel: (https://github.com/SSENSE/vue-carousel)
Спасибо за помощь :)
Привет @LimeInTheCoconut Я использую методы из модуля Carousel, которые я использую: github.com/SSENSE/vue-carousel/blob/master/src/Carousel.vue, но я не совсем уверен, что это применимо ...
хорошо, если вы можете воссоздать работающий скрипт: stackoverflow.blog/2014/09/16/… или jsfiddle были бы отличным подспорьем, чтобы понять, что идет не так
@LimeInTheCoconut Я пытался применить эту карусель в качестве библиотеки, но это не сработало :( В любом случае спасибо за вашу помощь, мой друг
codeandbox, вероятно, лучшее место для кодов vue: codeandbox.io/s/vue
Большое спасибо @ A.Lau
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Ладно, ребята, я сам нашел решение. Надеюсь, это поможет людям в будущем :)
Это мой код:
<div class = "VueCarousel-inner">
<carousel id = "demo_carousel">
<slide class = "slides_demo">
<input type = "button" @click = "gotoSlide()" value = "Go" />
</slide>
<slide class = "slides_demo">
<p>This is next page</p>
</slide>
</carousel>
</div>
Раньше был div, класс которого был "VueCarousel-inner". Создает массив со всеми каруселями внутри. Вот почему мне пришлось указать «slider [0]», чтобы настроить таргетинг на мой слайдер.
И функция, которую я создал в методах, которая автоматически запускает слайд, который вы хотите, рядом с экраном:
gotoSlide: function(){
let slider = window.document.getElementsByClassName('VueCarousel-inner');
if (window.innerWidth < 810) {
slider[0].style.transform = "translate3d(" + "-" + slider[0].style.flexBasis + ", 0px, 0px)";
} else {
slider[0].style.transform = "translate3d(-810px, 0px, 0px)";
}
}
И он полностью отзывчивый :)
Всем спасибо за помощь!
вы можете показать остальную часть вашего кода? где хранятся такие переменные, как currentPage или pageCount?