想给这个页面添加轮播图功能然后就出现了以下问题

<template>
<div class="tab">
<!-- 目的地精选框 -->
<div class="destination">
<div class="des-bor"><p>海外冬季目的地精选</p><span class="des-span">></span></div>
<div class="des-bor"><p>国内冬季目的地精选</p><span class="des-span">></span></div>
<div class="des-bor"><p>奔向海岛</p><span class="des-span">></span></div>
<div class="des-bor"><p>主题推荐</p><span class="des-span">></span></div>
</div>
<div class="want-des"></div>
<!-- 目的地精选框结束 -->
<!-- 目的地图片轮播图 -->
<div class="des-img">
<img src="../../images/图片/长白山.jpg" alt="">
<a href="" class="prev ab" id="lt"><</a>
<a href="" class="next ab" id="gt">></a>
<ul >
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
<img src="../../images/图片/旅游攻略/" alt="">
<!-- 目的地图片轮播图结束 -->
<!-- 想去的地方导航框 -->
</div>
</template>
<script>
export default {
name:'StrategyTravel'
}
</script>
<style>
.tab{
width: 1100px;
height: 360px;
margin: 0 auto;
}
.destination{
float: left;
margin-left: -250px;
width: 250px;
height: 160px;
border: 1px solid #ddd;
border-bottom: 0;
}
.destination p{
display: inline-block;
margin-left: 15px;
font-size: 15px;
line-height: 40px;
text-align: center;
color: gray
}
.des-bor{
border-bottom: 1px solid #ddd;
}
.des-span{
float: right;
line-height: 40px;
margin-right: 10px;
color: #ddd;
font-size: 15px;
}
/* 目的地精选框结束 */
/* 目的地轮播图 */
.des-img{
position: relative;
float: left;
margin-left: 30px;
height: 100%;
width: 660px;
background-color: pink;
}
.des-img img {
width: 100%;
height: 100%;
}
.des-img .prev{
left: 0;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.des-img .next{
right: 0;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.ab{
width: 20px;
height: 30px;
position: absolute;
top: 50%;
margin-top: -15px;
text-align: center;
color: #fff;
background-color: rgba(255,255,255,.3);
}
.des-img ul {
position: absolute;
top: 270px;
left: 50%;
margin-left: -100px;
float: left;
width: 200px;
height: 30px;
}
.des-img ul li a{
float: left;
margin-top: 8px;
margin-left: 30px;
border-radius: 7px;
width: 12px;
height: 15px;
background-color: #fff;
}
</style>