zoukankan      html  css  js  c++  java
  • swiper.js实现轮播图效果

    1.引入swiper.js和swiper.css
    2.添加代码
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="../res_im/banner_bg.png" alt="">1
        </div>
        <div class="swiper-slide">
          <img src="../res_im/banner_bg.png" alt="">2
        </div>
        <div class="swiper-slide">
          <img src="../res_im/banner_bg.png" alt="">3
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>
      <!-- 如果需要导航按钮 -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
     
    3.css样式
     .swiper-container {//轮播图整体样式
    overflow: hidden;
    16rem;
    height: 8.911111rem;
    position: relative;
    z-index: 0;
    }
    .swiper-container>.swiper-pagination {//分页小圆点整体的样式
    3.488889rem;
    height: .377778rem;
    position: absolute;
    top: .333333rem;
    left: 50%;
    margin-left: -1.744444rem;
    display: flex;
    justify-content: space-between;
    }
     .swiper-container>.swiper-pagination .swiper-pagination-bullet {//当前选中的小圆点的样式
    .377778rem;
    height: .377778rem;
    border-radius: 50%;
    background-color: #000;
    }
     .swiper-container>.swiper-wrapper {
    100%;
    height: 100%;
    }
    .swiper-container>.swiper-wrapper>.swiper-slide {
    100%;
    height: 100%;
    }
     .swiper-container>.swiper-wrapper>.swiper-slide>img {
    100%;
    height: 100%;
    }
    .swiper-button-prev, .swiper-container-rtl .swiper-button-next {//下一页按钮
    background-image: url(../res_im/arrow_L.png)!important;
    }
    .swiper-button-next, .swiper-container-rtl .swiper-button-prev {上一页按钮
    background-image: url(../res_im/arrow_R.png)!important;
    }


  • 相关阅读:
    党史回顾+十九大习思想+中国历史事件+地理+航天史及古代天文历法
    国际组织
    生活-常识-物理
    生物
    数量题目总结-利润排列组合
    数量题目总结-工程最值集合
    考公错题记录表
    个人向简历介绍
    数据库操作大全
    团队博客作业-技术规格说明书
  • 原文地址:https://www.cnblogs.com/wx2019/p/11268071.html
Copyright © 2011-2022 走看看