时间戳

首页 > 解决方案 > 在 vue 中创建轮播指示器

vue.js - 在 vue 中创建轮播指示器

问题描述

我想通过使用滚动在两张幻灯片之间切换，并且我希望有一个指示器来显示正在显示的两张幻灯片中的哪一张。
构建滚动部分并不是很困难，并且已经完成。

我的问题是：
如何从 for 循环中提取 idx 值以了解正在显示的幻灯片中的哪一张？
这样我就可以用指标展示我在哪张幻灯片上。

滚动
这是用于在两个图像之间滚动的代码。

HTML

 <div class="container_large">
     <div v-for="(i,idx) in this.slider_header " class="scroll" :key="idx" >
       <div :style="{height:'82px', width:'100%'}" v-if="idx==0" >
            Slide 1
       </div>
       <div v-if="idx==1" :style="{height:'92px', width:'100%'}" >
         Slide 2
       </div>
   </div>
 </div>

CSS

.container_large{
  width: 100%;
  /* width: 90%; */
  display: flex;
  overflow-x: scroll;
  margin-left: 0%;
  height: 99px;
  position: absolute;
  margin-top: 27%;
  z-index: 2;
}


.scroll{
  min-width:388px;
  position: relative;
  margin-top: 0%;
  border-radius: 8px;
  display: flex;
  height: 92px;
  z-index: 1;
  margin-left: 2%;
  object-fit: cover;
}

指示器
此代码用于指示器显示当前正在显示的两个图像中的哪一个。

 <div :style="{height:'15px', position:'absolute',marginTop:'51%',borderRadius:'8px',zIndex:'3', width:'30px',marginLeft:'43%',backgroundColor:'grey'}">
   <div id="slide1"  :style="{borderRadius:'50%',height:'13px',marginLeft:'8%',marginTop:'1.5%', width:'13px', zIndex:'4',backgroundColor:'white'}">
   </div>
   <div id="slide2"  :style="{borderRadius:'50%',height:'13px',marginLeft:'51%',marginTop:'1.5%', width:'13px', zIndex:'4',backgroundColor:'white'}">
   </div>
 </div>

我想分别添加和v-if="idx==0" 来v-if="idx==1"显示正在看到的其中一个，但是由于它们不在 for 循环中，所以这是行不通的。id="slide1"id="slide2"

问题
如何捕获 idx 值或以其他方式解决此问题以呈现我所在的幻灯片？

标签： vue.js

解决方案

好的，所以我认为您v-if的v-for.

无需创建所有幻灯片，然后只需使用一系列条件渲染其中一个。

你有没有考虑过这样的事情？

  <div class="container_large">
     <div 
      class="slide"
      :style="slides[activeSlide].style">
      {{slides[activeSlide].text}}
     </div>
  </div>

推荐阅读