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

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

但是，一旦我将它们更改为div，它们就开始在较小的屏幕上重叠。如何控制每张幻灯片之间的间距量，使其不重叠？

我只是试图把它变成一个JS小提琴，但无法让它工作。对此我很抱歉。这是该项目的链接。

感谢您的任何帮助！

.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; }
}

感谢您的任何帮助！