利用swiper2写一个上一篇要求的样式的轮播图

最新推荐文章于 2023-10-07 17:31:31 发布

Romatic_1

最新推荐文章于 2023-10-07 17:31:31 发布

阅读量338

点赞数

分类专栏： web 文章标签： swiper2轮播图 vue

本文链接：https://blog.csdn.net/Romatic_1/article/details/94598264

版权

web 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文分享了使用Swiper2实现轮播图的过程，包括解决IE浏览器兼容性问题，调整样式以匹配项目需求，以及实现hover效果。文章详细介绍了HTML、CSS和JS代码配置，展示了如何在Vue项目中初始化Swiper2，以及通过reInit方法更新轮播图数据。

摘要由CSDN通过智能技术生成

本来用swiper4写的轮播图，都写好了发现ie不兼容，烦，就又换了swiper2…
上一篇用iview改的样式符合，但是没有hover效果，swiper2就可以完美符合所有要求

效果图（已经将项目里接口传过来的数据打了码）
页面有效宽度规定是1200px，传过来的产品一屏显示4个，点击左右按钮切换，一次切换一张
hover效果为第一张图
在这里插入图片描述

html:

<div class="swiper-container swiper2">
       <div class="swiper-wrapper">
             <div class="swiper-slide"  v-for="(slide,index) in prolist" :key="index" @mouseover="overImg(index)" @mouseout="toggleHide()">
                  <div class="slidebg" :class="{blackbg:current==index}">
                      < img :src="imgUrl+slide.productsIcon" />
                      <div style="padding: 15px;">
                          <div class="name" @click="detail(slide.productsId)">{{slide.productsName}}</div>
                          <div class="text">{{slide.productIntroduce}}</div>
                           <div class="apply-btn" @click="apply()">立即申请</div>
                   </div>
             </div>
       </div>
 </div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>

css:

.swiper2{
      margin: 0 60px 0 90px;
       height: 380px;
 }
 .swiper-slide {
     position: relative;
     text-align: left;
     .slidebg{
          border-radius: 5px;
          width: 230px ;
          height: 380px;
          background-color: #ffffff;
          >img{height: 180px;width: 100%;background: #ffffff;}
      }
      .name{
            font-size: 24px;
            cursor: pointer;
            text-align: center;
      }
      .text{
          color: #999999;
          font-size: 14px;
          margin: 15px 0;
          height: 37px;
          overflow: hidden;
          text-overflow: ellipsis;
          /*! autoprefixer: off */
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
           /* autoprefixer: on */
      }
      .apply-btn{
           width:121px;
           height:35px;
           color: #666666;
           font-size: 16px;
           border: 1px solid #AAAAAA;
           border-radius:17px;
           text-align: center;
           line-height:35px;
           position: absolute;
           left: 45px;
           bottom: 20px;
           cursor: pointer;
       }
       .blackbg{
            background-color: #323232;
            box-shadow:0px 8px 15px 0px rgba(50,50,50,0.28);
            .name{
                color: #EAB15E;
            }
            .apply-btn{
                background: linear-gradient(bottom, #E7A838 0%,#F3C880 100%);
                /*! autoprefixer: off */
                background: -webkit-linear-gradient(top, #F3C880, #E7A838);
                /* autoprefixer: on */
                background: -moz-linear-gradient(top, #F3C880, #E7A838);
                background: -o-linear-gradient(top, #F3C880, #E7A838);
                background: -ms-linear-gradient(top, #F3C880, #E7A838);
                color: #000000;
                // font-size: 13px;
                border: none;
            }
        }
    }
.swiper-button-prev, .swiper-container-rtl .swiper-button-next{
    position: absolute;
    background-image: url(../commom/img/home/6.png);
    height: 40px;
    width: 40px;
    background-size: contain;
    left: 0;
    outline: none;
    top: 40%;
}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev{
    position: absolute;
    background-image: url(../commom/img/home/7.png);
    height: 40px;
    width: 40px;
    background-size: contain;
    right: 0px;
    outline: none;
    top: 40%;
}

js:

//在mounted初始化
let mySwiper;
mounted(){
	mySwiper = new Swiper('.swiper2', {
	   loop: false,
	    slidesPerView: 4,
	    // slidesPerView: 'auto',
	    slidesPerGroup : 1,
	    visibilityFullFit : true,
	});
	$('.swiper-button-prev').on('click', function(e){
	    e.preventDefault()
	    mySwiper.swipePrev()
	})
	$('.swiper-button-next').on('click', function(e){
	    e.preventDefault()
	    mySwiper.swipeNext()
	})
}

//从接口读取值之后，用reInit()方法再次加载轮播图
methods:{
	getList(){
	   this.$axios.get('你的请求地址').then(res =>{
	        // console.log(res);
	        this.prolist = res.data;
	        this.$nextTick(()=>{
	            mySwiper.reInit(); //再次加载就好了
	        })
	    })
	},
	//hover效果
	overImg(index){
       this.current = index;
    },
    toggleHide(){
        this.current = null;
    }
}

en，大概就是这样