製作圖片輪播響應

Question

我正在嘗試製作自己的圖片滑塊。在製作動畫之前，我只是先做基本的造型。我的問題是，當屏幕達到600像素時，我希望中心圖像爲屏幕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-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>

https://jsfiddle.net/20wupbLw/

Answer 1

我會建議使用http://kenwheeler.github.io/slick/，這將處理您迴應的看法對你，你就只需要再整滑塊來匹配你在做什麼。