触发 'vue-owl-carousel' 包 Vue.js 中的下一个和上一个元素

Question

我在使用 javascript 在 Vue 中触发 vue-owl-carousel 包中的下一个或上一个项目时遇到问题。

有人可以帮忙吗？

轮播代码：

<carousel id="newGamesCarousel" :items="1" :dots="false" :nav="false" :margin="10" :key="refresh">
  <div class="newGames-item" v-for="item in newProducts">
    <div class="details">
      <div class="labels flex-wrap">
        <span class="mb-1" v-for="platform in item.platforms">{{platform.name}}</span>
        <span class="mb-1" v-for="region in item.regions">ریجن {{region.name}}</span>
      </div>
      <h2 class="gameTitle">{{item.name}}</h2>
      <div class="priceBox">
        <router-link class="add-to-cart" :to="{path: '/game/'+item.id+'/'+stringToSlug(item.title)+''}">+</router-link>
        <div class="price">
          <div class="former" v-if="item.sale_percent !== false">
            <span class="percent">%{{item.sale_percent}}</span>
            <span class="total">{{item.price}}</span>
          </div>
          <div class="later">
            {{item.regular_price}}
            <span class="unit">تومان</span>
          </div>
        </div>
      </div>
    </div>

    <figure class="image">
      <img v-bind:src="item.thumbnail_url" v-bind:alt="item.name">
    </figure>
  </div>
</carousel>

以及下一个和上一个按钮：

<div class="arrows">
  <svg class="nextCarousel" id="newGamesNext" viewBox="0 0 24 24">
    <use xlink:href="/src/assets/imgs/sprite.svg#arrow"></use>
  </svg>
  <svg class="prevCarousel" id="newGamesPrev" viewBox="0 0 24 24">
    <use xlink:href="/src/assets/imgs/sprite.svg#arrow"></use>
  </svg>
</div>

Answer 1

根据此处描述的文档：https://www.npmjs.com/package/vue-owl-carousel

Custom prev and next buttons using slot, the buttons will be hidden while start and end in non-loop mode
<carousel>

  <template slot="prev"><span class="prev">prev</span></template>

  <template slot="next"><span class="next">next</span></template>

</carousel>

添加所有幻灯片后在 carousel 标签内

你可以添加 <template slot="{{prev/next}}">{{add your icon image here }}</template> 它应该自己处理上一个和下一个事件

<template slot="prev">
   <svg class="nextCarousel" id="newGamesNext" viewBox="0 0 24 24"><use xlink:href="/src/assets/imgs/sprite.svg#arrow"></use></svg>
</template>

我认为这应该可以解决您的问题。如果我遗漏了什么，请随时添加您在此处获取代码所遵循的文档/教程的 URL。请让我知道解决方案是否有效

Answer 2

<v-flex>
  <span @click="$refs.prev.click()">
      PREVIOUS
  </span>
  <span @click="$refs.next.click()">
      NEXT 
  </span>
</v-flex>


<v-flex>

  <carousel>

   <template slot="prev"><span hidden ref="prev" class="prev">prev</span></template>

   <template slot="next"><span hidden  ref="next" class="next">next</span></template>

  </carousel>

</v-flex>

触发 'vue-owl-carousel' 包 Vue.js 中的下一个和上一个元素

Trigger next and previous element in 'vue-owl-carousel' package Vue.js

javascript

owl-carousel

vue.js

owl-carousel-2

vuejs2