swiper 前进后退按钮的显示和隐藏

最新推荐文章于 2024-07-25 17:40:48 发布

X Dou

最新推荐文章于 2024-07-25 17:40:48 发布

阅读量4.3k

点赞数 1

分类专栏：前端文章标签： swiper

原文链接：https://www.swiper.com.cn/

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

鼠标进入和离开时，前进后退按钮显示和隐藏

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
  <title>Document</title>
</head>
<style>
  .container {
    width: 1200px;
    margin: 0 auto;
  }

  .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .swiper-button-hide {
    display: none;
  }

  .swiper-slide {
    opacity: 0.6;
  }

  .swiper-slide-active {
    opacity: 1;
  }
</style>

<body>
  <div class="container">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img
            src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607141159167&di=74c47f6fe7ca695ded1f7c5bf27e4d13&imgtype=0&src=http%3A%2F%2Fww3.sinaimg.cn%2Flarge%2F007Q5zgrgy1g3xepl9ppij31hc0u0x6p.jpg"
            alt=""></div>
        <div class="swiper-slide"><img
            src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607141179502&di=fb08cbf49785aaa64c5317b87625e6f1&imgtype=0&src=http%3A%2F%2Fbbsimg.ubgame.com%2Fdata%2Fattachment%2Fforum%2F201608%2F10%2F1758061f10xsls0lom3170.jpg"
            alt=""></div>
        <div class="swiper-slide"><img
            src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607141159166&di=7fd77e108a24c8be2b9466fbf9f62db7&imgtype=0&src=http%3A%2F%2Fww3.sinaimg.cn%2Flarge%2F007Q5zgrgy1g3xepjbqcvj31hc0u0npe.jpg"
            alt=""></div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>
      <!-- 如果需要导航按钮 -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
  </div>
  <script src="https://unpkg.com/swiper/swiper-bundle.min.js"> </script>
  <script>
    var mySwiper = new Swiper('.swiper-container', {
      loop: true,  //循环轮播
      centeredSlides: true,
      slidesPerView: 2,
      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
      },
      // 如果需要前进后退按钮
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },

    })
    //鼠标移出隐藏按钮，移入显示按钮
    mySwiper.el.onmouseover = function () {
      mySwiper.navigation.$nextEl.removeClass('swiper-button-hide');
      mySwiper.navigation.$prevEl.removeClass('swiper-button-hide');
    }
    mySwiper.el.onmouseout = function () {
      mySwiper.navigation.$nextEl.addClass('swiper-button-hide');
      mySwiper.navigation.$prevEl.addClass('swiper-button-hide');
    }
  </script>
</body>

</html>

效果展示

在这里插入图片描述

X Dou

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
swiper 前进后退按钮的显示和隐藏

swiper 前进后退按钮的显示和隐藏鼠标进入和离开时，前进后退按钮显示和隐藏<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://unpk
复制链接

扫一扫

专栏目录