小编Joy*_*Dey的帖子

每个视图的 Swiper JS 幻灯片和每列的幻灯片显示不正确

我试图使用官方页面上给出的演示使用 swiper js 在引导程序上制作 2 行幻灯片。但是,当我复制代码并在浏览器上运行时,它显示如下在此处输入图片说明

代码和演示页面完全一样

 <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Swiper demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

     <link rel="stylesheet" href="../package/css/swiper.min.css">
     <style>

      .swiper-container {
      width: 100%;
      height: 100%;
      margin-left: auto;
      margin-right: auto;
     }
     .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      height: calc((100% - 30px) / 2);

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: …
Run Code Online (Sandbox Code Playgroud)

html javascript swiperjs

0
推荐指数
1
解决办法
7304
查看次数

标签 统计

html ×1

javascript ×1

swiperjs ×1