这个想法是写一个滑块，这样在 N 次之后，带有文本的图片就会变成另一张幻灯片，等等。在一个圆圈中，也可以使用 dotnav 在前后滚动幻灯片。在 JQ 上，我会很快做所有事情，但使用 Vue 并仅使用它不会很快奏效。
N次后，在“li”标签中写入活动类，删除前一个，它应该与dotnav对称。谁能为此提供建议或帮助？感谢大家的回应！
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
items: [
{
title: 'Center of osteopatia and rehabilitation',
url_img: 'https://i.imgur.com/gQp3VSW.jpg',
info_block: [
{
incremental: '+800%',
description: 'Increasing the number of transactions from organic search results'
},
{
incremental: '+240%',
description: 'Raising your revenue'
}
]
},
{
title: 'SLide 2',
url_img: 'https://newevolutiondesigns.com/images/freebies/space-wallpaper-5.jpg',
info_block: [
{
incremental: '+140%',
description: 'Increasing the numb organic search results'
},
{
incremental: '+790%',
description: 'Raising your revenue'
}
]
},
{
title: ' SLIDE 3',
url_img: 'https://www.planwallpaper.com/static/images/4433836-space-wallpapers.jpg',
info_block: [
{
incremental: '+110%',
description: 'Increasing the number of trans'
},
{
incremental: '+99%',
description: 'Raising your revenue'
}
]
}
]
},
methods: {
index_dotnav:function (index) {
console.log(index);
}
}
}) ul{
padding-left: 0;
margin: 0;
}
.img-block,
section > *,
.uk-slideshow,
.uk-slideshow > ul {
height: 100vh !important;
}
.information-slide .uk-container {
position: absolute;
z-index: 1;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto 0;
display: flex;
flex-direction: column;
justify-content: center;
color: #fff;
}
.slideshow > div.dotnav-block {
top: 50%;
left: 95%;
z-index: 2;
}
.slideshow > div.dotnav-block li a {
background: #fff;
}
.slideshow > div.dotnav-block li.active a {
width: 13px;
height: 13px;
}
.slideshow > div.dotnav-block ul {
align-items: center;
}
.slideshow .slideshow-items > li {
display: none;
}
.slideshow .slideshow-items > li.active {
display: block;
position: relative;
}
.slideshow .slideshow-items > li img {
height: 100%;
width: auto;
object-fit: cover;
}<!DOCTYPE html>
<html>
<head>
<title>Тест</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.14/css/uikit.min.css"/>
</head>
<body>
<div id="app">
<section>
<div class="uk-child-width-1-2" uk-grid>
<div>
<h1>{{ message }}</h1>
</div>
<div>
<div class="slideshow">
<ul class="slideshow-items">
<li v-for="(item,index) in items" :class="{'active':index===0}" v-on:click="select($event)">
<div class="information-slide">
<div class="img-block">
<img v-bind:src="item.url_img" alt="">
</div>
<div class="uk-container">
<div class="title title-1">{{item.title}}</div>
<div class="info-block">
<div class="info" v-for="(iblock,ind) in item.info_block">
<div class="incremental">{{iblock.incremental}}</div>
<div class="description descr-1">{{iblock.description}}</div>
</div>
</div>
</div>
</div>
</li>
</ul>
<div class="dotnav-block uk-position-bottom-center uk-position-small">
<ul class="uk-dotnav uk-dotnav-vertical">
<li :class="{'active':index===0}" v-for="(item,index) in items" v-on:click="index_dotnav(index)">
<a href="#">Item {{index}}</a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.14/js/uikit.min.js"></script>
</body>
</html>
您需要存储所选元素的索引（在这种情况下， c 在 data 中创建
selectedIndex）并更改它。为了每 2 秒创建一个滑动开关，我创建了一个函数setMyTimeout.