Question

我正在使我的flex滑块响应。我将图像标签更改为div并将其设置为背景图像。这样我就可以使用媒体查询交换图像，以创建响应式的感觉。

然而，只要我将它们更改为div，它们就会在较小的屏幕上重叠。如何控制每张幻灯片之间的空间大小以使它们不重叠？

我只是试图把它变成一个JS小提琴而且无法让它发挥作用。对不起，我很抱歉。 Here's the LINK to the project.

感谢您的帮助！

HTML

         <li class="slide">
          <figure>
             <div class="slide_5 slidex"> </div>
          </figure>
        </li>

        <li class="slide">
          <figure>
             <div class="slide_6 slidex"> </div>
          </figure>
        </li>
      </ul>
    </div><!-- @end .slider -->

CSS

/** Glidejs styles **/
.slider {
    width: 100%;
    height: 448px;
    overflow: hidden;
    position:absolute;
    margin-top:110px;
    z-index:2;
}

.slides {
  height: 448px;
  overflow: hidden;
  list-style:none;
  /* Slider Animation, remove for static slider*/
    -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: all 500ms cubic-bezier(0.165, 0.840, 1.440, 1.000); 
    -moz-transition: all 500ms cubic-bezier(0.165, 0.840, 1.440, 1.000); 
    -ms-transition: all 500ms cubic-bezier(0.165, 0.840, 1.440, 1.000); 
    -o-transition: all 500ms cubic-bezier(0.165, 0.840, 1.440, 1.000); 
    transition: all 500ms cubic-bezier(0.165, 0.840, 1.440, 1.000);
    }

.slide {
    width: 803px;
    height: 448px;
    float: left;
    clear: none;
    }
.slide figure {
    text-align: center;
    width:100%;
    max-width:803px;
    position: relative;
    height: 448px;
    margin-left:0px;
    }

.slide figure slidex {
    width:100%;
    position: absolute;
    bottom: 0;
    left: 0;
    }
.slider-arrow img {
    margin-top:8px;
    }
.slider-arrow {
    position: absolute;
    display: block;
    padding: 20px;
    color: #fff;
    border: 1px solid transparent;
    border-radius: 8px;
        -webkit-transition: all 0.2s linear;
        -moz-transition: all 0.2s linear;
        transition: all 0.2s linear;
        }
.slider-arrow:hover {
    background:rgba(255,255,255,.4);
    color: #aaa;
    border-color:#fff;
    }
.slider-arrow--right { bottom: 50%; right: 30px; }
.slider-arrow--left { bottom: 50%; left: 30px; }

.slider-nav {
    position: absolute;
    bottom: 0px;
    display:none;
    }

.slider-nav__item {
    width: 12px;
    height: 12px;
    float: left;
    clear: none;
    display: block;
    margin: 0 5px;
    background: #fff;
    border-radius: 7px;
    }
.slider-nav__item:hover { background: #bababa; }
.slider-nav__item--current, .slider-nav__item--current:hover { background: #999; }

.slidex {
    width:803px;
    height:448px;
    position:absolute;
    left:50%;
    margin-left: -400px;
    background-repeat:no-repeat;
    }

.slide_1 {
    background-image:url(../slide_img/Slide_1.png)
}
.slide_2 {
    background-image:url(../slide_img/Slide_2.png)
}
.slide_3 {
    background-image:url(../slide_img/Slide_3.png)
}
.slide_4 {
    background-image:url(../slide_img/Slide_4.png)
}
.slide_5 {
    background-image:url(../slide_img/Slide_5.png)
}
.slide_6 {
    background-image:url(../slide_img/Slide_6.png)
}

@media only screen and (max-width: 500px) {
    .slide_1 {
    background-image:url(../slide_img/Slide_1.1.png)
}
}

/** responsive styles **/
@media screen and (max-width: 1050px) {
  .slider-arrow { font-size: 1.8em; padding: 15px; }
} 

@media screen and (max-width: 650px) {
  h1 { font-size: 2.9em; }
}

@media screen and (max-width: 450px) {
  h1 { font-size: 2.1em; }
}

感谢您的帮助！

Answer 1

一个简单的解决方案是在overflow: hidden;课程中添加.slide来隐藏每张幻灯片中的项目。

Flex滑块在较小宽度的屏幕上滑动重叠

1 个答案: