切换效果：other-translate 另类轮播图

最新推荐文章于 2023-05-12 09:28:24 发布

geinvse_seg

最新推荐文章于 2023-05-12 09:28:24 发布

阅读量197

点赞数 1

分类专栏： java 后端文章标签： css3 css javascript

本文链接：https://blog.csdn.net/geinvse_seg/article/details/123575059

版权

java 同时被 2 个专栏收录

82 篇文章 2 订阅

订阅专栏

后端

16 篇文章 0 订阅

订阅专栏

文章目录

前言
一、最终效果
二、代码复现
总结

前言

swiper轮播图效果扩展三 —— other-translate 另类轮播图。

一、最终效果

先来看一下我们的最终效果：
请添加图片描述

二、代码复现

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>other-translate</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />

    <!-- Link Swiper6 CSS -->
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />

    <!-- 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;
        overflow: hidden;
      }

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

      .swiper-slide {
        background: #fff;
        text-align: center;
        font-size: 10vw;
        overflow: hidden;
      }

      .slide-inner {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background-size: cover;
        background-position: center;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #ffffff;
        text-shadow: 0 0 10px #000000;
      }
    </style>
  </head>

  <body>
    <!-- Swiper -->
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div
            class="slide-inner"
            style="background-image: url('https://cdn.pixabay.com/photo/2017/01/24/03/54/urban-2004494_960_720.jpg')"
          >
            slide-1
          </div>
        </div>
        <div class="swiper-slide">
          <div
            class="slide-inner"
            style="background-image: url('https://cdn.pixabay.com/photo/2018/12/09/07/36/city-3864462_960_720.jpg')"
          >
            slide-2
          </div>
        </div>
        <div class="swiper-slide">
          <div
            class="slide-inner"
            style="background-image: url('https://cdn.pixabay.com/photo/2014/06/01/09/25/paris-359503_960_720.jpg')"
          >
            slide-3
          </div>
        </div>
      </div>
      <!-- Navigation -->
      <div class="swiper-button-next swiper-button-white"></div>
      <div class="swiper-button-prev swiper-button-white"></div>
    </div>

    <!-- Swiper6 JS -->
    <script src="https://unpkg.com/swiper/swiper-bundle.js"></script>

    <!-- Initialize Swiper -->
    <script>
      var interleaveOffset = 0.5; // 视差比值(取值范围(-infinity, +infinity))

      var swiperOptions = {
        speed: 1000, // 单页的滑动过渡消耗时间
        grabCursor: true, // 鼠标变成手掌形状
        watchSlidesProgress: true, // Progress（进度、进程）分为swiper的progress 和每个slide单独的progress。
        mousewheel: true, // 鼠标控制
        keyboard: true, // 键盘控制
        navigation: {
          // 前进后退按钮
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },

        // 事件
        on: {
          /* 当Swiper的progress被改变时执行. */
          progress: function (swiper) {
            for (var i = 0; i < swiper.slides.length; i++) {
              var slideProgress = swiper.slides[i].progress; // slide单独的progress。
              var innerOffset = swiper.height * interleaveOffset; // 偏移距离 = 当前滑块的宽度 * 视差值
              var innerTranslate = slideProgress * innerOffset;
              swiper.slides[i].querySelector(".slide-inner").style.transform =
                "translate3d(" + innerTranslate + "px, 0,  0)";
            }
          },

          /* 当碰触到slider时执行. */
          touchStart: function (swiper) {
            for (var i = 0; i < swiper.slides.length; i++) {
              swiper.slides[i].style.transition = "";
            }
          },

          /* 每当设置Swiper开始过渡动画时执行.开始滑动和结束滑动时触发。 */
          setTransition: function (swiper, speed) {
            for (var i = 0; i < swiper.slides.length; i++) {
              swiper.slides[i].style.transition = speed + "ms";
              swiper.slides[i].querySelector(".slide-inner").style.transition = speed + "ms";
            }
          },
        },
      };

      new Swiper(".swiper-container", swiperOptions);
    </script>
  </body>
</html>

总结

以上，便是other-translate 另类轮播图的全部内容，作一次代码记录。

最后，如果您有更好的方法，欢迎在留言区中分享；或者实际操作中遇到什么问题均可留言或者私信我，感谢您的观看！
官方文档：swiper-api
图片来源：pixabay

geinvse_seg

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
切换效果：other-translate 另类轮播图

文章目录前言一、最终效果二、代码复现总结前言swiper轮播图效果扩展三 —— other-translate 另类轮播图。一、最终效果先来看一下我们的最终效果：二、代码复现<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8" /> <title>other-translate</title> <m
复制链接

扫一扫

专栏目录