应用错误收集

我想使用bxslider插件创建全屏交叉淡入淡出幻灯片演示

时间：2019-04-18 19:41:40

标签： javascript jquery html css bxslider

我正在尝试使用bxslider创建全屏淡入淡出幻灯片演示，但是我无法完成一件事。幻灯片进行得很好时，图像周围有空间。我想将图像扩展到整个窗口...

幻灯片进行得很好。

HTML

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/style.css">
  <title>Fading image slideshow</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
</head>
<body>
  <ul id="slider">
    <li style="background-image: url(img01.jpg);"></li>
    <li style="background-image: url(img02.jpg);"></li>
    <li style="background-image: url(img03.jpg);"></li>
    <li style="background-image: url(img04.jpg);"></li>
    <li style="background-image: url(img05.jpg);"></li>
    <li style="background-image: url(img06.jpg);"></li>
  </ul>
  <script>
  $(function() {
    $('#slider').bxSlider({
      mode: 'fade',
      speed: 2000,
      pause: 8000,
      auto: true,
      pager: false,
      controls: false,
      touchEnabled: false
    });
  });
  </script>
</body>

CSS

body {
  margin: 0;
  padding: 0;
}

.bx-viewport {
  left: 0;
  box-shadow: none;
  border: none;
}

#slider li {
  height: 100vh;
  width: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

我不需要任何空间，我只想让图像扩展到全屏尺寸。

2 个答案:

答案 0 :(得分：0)

您好，请检查以下CSS代码，将其添加到您的CSS中，然后检查，也请确认我。 ul#slider{margin: 0px;} ul#slider li{left: 0px;} .bx-wrapper{margin: 0px; border: 0px;}

答案 1 :(得分：0)

尝试通过添加以下样式来重置默认边距和填充：

ul#slider{
 margin: 0;
 padding: 0
}