swiper 底部小图

最新推荐文章于 2023-12-09 10:54:43 发布

曲小强

最新推荐文章于 2023-12-09 10:54:43 发布

阅读量436

点赞数

CC 4.0 BY-SA版权

分类专栏： swiperJs

本文链接：https://blog.youkuaiyun.com/quhongqiang/article/details/110662465

swiperJs 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个使用Vue.js结合Swiper组件库创建轮播图效果的实例。通过具体的HTML、CSS和JavaScript代码展示了如何配置Swiper并设置其参数以实现美观的轮播效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
  <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
  <style type="text/css">
    *,
    *:before,
    *:after {
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }

    body {
      margin: 0;
      padding: 0;
    }

    .swiper-container {
      width: 100%;
      padding-top: 10px;
      padding-bottom: 150px;
    }

    .swiper-slide {
      background-position: center;
      background-size: cover;
      width: 240px;
      height: 320px;  
    }
  </style>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/swiper/swiper-bundle.min.js"> </script>
</head>

<body>
  <div id="app">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" style="background-image:url('https://yuetuvip.com/homeImg/%E5%B0%8F%E5%AF%BC%E8%88%AA-8.jpg')">
        </div>
        <div class="swiper-slide" style="background-image:url('https://yuetuvip.com/homeImg/%E5%B0%8F%E5%AF%BC%E8%88%AA-11.jpg')">
        </div>
        <div class="swiper-slide" style="background-image:url('https://yuetuvip.com/homeImg/%E5%B0%8F%E5%AF%BC%E8%88%AA-10.jpg')">
        </div>
        <div class="swiper-slide" style="background-image:url('https://yuetuvip.com/homeImg/%E5%B0%8F%E5%AF%BC%E8%88%AA-100.jpg')">
        </div>
        <div class="swiper-slide" style="background-image:url('https://yuetuvip.com/homeImg/%E5%B0%8F%E5%AF%BC%E8%88%AA-5.jpg')">
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
  </div>
  <script>
    new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue.js!'
      },
      mounted() {
        var swiper = new Swiper('.swiper-container', {
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
            // renderBullet: function (index, className) {
            //   var arr = [8, 11, 10, 100, 5]
			      //   return `<image class=${className} style="width: 100px;height: 70px;border-radius: inherit" src="https://yuetuvip.com/homeImg/%E5%B0%8F%E5%AF%BC%E8%88%AA-${arr[index]}.jpg">`;
		    	  // },
          },
          grabCursor: true,
          loop: true,
          initialSlide: 1,
          effect: 'coverflow',
          slidesPerView: 1.5,
          loop: true,
          centeredSlides: true,
          coverflowEffect: {
            rotate: 0,
            stretch: -30,
            depth: 160,
            modifier: 2,
            slideShadows: true
          },
        })
      },
    })
  </script>
</body>

</html>

在这里插入图片描述