u-swiper 如何实现轮播图单侧3d效果

我实现的：

img

u-swiper 如何实现轮播图单侧3d效果

目标：

img

我的代码







有帮助的话采纳一下
使用u-swiper组件实现轮播图单侧3D效果,可以通过调整scale、translate等样式来实现:

  1. 设置swiper的effect为cube,开启3D效果。
  2. 通过scale调整当前item的缩放比例,例如scale(0.8, 0.8)。
  3. 使用translateX给不同item设置不同的x轴偏移量,形成3D立体感。
  4. 通过控制prev/next item的样式,只保留一侧的3D效果。
    具体的css样式可以如下:
    css
.u-swiper {
  effect: cube; 
}

.u-swiper-item {
  transform: scale(0.8, 0.8) translateX(50px);
}

.u-swiper-item-prev {
  transform: scale(1) translateX(0); 
}

.u-swiper-item-next {
  transform: scale(1) translateX(0);
}

这样就可以只在当前item一侧实现3D缩放和位移效果,进而达到轮播图的单侧3D效果。

  • 这个问题的回答你可以参考下: https://ask.csdn.net/questions/7687270
  • 这篇博客也不错, 你可以看下小程序swiper的坑,小程序轮播图swiper如何让内容撑起高度,
  • 除此之外, 这篇博客: 如何在一个页面中用多个 swiper 插件中的 场景： 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

  • 当我们在写页面的时候，我们总会用到插件。例如轮播图，我们就会用到 Swiper 这个插件库，那么怎么在页面中使用多个 Swiper 插件呢 ？

    HTML 代码：

    <!-- Swiper -->
  <div class="swiper-container swiperOne">  <!--自定义新增class:swiperOne js代码中使用类名-->
        <div class="swiper-wrapper">  
            <div class="swiper-slide">Slide 1</div>
		<div class="swiper-slide">Slide 2</div>
		<div class="swiper-slide">Slide 3</div>
		<div class="swiper-slide">Slide 4</div>
                <div class="swiper-slide">Slide 5</div>
            </div>  
        <div class="swiper-pagination swpOne"></div>  <!--自定义新增class:swpOne js代码中使用类名-->
    </div>  
    <div class="swiper-container swiperTwo">  <!--自定义新增class:swiperTwo js代码中使用类名-->
        <div class="swiper-wrapper">  
	    <div class="swiper-slide">Slide 1</div>
	    <div class="swiper-slide">Slide 2</div>
	    <div class="swiper-slide">Slide 3</div>
	    <div class="swiper-slide">Slide 4</div>
	    <div class="swiper-slide">Slide 5</div>
        </div>  
        <div class="swiper-pagination swpTwo"></div>  <!--自定义新增class:swpTwo js代码中使用类名-->
    </div>

    JS 代码：

    <script type="text/javascript">
var swiper = new Swiper('.swiperOne', { 
	autoplay:true, 
    pagination: {
        el: '.swpOne',
    },    
	effect : 'coverflow',
	slidesPerView: 3,
	centeredSlides: true,
	coverflowEffect: {
	rotate: 30,
	stretch: 10,
	depth: 60,
	modifier: 2,
	slideShadows : true
	},
});   
var swiper2 = new Swiper('.swiperTwo', {  
    autoplay:true,  
     pagination: {
        el: '.swpTwo',
     },  
    direction: 'vertical',  
    slidesPerView: 1,  
    paginationClickable: true,  
    spaceBetween: 0,  
    mousewheelControl: true  
});  
</script>

    其实，两个 Swiper 的不同点在于它 创建出来的实例对象 和它的 页面元素

    var swiper = new Swiper('.swiperOne',{})
var swiperTwo = new Swiper('.swiperTwo',{})

    pagination:{el:'.swpOne',''},
pagination:{el:'.swpTwo',''},
  • 您还可以看一下 汤小洋老师的Swiper移动端滑动插件视频教程课程中的 Swiper简介小节, 巩固相关知识点