首页 > 网页代码

swiper全屏滚动切换

网页代码 2021-11-21 10:25:09 0
  <!doctype html>
  <html>
  <head>
  <meta charset="utf-8">
  <title>swiper全屏滚动切换-jq22.com</title>
  <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
  <style>
  @import url("https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/Swiper/5.4.5/css/swiper.min.css");
  html,body {
  width:100%;
  height:100%;
  overflow:hidden;
  margin:0;
  padding:0;
  }
  .swiper {
  width:100%;
  height:100%;
  --swiper-theme-color:#DB2C32;
  text-align:center;
  color:white;
  font-size:24px;
  }
  </style>
  </head>
  <body>
  <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/Swiper/5.4.5/js/swiper.min.js" type="application/javascript"></script>
   
  <div class="swiper">
  <div class="swiper-wrapper">
  <div class="swiper-slide" style="background-color: #1B6D85;">slider1</div>
  <div class="swiper-slide" style="background-color: #122B40;">slider2</div>
  <div class="swiper-slide" style="background-color: #2B542C;">slider3</div>
  <div class="swiper-slide" style="background-color: #070B10;">slider4</div>
  </div>
  <div class="swiper-pagination"></div>
  </div>
   
  <script>
  var mySwiper = new Swiper('.swiper', {
  autoplay: true, //可选选项,自动滑动
  init: true,
  mousewheel: true,
  updateOnWindowResize: true,
  speed: 1200,
  noSwiping: true,
  autoHeight: true, //高度随内容变化
  observer: true,
  observeParents: true,
  // slidesPerView:'auto',
  direction: 'vertical', // 垂直切换选项
  loop: false, // 循环模式选项
  roundLengths: true, //防止文字模糊
  threshold: 30,
  pagination: {
  el: '.swiper-pagination',
  clickable: true,
  },
  })
  </script>
   
  </body>
  </html>
   
版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。
本文地址:http://www.kumi6.com/cyzd/182.html

上一篇:图片轮播代码
下一篇:jquery弹窗代码
留言与评论(共有 条评论)

   
验证码: