Swiper垂直异形滚动

洋小驼

已于 2024-06-21 11:25:29 修改

阅读量220

点赞数 1

文章标签： javascript 前端 vue.js

于 2024-06-21 11:17:24 首次发布

本文链接：https://blog.csdn.net/qq_34925033/article/details/139855929

版权

在这里插入图片描述

<!DOCTYPE html>
<!-- saved from url=(0048)https://www.swiper.com.cn/demo/slides-scale.html -->
<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <title>Swiper demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="https://www.swiper.com.cn/package/swiper-bundle.min.css">
  <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>

  <!-- Demo styles -->
  <style>
    html,
    body {
      position: relative;
      height: 100%;
    }

    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }

    .swiper-container {
      width: 100%;
      height: 100%;
    }

    .swiper {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0px 0px 11px #ccc;
    }

    .swiper-slide.swiper-slide-active{
      z-index: 999!important;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  </style>
</head>

<body>
  <!-- Swiper -->
  <div class="swiper-container">
    <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 class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
    </div>
    <!-- <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-pagination"></div> -->
  </div>

  <!-- Swiper JS -->
  <script type="text/javascript" src="https://www.swiper.com.cn/package/swiper-bundle.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    // $(function () {
    // })
    var swiper1 = new Swiper('.swiper-container', {
      direction: 'vertical',
      slidesPerView: 7,
      spaceBetween: 0,
      centeredSlides: true,
      loop: true,
      watchSlidesProgress: true,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      autoplay: {
        delay: 2500,
        disableOnInteraction: false
      },
      observer: true, //修改swiper自己或子元素时，自动初始化swiper
      observeParents: true, //修改swiper的父元素时，自动初始化swiper
      effect: 'coverflow', //  切换效果-3d
      coverflowEffect: {
        rotate: 0,
        stretch: 10, //每个slide之间的拉伸值，越大slide靠得越紧。 默认0。
        depth: 60,//slide的位置深度。值越大z轴距离越远，看起来越小。 默认100。
        modifier: 2,//depth和rotate和stretch的倍率，相当于depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显。默认1。
        slideShadows: false,//开启slide阴影。默认 true。
      },
      on: {
        // setTranslate: function () {
        //   let slides = this.slides
        //   let zindex = 99
        //   for (let i = 0; i < slides.length; i++) {
        //     let slide = slides.eq(i)
        //     let progress = slides[i].progress
        //     // console.log(progress)
        //     if(progress<0){
        //       zindex = zindex-10
        //     }
        //     //slide.html(progress.toFixed(2)); 看清楚progress是怎么变化的
        //     slide.css({ 'opacity': '', 'background': '' ,'z-index':zindex}); slide.transform('');//清除样式
        //     slide.transform('scale(' + (1 - Math.abs(progress) / 9) + ')');
        //   }
        // },
        slideChangeTransitionEnd: function(){
          // console.log(this.realIndex)
        },
        click: function (swiper) {
          // console.log(this.clickedIndex)
          // swiper1.slideToLoop(swiper1.clickedIndex/2);
				}
        // setTransition: function (transition) {
        //   for (var i = 0; i < this.slides.length; i++) {
        //     var slide = this.slides.eq(i)
        //     slide.transition(transition);
        //   }
        // },
      },
    });

    swiper1.el.onmouseover = function () {
      swiper1.autoplay.stop();
    }
    swiper1.el.onmouseleave = function () {
      swiper1.autoplay.start();
    }
  </script>
</body>

</html>

vue版(“vue-awesome-swiper”: “^3.1.3”,)

<template>
	<div class="">
		<div class="siwDiv" style="height: 300px;" @mouseenter="mouseOver" @mouseleave="mouseLeave">
			<swiper :options="swiperOption1" ref="mySwipers1">
				<swiper-slide @click="swiperSlide(0)">slide1</swiper-slide>
				<swiper-slide @click="swiperSlide(1)">slide2</swiper-slide>
				<swiper-slide @click="swiperSlide(2)">slide3</swiper-slide>
				<swiper-slide @click="swiperSlide(3)">slide4</swiper-slide>
				<swiper-slide @click="swiperSlide(4)">slide5</swiper-slide>
				<swiper-slide @click="swiperSlide(5)">slide6</swiper-slide>
				<swiper-slide @click="swiperSlide(6)">slide7</swiper-slide>
				<!-- <div class="swiper-pagination" slot="pagination"></div>
				<div class="swiper-button-prev" slot="button-prev"></div>
				<div class="swiper-button-next" slot="button-next"></div> -->
			</swiper>
		</div>
	</div>
</template>

export default {
	name: 'HelloWorld',
	props: {
		msg: String
	},
	data() {
		return {
			swiperOption1: {
				direction: 'vertical',
				slidesPerView: 7,
				spaceBetween: 0,
				centeredSlides: true,
				loop: true,
				watchSlidesProgress: true,
				pagination: {
					el: '.swiper-pagination',
					clickable: true,
				},
				autoplay: {
					delay: 2500,
					disableOnInteraction: false
				},
				effect: 'coverflow', //  切换效果-3d
				coverflowEffect: {
					rotate: 0,
					stretch: 2, //每个slide之间的拉伸值，越大slide靠得越紧。 默认0。
					depth: 60,//slide的位置深度。值越大z轴距离越远，看起来越小。 默认100。
					modifier: 2,//depth和rotate和stretch的倍率，相当于depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显。默认1。
					slideShadows: false,//开启slide阴影。默认 true。
				},
				on: {
					// setTranslate: function () {
					// 	let slides = this.slides
					// 	let zindex = 99
					// 	for (let i = 0; i < slides.length; i++) {
					// 		let slide = slides.eq(i)
					// 		let progress = slides[i].progress
					// 		if (progress < 0) {
					// 			zindex = zindex - 10
					// 		}
					// 		//slide.html(progress.toFixed(2)); 看清楚progress是怎么变化的
					// 		slide.css({ 'opacity': '', 'background': '', 'z-index': zindex }); slide.transform('');//清除样式
					// 		slide.transform('scale(' + (1 - Math.abs(progress) / 9 + 0.2) + ')');
					// 	}
					// },
					click: ()=>{
                      // 通过$refs获取对应的swiper对象
                     // let swiper = this.$refs.mySwipers1.swiper;
                     // console.log(swiper.clickedIndex) //当前点击的索引
                    },
					// setTransition: function (transition) {
					//   for (var i = 0; i < this.slides.length; i++) {
					//     var slide = this.slides.eq(i)
					//     slide.transition(transition);
					//   }
					// },
				},
			},
	}
},
methods: {
	mouseOver() {
		this.$refs.mySwipers1.swiper.autoplay.stop();
	},
	mouseLeave() {
		this.$refs.mySwipers1.swiper.autoplay.start();
	},
	swiperSlide(index){
      this.$refs.mySwipers1.swiper.slideToLoop(index);
    },
}

横向异形

在这里插入图片描述

var mySwiper = new Swiper('.swiper-container',{
                loop:true,
                autoplay:true,//等同于以下设置
                /*autoplay: {
                    delay: 3000,
                    stopOnLastSlide: false,
                    disableOnInteraction: true,
                },*/
                effect: "coverflow",
                slidesPerView:3,
                coverflowEffect: {
                    rotate : -30,
                    stretch: -10,
                    depth: 100,
                    modifier: 1,
                    slideShadows: true,
                },
            })