इसलिए मैं अपनी वेबसाइट के लिए vue-agile के साथ एक स्लाइड बनाने की कोशिश कर रहा हूं, लेकिन जब भी मैं इसका उपयोग करता हूं:

<img class="slide" v-for="ad in ad_place_1" :key="ad.id" :src="ad.image_url"/>

यह डेटा में प्रत्येक आइटम के लिए img टैग को class="slide" के साथ लोड करने के बजाय agile__slides agile__slides--cloned के अलग-अलग उदाहरण बनाता है।

मैंने उदाहरण का अनुसरण किया: https://codepen.io/lukaszflorczak/pen/xezgmO

मेरा कोड:

.agile {
  max-width: 1270px;
}

.agile__slides,
.agile__track,
.slide,
.agile__list {
  width: 100%;
}

.agile__actions {
  margin-top: 10px;
}

.agile__actions button {
  background: transparent;
  border: none;
  color: #ccc;
  cursor: pointer;
  font-size: 24px;
  transition-duration: .3s;
}

.agile__actions button {
  color: #888
}

.agile__actions .agile__dot button {
  background-color: #eee;
  border: none;
  cursor: pointer;
  display: block;
  height: 10px;
  font-size: 0;
  line-height: 0;
  padding: 0;
  transition-duration: .3s;
  width: 10px;
  margin: 0 10px;
}

.agile__actions .agile__dot button:hover,
.agile__actions .agile__dot--current {
  background-color: #888
}

.slide {
  display: block;
  height: 500px;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vue-agile"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-agile/dist/VueAgile.css">
<agile ref="carousel" :dots="true" :infinite="true">
  <img class="slide" v-for="ad in ad_place_1" :key="ad.id" :src="ad.image_url" />
  <template slot="prevButton"><span class="fas fa-chevron-left"></span></template>
  <template slot="nextButton"><span class="fas fa-chevron-right"></span></template>
</agile>

वेबसाइट में एचटीएमएल:

<div class="agile__track" style="transform: translate(0px); transition: transform 0ms ease 0s;">
  <div class="agile__slides agile__slides--cloned"><img src="https://storage.cloud.google.com/ruby-files/images/ruby.png" class="slide"><img src="https://storage.cloud.google.com/ruby-files/images/colvin-pt.jpg" class="slide"><img src="https://storage.googleapis.com/ruby-files/images/theproteinworks38.jpg"
      class="slide"></div>
  <div class="agile__slides agile__slides--regular"><img src="https://storage.cloud.google.com/ruby-files/images/ruby.png" class="slide"><img src="https://storage.cloud.google.com/ruby-files/images/colvin-pt.jpg" class="slide"><img src="https://storage.googleapis.com/ruby-files/images/theproteinworks38.jpg"
      class="slide"></div>
  <div class="agile__slides agile__slides--cloned"><img src="https://storage.cloud.google.com/ruby-files/images/ruby.png" class="slide"><img src="https://storage.cloud.google.com/ruby-files/images/colvin-pt.jpg" class="slide"><img src="https://storage.googleapis.com/ruby-files/images/theproteinworks38.jpg"
      class="slide"></div>
</div>

मेरे पास मेरे डेटा में 3 आइटम हैं और जैसा कि आप class="slide" के साथ 3 संगत img आइटम बनाने के बजाय agile__slides--cloned के 3 इंस्टेंस बनाते हुए देख सकते हैं।

0
DeadSec 25 सितंबर 2020, 15:42

1 उत्तर

सबसे बढ़िया उत्तर

इस तरह से प्रयास करें।

   <div  v-for="ad in ad_place_1" :key="ad.id">
    <img class="slide" :src="ad.image_url"/>
    </div>
1
deepak 25 सितंबर 2020, 16:08