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

Question

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

然而，一旦我将它们更改为 divs，它们就开始在较小的屏幕上重叠。如何控制每张幻灯片之间的 space 数量，使它们不重叠？

我只是想把它变成一个 JS fiddle 但无法让它工作。我为此感到抱歉。 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

一个简单的解决方案是通过在 .slide class.

上添加 overflow: hidden; 来隐藏每张幻灯片之外的项目

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

Flex sliders slides overlapping on smaller width screens

html

javascript

css

jquery

flexslider