Making an image carousel responsive

Question

I'm trying to make my own image slider. I'm just doing the basic styling first before I animate it. My problem is that when the screen gets to 600px I would like the centre image to be 100% width of the screen with an image on each side of the centre image flowing outside the view of the window. But I believe some of the previous css styles are causing this not to work, but I can't figure out which.

 $(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/ ，这将为您处理您的响应视图，您只需要重新设置滑块样式即可匹配您的工作。