Я хочу создать полноэкранное слайд-шоу с перекрестным затуханием с помощью плагина bxslider - PullRequest
Новая
       31

Я хочу создать полноэкранное слайд-шоу с перекрестным затуханием с помощью плагина bxslider

0 голосов
/ 18 апреля 2019

Я пытаюсь создать полноэкранное слайд-шоу с плавным переходом с помощью 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 голосов
/ 22 апреля 2019

Попробуйте сбросить поля и отступы по умолчанию, добавив следующие стили: 

ul#slider{
 margin: 0;
 padding: 0
}
0 голосов
/ 22 апреля 2019

Здравствуйте. Пожалуйста, проверьте ниже код CSS, добавьте его в свой CSS, а затем проверьте, пожалуйста, подтвердите меня. ul#slider{margin: 0px;} ul#slider li{left: 0px;} .bx-wrapper{margin: 0px; border: 0px;}

...