使圖像輪播響應

Question

我正在嘗試制作自己的圖像滑塊。 在制作動畫之前，我只是先進行基本樣式設計。 我的問題是，當屏幕達到600px時，我希望中心圖像的寬度為屏幕的100％，並且中心圖像的每一側上的圖像都流到窗口視圖之外。 但是我相信以前的某些CSS樣式會導致此方法不起作用，但我不知道是哪一種。

 $(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); } }); }); 

 *{ 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; } } 

 <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-qc-1500-700-2.jpg" alt="" /> </li> <li class="img_cont active"> <img src="http://lorempixel.com/output/abstract-qc-1500-700-6.jpg" alt="" /> </li> <li class="img_cont"> <img src="http://lorempixel.com/output/abstract-qc-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> 

https://jsfiddle.net/20wupbLw/

Answer 1

我建議使用http://kenwheeler.github.io/slick/ ，這將為您處理您的響應視圖，您只需要重新設置滑塊樣式即可匹配您的工作。