使图像轮播响应

Question

我试图制作自己的图片滑块。在我制作动画之前，我先做基本的造型。我的问题是，当屏幕达到600px时，我希望中心图像是屏幕宽度的100％，中心图像两侧的图像流出窗口视图。但我相信以前的一些CSS样式会导致这种情况无效，但我无法弄明白哪种。

＆＃13;

＆＃13;

$(document).ready(function(){
  var image_width = $(".img_cont").width();
  var image_count = $(".carousel li").length;
  var carousel_width = image_width * image_count + image_width;
  var padding = $(".active img").height() /4;
  
  $(".carousel").css("width", carousel_width);
  $(".img_cont").css("paddingTop", padding);
  $(".active").css("paddingTop", 0);
  
  $(window).resize(function(){
    if($(window).width() < 1600){
      
    var image_width = $(".img_cont").width();
    var image_count = $(".carousel li").length;
    var carousel_width = image_width * image_count + image_width;
    var padding = $(".active img").height() /4;

    $(".carousel").css("width", carousel_width);
    $(".img_cont").css("paddingTop", padding);
    $(".active").css("paddingTop", 0);
     
    }else {
      var image_width = $(".img_cont").width();
      var image_count = $(".carousel li").length;
      var carousel_width = image_width * image_count + image_width;
      var padding = $(".active img").height() /4;

      $(".carousel").css("width", carousel_width);
      $(".img_cont").css("paddingTop", padding);
      $(".active").css("paddingTop", 0);
    }
  });
});

＆＃13;

*{
  padding: 0;
  margin: 0;
}

body{
  width: 100%;
  margin: 0;
  padding: 0;
}

.cont{
  position: relative;
  font-size: 0;/*removes white space*/
  margin: 60px auto;
  padding: 0;
  overflow: visible;
}

.carousel{
  padding: 0;
  list-style-type: none;
  height: auto;
  position: relative;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  overflow: hidden;
}

.carousel li{
  float: left;
  background-color: pink;
}

#next{
  position: absolute;
  top: 45%;
  right: 0;
  width: 40px;
  height: 40px;
  background-color: blue;
  font-size: 0;
  z-index: 1;
}

#prev{
  position: absolute;
  top: 45%;
  left: 0;
  width: 40px;
  height: 40px;
  background-color: blue;
  z-index: 1;
}

.img_cont img{
  width: 100%;
  max-width: 600px;
  height: auto;
}

.active img{
  width: 100%;
  max-width: 1200px;
  height: auto;
  padding: 0;
}

@media screen and (max-width: 1600px){
  .img_cont img{
    width: 100%;
    max-width: 500px;
    height: auto;
  }

  .active img{
    width: 100%;
    max-width: 1000px;
    height: auto;
    padding: 0;
  }
}

@media screen and (max-width: 1200px){
  .img_cont img{
    width: 100%;
    max-width: 400px;
    height: auto;
  }

  .active img{
    width: 100%;
    max-width: 800px;
    height: auto;
    padding: 0;
  }
}

@media screen and (max-width: 1000px){
  .img_cont img{
    width: 100%;
    max-width: 300px;
    height: auto;
  }

  .active img{
    width: 100%;
    max-width: 600px;
    height: auto;
    padding: 0;
  }
}

@media screen and (max-width: 600px){
  .active{
    width: 100%;
    max-width: none;
  }
  
  .img_cont img{
    width: 100%;
    max-width: 300px;
    height: auto;
  }

  .active img{
    width: 100%;
    max-width: 600px;
    height: auto;
    padding: 0;
  }
}

＆＃13;

<div class="cont">
  <div id="next">
  </div> 
  <div id="prev">
  </div> 
  <ul class="carousel">
    <li class="img_cont">
      <img src="http://lorempixel.com/output/abstract-q-c-1500-700-2.jpg" alt="" />
    </li>
    <li class="img_cont active">
      <img src="http://lorempixel.com/output/abstract-q-c-1500-700-6.jpg" alt="" />
    </li>
    <li class="img_cont">
      <img src="http://lorempixel.com/output/abstract-q-c-1500-700-1.jpg" alt="" />
    </li>
  </ul>
</div>
<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>

＆＃13;

＆＃13;

＆＃13;

https://jsfiddle.net/20wupbLw/

Answer 1

我建议使用http://kenwheeler.github.io/slick/，这会为您处理响应式视图，您只需要重新设置滑块以匹配您正在执行的操作。