鍍金池/ 問答/HTML/ 用swiper3做輪播圖,要滑動的元素縱向排列,無法橫向排列?

用swiper3做輪播圖,要滑動的元素縱向排列,無法橫向排列?

這樣導致代碼輪播圖無法橫向滑動
貼上代碼,求指教(網(wǎng)上找的例子)

<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .swiper-slide {
            width: 200px;
            height: 300px;
            border: 1px solid #333;
        }
    </style>
</head>
<body>
    <!-- Swiper 需要輪播的內(nèi)容 -->
  <div class="swiper-container swiper-container-horizontal">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <p>我是第一張圖片</p>
      </div>
      <div class="swiper-slide">
        <p>我是第二張圖片</p>
      </div>
      <div class="swiper-slide">
        <p>我是第三張圖片</p>
      </div>
    </div>

  </div>
</body>
</html>
<script src="https://cdn.bootcss.com/jquery/1.10.0/jquery.js"></script>
<script src="https://cdn.bootcss.com/Swiper/3.4.1/js/swiper.jquery.min.js"></script>
<script>
    var swiper = new Swiper('.swiper-container', {
    parallax: true,
    speed: 600, // 速度
    autoplay: 900, //可選選項,自動滑動
  });
</script>
回答
編輯回答
陌顏

<link rel="stylesheet">

2018年3月31日 23:16
編輯回答
傲寒

代碼無問題,你少入了個swiper.css

2018年4月5日 07:26