将一维数组转为三维数组，html引入swiper并且自定义左右切换按钮

野性酷女 2024-03-24 18:28 64阅读 0赞

## 首先 ##

在head中引入swiper的css和js

## 下载地址 ##

[https://www.swiper.com.cn/download/index.html\#file1][https_www.swiper.com.cn_download_index.html_file1]

## 代码 ##

主要看swiper结构，自定义按钮样式放在swiper盒子外面，然后再用css隐藏它本来的箭头样式，一定要记住在按钮最外层包一个大盒子class为next-box设置相对定位。这样自定义的按钮才会出现，不然就会出不来。

#### html ####

<div class="carousel-container">
    <div class="swiper">
    	<div class="swiper-wrapper" v-if="noticeList2.length > 0">
    		<div class="swiper-slide" v-for="(item,index) in noticeList2" :key="index">
    			<div v-for="(item2,index2) in item" :key="index2">
    				<div class="single-blog">
    					<div class="blog-img img-full">
    						<a :href="'detail.html?noticeId='+item2.noticeId" :title="item2.noticeName">
    							<img style="width: 100%;height: 240px;" :src="item2.noticeImage" alt="">
    						</a>
    					</div>
    					<div class="blog-content">
    						<h3 class="post-title text-ellipsis-1"><a :href="'detail.html?noticeId='+item2.noticeId" :title="item2.noticeName">{
        {
        item2.noticeName||''}}</a></h3>
    						<p class="post-description text-ellipsis-2">{
        {
        item2.noticeDesc||''}}</p>
    						<div class="d-flex justify-content-between">
    							<div class="text-muted">{
        {
        defaultType(item2.defaultType)}}相关</div>
    							<div class="text-muted">{
        {
        parseTime(item2.createTime*1000,'{y}-{m}-{d}')}}</div>
    						</div>
    					</div>
    				</div>
    			</div>
    		</div>
    	</div>
    </div>
    //左右切换按钮
    <div class="next-box">
    	<div class="swiper-button-prev">
    		<el-button circle size="large">
    			<i class="fa fa-arrow-left"></i>
    		</el-button>
    	</div>
    	<div class="swiper-button-next">
    		<el-button type="danger" circle size="large">
    			<i class="fa fa-arrow-right "></i>
    			
    		</el-button>
    	</div>
    </div>
    </div>

#### JS 这是数组转换方法 ####

#### CSS ####

.swiper {
        
        width: 100%;
    }  
    .next-box {
        
    	position: relative;
    }
    .swiper-button-next:after, .swiper-button-prev:after {
        
    	display: none;
    }
    .swiper-button-next, .swiper-button-prev {
        
    	position: initial !important;
    	margin: 0 !important;
    }
    .swiper-slide {
        
    	display: flex;
    }

## 实现效果 ##

就是一行展示三列数据，每次切换一次， 展示一个。  
![在这里插入图片描述][21b967b8421644c2aecb08e3787ea990.png]

注意： 点击按钮或者分页出现黑色边框

.swiper-pagination-bullet-active:focus {
        
    	outline: none;
    }

[https_www.swiper.com.cn_download_index.html_file1]: https://www.swiper.com.cn/download/index.html#file1
[21b967b8421644c2aecb08e3787ea990.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/55e8d9482d3242919601e9c3394943f3.png