报错啊运行不了啊

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

const mySwiper = new Swiper('#swiper',{

initialSlide:2

});

</script>

</body>

</html>

搜索

复制

球球不一般 2022-03-26

源自：Swiper触摸滑动插件 2-2 Swiper的常用API-1

收起

1回答

樱桃小胖子 2022-03-27 09:58:30

同学你好，从报错信息看是js引入路径不正确，导致无法正确加载js文件，建议参考如下代码使用网络资源引入文件

js：<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/8.0.7/swiper-bundle.js"></script>

css：<link href="https://cdn.bootcdn.net/ajax/libs/Swiper/8.0.7/swiper-bundle.css" rel="stylesheet">

另外，建议同学尝试着去学习查看报错信息，日后工作中，解决报错信息也是需要掌握的技能之一。

祝学习愉快！

收起回答

提问者球球不一般 #1

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link href="https://cdn.bootcdn.net/ajax/libs/Swiper/8.0.7/swiper-bundle.css" rel="stylesheet">
</head>
<body>
<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/8.0.7/swiper-bundle.js"></script>
<script>
const mySwiper = new Swiper('#swiper',{
initialSlide:2
});
</script>
</body>
</html>
搜索
复制

2022-03-27 17:16:39
提问者球球不一般 #2

改完了还是不好使啊
搜索
复制

2022-03-27 17:17:07

樱桃小胖子回复提问者球球不一般 #3

同学你好，你得写html的代码结构呀，你的代码里面没写html相关代码。参考如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/Swiper/8.0.7/swiper-bundle.css" rel="stylesheet">
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .swiper-container {
        width: 375px;
        height: 300px;
      }
      .swiper-slide {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 80px;
      }
    </style>
</head>

<body>
    <div id="swiper" class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>

      <!-- 如果需要导航按钮 -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>

      <!-- 如果需要滚动条 -->
      <div class="swiper-scrollbar"></div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/Swiper/8.0.7/swiper-bundle.js"></script>
    <script>
    const mySwiper = new Swiper('#swiper', {

        initialSlide: 2

    });
    </script>
</body>

</html>

老师在“2-1 Swiper的使用方法”中有讲解哦

祝学习愉快！

2022-03-27 17:28:59