画像サイズがバラバラのスライドショーで画像を上下中央に配置したい
Q&A
Closed
解決したいこと
slick.jsを使用してスライドショーをつくっているのですが、画像サイズがバラバラのため、画像の位置の調節に苦戦しておりそこで詰まってしまっています。
水平方向への中央揃えをしたいと思っています。
現在
理想
参考
該当箇所
.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/reset.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
<link rel="stylesheet" type="text/css" href="https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/6-1-8/css/6-1-8.css">
</head>
<body>
<ul class="slider">
<li><img src="https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/6-1-8/img/img_01.jpg" alt=""></li>
<li><img src="https://plus.unsplash.com/premium_photo-1663853489900-3f24ea776dea?q=80&w=387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt=""></li>
<li><img src="https://plus.unsplash.com/premium_photo-1699466748006-f8a8d7011c2c?q=80&w=1032&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt=""></li>
<li><img src="https://images.unsplash.com/photo-1716481954482-b01dee92cc66?q=80&w=435&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt=""></li>
<li><img src="https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/6-1-8/img/img_04.jpg" alt=""></li>
<li><img src="https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/6-1-8/img/img_05.jpg" alt=""></li>
<li><img src="https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/6-1-8/img/img_06.jpg" alt=""></li>
</ul>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script src="https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/6-1-8/js/6-1-8.js"></script>
</body>
</html>
.css
@charset "utf-8";
.slider img {
width:100%;
height:auto;
}
.slider .slick-slide {
margin:0 10px;/*スライド左右の余白調整*/
}
/*========= レイアウトのためのCSS ===============*/
body{
background:#eee;
}
h2,p {
text-align:center;
padding:20px;
}
ul{
margin:0;
padding: 0;
list-style: none;
}
a{
color: #333;
}
a:hover,
a:active{
text-decoration: none;
}
.js
$('.slider').slick({
arrows: false,//左右の矢印はなし
autoplay: true,//自動的に動き出すか。初期値はfalse。
autoplaySpeed: 0,//自動的に動き出す待ち時間。初期値は3000ですが今回の見せ方では0
speed: 6900,//スライドのスピード。初期値は300。
infinite: true,//スライドをループさせるかどうか。初期値はtrue。
pauseOnHover: false,//オンマウスでスライドを一時停止させるかどうか。初期値はtrue。
pauseOnFocus: false,//フォーカスした際にスライドを一時停止させるかどうか。初期値はtrue。
cssEase: 'linear',//動き方。初期値はeaseですが、スムースな動きで見せたいのでlinear
slidesToShow: 4,//スライドを画面に4枚見せる
slidesToScroll: 1,//1回のスライドで動かす要素数
responsive: [
{
breakpoint: 769,//モニターの横幅が769px以下の見せ方
settings: {
slidesToShow: 2,//スライドを画面に2枚見せる
}
},
{
breakpoint: 426,//モニターの横幅が426px以下の見せ方
settings: {
slidesToShow: 1.5,//スライドを画面に1.5枚見せる
}
}
]
});
最後まで読んでいただきありがとうございます。
ご存じの方がいらっしゃいましたら教えていただけますと幸いです。
何卒よろしくお願いいたします。
0
