swiper效果

最新推荐文章于 2023-12-04 10:58:33 发布

爱卿君

最新推荐文章于 2023-12-04 10:58:33 发布

阅读量465

点赞数

分类专栏： swiper 文章标签： html5 html

本文链接：https://blog.csdn.net/weixin_43994434/article/details/120130801

版权

swiper 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了如何利用Swiper库创建带视差效果的滑动展示，通过设置`parallax`参数实现视差位移变化，并调整`speed`控制动画速度。同时，详细阐述了如何配置`slidesPerView`以达到默认显示3张图片，中间全显两边部分显示的效果。提供了两种不同的CSS解决方案来实现这一布局，包括调整滑块宽度、边距和图片展示方式。

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

一：播放时文字飞入

配置参数：parallax--设置为true开启Swiper的视差效果，内容在切换时更有层次感。

parallax有三种视觉效果：视差位移变化，视差透明度变化，视差缩放变化

这里使用的时视差位移变化，要在所需要的元素上增加data-swiper-parallax属性

（还加了speed参数控制速度，调整效果）

const swiper = new Swiper('.swiper-container',{
    autoplay: {
      delay: 2000,
      disableOnInteraction: false,
    },
    speed:1500,
    parallax : true,
  });

二默认显示3张图片，中间显示全部两边显示部分

配置参数slidesPerView--设置slider容器能够同时显示的slides数量(carousel模式)。

 data(){
    return{
      swiperOption: {
        loop: true,
        autoplay: false,
        slidesPerView: "auto",
      },
    }
  },

两种css设置

方法一
.swiper-slide{
  width: 90%!important;
  margin: 0 5%;
}
.swiper-slide-prev{
  right:-8%;
}
.swiper-slide-next{
  left:-8%;

方法二
.swiper-container {
  overflow: visible!important;
  width: 600px;
  height: 300px;
}
.swiper-container .swiper-wrapper .swiper-slide{
  width: 600px;
  border-radius:
  20px;background: palegreen
}
.swiper-container .swiper-wrapper .swiper-slide img{
 border-radius: 20px;
}
.swiper-container .swiper-wrapper .swiper-slide-prev{
 margin-top: 18px;
 height: 284px!important;
}
.swiper-container .swiper-wrapper .swiper-slide-prev img{
 height: 284px!important;
}
.swiper-container .swiper-wrapper .swiper-slide-next{
 margin-top: 18px; height: 284px!important;
}
.swiper-container .swiper-wrapper .swiper-slide-next img{
 height: 284px!important;
}
.swiper-container .swiper-wrapper .swiper-slide-active{
 width: 600px;
 margin-right: 10px;
 margin-left: 10px
}