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

程序员文章站 2022-03-05 09:03:23

...

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

<!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>

效果展示

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

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

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

效果展示

搜狗壁纸隐藏和显示桌面工具栏快捷按钮的方法介绍

elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)

android studio并列层，显示和隐藏按钮，修改背景的自定义颜色

1）编写一个程序。要求：在窗体上创建一个文本框组件、两个命令按钮组件，命令按钮的标题分别设置为“隐藏”和“退出”, 窗体背景色设置为“粉红”。单击“隐藏”按钮后文本框消失，该按钮标题变为“显示”，单击

搜狗壁纸隐藏和显示桌面工具栏快捷按钮的方法介绍

按钮的隐藏和显示

筛选栏过多，控制‘更多‘和‘收起‘按钮的显示和隐藏

Jquery 点击按钮显示和隐藏层的代码_jquery

WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现_javascript技巧

Jquery 点击按钮显示和隐藏层的代码_jquery