为什么这个没有效果

来源:2-4 编程练习

Ting111

2020-10-18 12:12:43



<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <link rel="stylesheet" href="../作业/swiper-5.4.5/package/css/swiper.min.css">

   <script src="../作业/swiper-5.4.5/package/js/swiper.min.js"></script>

   <style>

       body,html{

        width:100%;

          height:100%;

       }

       .swiper-container,

       .swiper-wrapper,

        .swiper-slide{

          width:100%;

          height:100%;

          line-height: 100%;

          text-align: center;

      }

   </style>

</head>

<body>

    <div class="swiper-container">

        <div class="swiper-wrapper">

            <div class="swiper-slide">1</div>

            <div class="swiper-slide">2</div>

            <div class="swiper-slide">3</div>

            <div class="swiper-slide">4</div>

        </div> 

    </div>

<script>

    var mySwiper = new Swiper('#swiper-slide',{

       

        effect : 'fade',

        fadeEffect:{

           crossFade:true, 

        }

     })

    

     

  })

</script>

</body>

</html>

在这里输入代码,可通过选择【代码语言】突出显示

写回答

1回答

好帮手慕夭夭

2020-10-18

同学你好,代码的问题与修改如下:

1.html代码中不存在id名为swiper-slide的元素,应该改为如下:

http://img.mukewang.com/climg/5f8bf3dd09c0764906180266.jpg

2.有多余的括号,如下去掉:

http://img.mukewang.com/climg/5f8bf40609bef21104540134.jpg

祝学习愉快~

0
hing111
h 不好意思,搞定了谢谢老师!
h020-10-18
共2条回复

0 学习 · 6815 问题

查看课程