Блог

Главная - Вопросы по программированию - V-для создания разных экземпляров слайдов vue agile

V-для создания разных экземпляров слайдов vue agile

#javascript #html #css #vue.js #vuejs2

#javascript #HTML #css #vue.js #vuejs2

Вопрос:

Итак, я пытаюсь создать слайд для своего веб-сайта с помощью vue-agile, но всякий раз, когда я использую:

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

Он создает разные экземпляры agile__slides agile__slides--cloned вместо того, чтобы просто загружать img тег с class="slide" для каждого элемента в данных.

Я последовал примеру: 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>

HTML на веб-сайте:

 <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 элемента в моих данных, и, как вы можете видеть, он создает 3 экземпляра agile__slides--cloned вместо создания 3 соответствующих img элементов с class="slide"

Ответ №1:

Попробуйте этот способ.

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

Комментарии:

1. Я сделал это, но при этом возникает некоторая проблема, из-за которой изображение не занимает всю ширину или смешивается с другими слайдами, поэтому мне вроде как нужна единственная версия тега img

2. вы можете применить css к тегу img, чтобы он занимал всю ширину родительского элемента.

3. Я считаю, что я это сделал. Проблема в том, что когда я делаю это так, как я показал, он создает 3 слайда с 3 тегами изображений внутри, когда я должен создать 1 слайд с 3 изображениями внутри

4. Удалось исправить это, добавив критерии показа слайдов, чтобы одновременно отображался только 1 слайд

5. Привет @DeadSec, slides-to-show у меня не работает. Как вы это сделали?