0
私は自分の画像スライダーを作ろうとしています。私はそれをアニメーション化する前に基本的なスタイリングをやっています。私の問題は、画面が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-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/
あなたのul.carouselには1200pxの固定幅があります。これは、ブレークポイントが応答するようになると体液（100％）に変更する必要があります。 – heady12