Невозможно заставить Slider быть отзывчивым - PullRequest
Новая
       41

Невозможно заставить Slider быть отзывчивым

1 голос
/ 01 мая 2019

This is how i want to look Я столкнулся с проблемой. Я пытаюсь создать полноэкранный слайдер изображений с адаптивными изображениями. Я перепробовал все комбинации: Добавить высоту стиля: 100%, ширина: 100%, высота: авто, ширина: авто в HTML, в CSS, но, похоже, ничего не работает. Я покажу вам код, возможно, я сделал что-то не так. Я не могу добавить фрагмент кода, потому что он не отображает изображения и содержит много кода и классов. Эта проблема сводит меня с ума, я ищу исправление в течение 4 часов. This is how my images looks

HTML 

<div id="showcase">
    <div id="arrow-left" class="arrow"></div>
    <div id="slider">
      <div class="slide slide1"></div>
      <div class="slide slide2 "></div>
      <div class="slide  slide3"></div>
    </div>
    <div id="arrow-right" class="arrow"></div>
  </div>

CSS 

#showcase,
#slider,
.slide-content {
  height: 100vh;
  width: 100%;
  overflow-x: hidden;
}

#showcase {
  position: relative;
  height: 100%;
  width: 100%;
}

.slide {
  width: 100%;
  height: 100%;
}

.slide1 {
  background: url(/Core/img/lazar1.jpg) no-repeat center center/cover;
}

.slide2 {
  background: url(/Core/img/lazar2.jpg) no-repeat center center/cover;
}

.slide3 {
  background: url(/Core/img/lazar3.jpg) no-repeat center center/cover;
}

.arrow {
  cursor: pointer;
  position: absolute;
  top: 50%;
  margin-top: -50px;
  border-style: solid;
}

#arrow-left {
  border-width: 30px 40px 30px 0;
  border-color: transparent blue transparent transparent;
  left: 0;
  margin-left: 30px;
}

#arrow-right {
  border-width: 30px 0 30px 40px;
  border-color: transparent blue transparent blue;
  right: 0;
  margin-right: 30px;
}

Ответы [ 2 ]

1 голос
/ 01 мая 2019

Добавьте следующие коды к классу «слайд»: 

background-size: contain !important;
1 голос
/ 01 мая 2019

Чтобы решить проблему, подобную этой, для адаптивного дизайна используйте медиа-запросы. Страница, на которую ссылаются, использует медиазапросы с определенными точками останова ширины, чтобы уменьшить высоту div, содержащего изображения, чтобы позволить экрану уменьшаться по ширине, в то же время отображая изображение с неповрежденным соотношением сторон (так как это довольно широкие изображения) , Пример в коде будет выглядеть так: 

//HTML
<div id="showcase">
    <div id="arrow-left" class="arrow"></div>
    <div id="slider">
      <div class="slide slide1"></div>
      <div class="slide slide2 "></div>
      <div class="slide  slide3"></div>
    </div>
    <div id="arrow-right" class="arrow"></div>
  </div>

//CSS
#showcase,#slider{
  height:100vh;
  width:100%;
}
.slide{
  width:100vw;
  height:100vh
}
.slide1{
  background:url(http://www.lazarangelov.com/wp-content/uploads/2015/12/lazar3-1920.jpg) no-repeat center center/cover;
}

@media screen and (max-width: 900px) {
  .slide{
    height: 80vh;
  }
}
@media screen and (max-width: 700px) {
    .slide{
    height: 70vh;
  }
}
@media screen and (max-width: 600px) {
    .slide{
    height: 60vh;
  }
}
@media screen and (max-width: 500px) {
    .slide{
    height: 50vh;
  }
}
@media screen and (max-width: 400px) {
    .slide{
    height: 40vh;
  }
}
@media screen and (max-width: 300px) {
    .slide{
    height: 30vh;
  }
}

Обратите внимание, что это не впечатляющие примеры медийных запросов, они просто используются для демонстрации механизма.

...