vue項目中swiper輪播active圖片實現(xiàn)居中并放大

更新時間：2023年05月18日 14:45:51 作者：葉子_o

這篇文章主要介紹了vue項目中swiper輪播active圖片實現(xiàn)居中并放大方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

swiper輪播active圖片實現(xiàn)居中并放大

項目中用的是vue-awesome-swiper，vue-awesome-swiper是基于swiper 4.0的。所以參數(shù)參考swiper 4.0。

使用場景如下

要求左右切換時每次只移動一個圖片，中間的圖片始終放大，其他圖片有不透明度。

解決思路

在官方文檔中，active slide默認是居左的，通過把centeredSlides設(shè)置為true可以使其居中，但是左邊會空著。

解決思路就是，在第一張時候手動去設(shè)置位移的距離。

代碼如下

template部分：

<div class="swiper-father swiper-hot">
   <swiper :options="swiperOption" ref="mySwiper" v-if="homeData[5]">
        <swiper-slide  
           v-for='(item,index) in homeData[5]'
           :key="index"> 
           <img @click="goInto(item.id)" :src="item.imgUrl">
       </swiper-slide>                              
   </swiper>
   <div class="swiper-button-prev btn-swiper swiper-button"  slot="button-prev"></div>
   <div class="swiper-button-next btn-swiper swiper-button" slot="button-next"></div>
</div>

data部分：

data() {
	swiperOption: {
    slidesPerView: 3, // 顯示數(shù)量
    centeredSlides:true,   // 重點：讓active slide居中
    loop : true, //循環(huán)輪播    
    navigation: { // 左右按鈕
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
    },
    on:{
        init(){
            this.setTranslate(0);
        },
        transitionStart(){ // 開始translate之前觸發(fā)
            // 如果是第一張
            if(this.activeIndex == 0){
                this.setTranslate(0); // 因為左邊會空出一張圖的距離，所以設(shè)置位移為0
            }
        },
	}
}

swiper輪播—異形輪播

最近經(jīng)常會碰到很多用swiper插件做各種各樣輪播圖的需求，沒有做過3d異形輪播圖，所以研究了一下，把經(jīng)驗給大家分享一下

上面圖片就是輪播圖所要達到的效果：焦點圖片居中并向前突出，自動輪播。

代碼介紹：

1.我的移動端屏幕尺寸640px，這個移動端屏幕適應(yīng)是封裝好的，如果需要引用，只需要改一下屏幕尺寸就好了。

2.我的圖片大小是251*441。

3.swiper：指滑動、切換（整個滑動對象，有時特指滑塊釋放后仍然正向移動直到貼合邊緣的過程（過渡））

container：指容器（swiper的容器里面包括滑動快（slide）的集合（wrapper）、分頁器（pagination）、前進按鈕等）
wrapper：指包含（觸控的對象，可觸摸區(qū)域，移動的塊的集合，過渡時會隨slide切換產(chǎn)生位移）
slider：指滑塊（切換的塊中的一個，可以包含文字、圖片、html元素或另外一個swiper
pagination：指分頁器（指示slide的數(shù)量和當前活動的slide）
active：指活動的，激活的（可視的（visible）slide是活動的，當可視slide不止一個時，默認最左邊那個活動的）

4.詳細參數(shù)配置參照swiper配置

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet"  rel="external nofollow" >
<script> 
    //屏幕適應(yīng) --移動端
    (function (win, doc) {
        if (!win.addEventListener) return;
        var html = document.documentElement;
        function setFont() {
            var html = document.documentElement;
            var k = 640;
            html.style.fontSize = html.clientWidth / k * 100 + "px";
        }
        setFont();
        setTimeout(function () {
            setFont();
        }, 300);
        doc.addEventListener('DOMContentLoaded', setFont, false);
        win.addEventListener('resize', setFont, false);
        win.addEventListener('load', setFont, false);
    })(window, document);
    </script>
<style>
.swiper-container{width:4.14rem;height:4.88rem;margin:0 auto;position:relative;}
        .swiper-container img{display:block;width:2.51rem;height:4.41rem;margin:0 auto;}
        .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {bottom:0;left:0;width:100%;}
        .swiper-pagination-bullet-active {background-color:#ffd200;}
</style>
</head>
<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="ossweb-img/s-img1.png">
            </div>
            <div class="swiper-slide">
                <img src="ossweb-img/s-img2.png">
            </div>
            <div class="swiper-slide">
                <img src="ossweb-img/s-img3.png">
            </div>
            <div class="swiper-slide">
                <img src="ossweb-img/s-img4.png">
            </div>
            <div class="swiper-slide">
                <img src="ossweb-img/s-img5.png">
            </div>
        </div>
        <div class="swiper-pagination"></div>
    </div>
<!-- 輪播圖 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.js"></script>
<script>
// 輪播圖
 // 初始化swiper
 var mySwiper2 = new Swiper('.swiper-container', {
	autoplay:2000,//自動滑動
	speed:500,//自動滑動開始到結(jié)束的時間（單位ms）
	loop:true,//開啟循環(huán)
	loopedSlides:5,//在loop模式下使用slidesPerview:'auto',還需使用該參數(shù)設(shè)置所要用到的loop個數(shù)。
	slidesPerView:'auto',//設(shè)置slider容器能夠同時顯示的slides數(shù)量(carousel模式)。另外，支持'auto'值，會根據(jù)容器container的寬度調(diào)整slides數(shù)目。
	effect:'coverflow',//可以實現(xiàn)3D效果的輪播,
	pagination:'.swiper-pagination',//分頁器
	centeredSlides:true,//設(shè)定為true時，active slide會居中，而不是默認狀態(tài)下的居左。
	coverflow:{
		rotate:0,//slide做3d旋轉(zhuǎn)時Y軸的旋轉(zhuǎn)角度。默認50。
		stretch:100,//每個slide之間的拉伸值，越大slide靠得越緊。 默認0。
		depth:150,//slide的位置深度。值越大z軸距離越遠，看起來越小。 默認100。
		modifier:1,//depth和rotate和stretch的倍率，相當于depth*modifier、rotate*modifier、stretch*modifier，值越大這三個參數(shù)的效果越明顯。默認1。
		slideShadows:false,//開啟slide陰影。默認 true。
	},
});
// rotate :number,   //側(cè)轉(zhuǎn)角度（正值凹陷）、（負值凸出）
//      stretch : number,  //每個slide之間拉伸值（正值緊貼）、（負值遠離）
//      depth :  number,   // 正值越大slide為遠景圖（可負值）
//      modifier :  number,  //depth和rotate和stretch的倍率，值越大這三個參數(shù)的效果越明顯
//      shadows :  true     //是否使用陰影
</script>
</body>
</html>

這樣一個異形輪播圖就好啦！