中央を scale じゃなくて width で大きくしたカルーセルを実装したい
.
.
いつも楽しく拝見させていただいております。
中央の画像が大きくなるカルーセルを実装したいです。
でも、 transform:scale(数字) とかで変えると中央画像が前後の画像に被ってしまうので、widthで大きさを変更したいです。
.
しかし、slick.js で実装しようとすると 矢印で動かしたあと、挙動がおかしくなってしまいます。
.
明日は早く帰って誕生日プレゼント買いに行かないと彼氏と別れることになってしまいそうなんです!助けてください!
.
.
みんなの回答 6 件
ソースコードです。
--html--
<div id="slick_carousel_wrap">
<div id="slick_carousel">
<div class="slick_child1"><img src="images/img01.png" alt=""></div>
<div class="slick_child"><img src="images/img01.png" alt=""></div>
<div class="slick_child"><img src="images/img01.png" alt=""></div>
<div class="slick_child"><img src="images/img01.png" alt=""></div>
<div class="slick_child"><img src="images/img01.png" alt=""></div>
<div class="slick_child"><img src="images/img01.png" alt=""></div>
<div class="slick_child"><img src="images/img01.png" alt=""></div>
<div class="slick_child"><img src="images/img01.png" alt=""></div>
<div class="slick_child"><img src="images/img01.png" alt=""></div>
<div class="slick_child"><img src="images/img01.png" alt=""></div>
<div class="slick_child"><img src="images/img01.png" alt=""></div>
<div class="slick_child"><img src="images/img01.png" alt=""></div>
<div class="slick_child"><img src="images/img01.png" alt=""></div>
<div class="slick_child"><img src="images/img01.png" alt=""></div>
<div class="slick_child"><img src="images/img01.png" alt=""></div>
<div class="slick_child"><img src="images/img01.png" alt=""></div>
<div class="slick_child"><img src="images/img01.png" alt=""></div>
</div>
</div>
.
--CSS--
#slick_carousel_wrap {
margin: 0 auto;
max-width: 860px;
width: 100%;
overflow-x: hidden;
}
#slick_carousel img {
width: 90px;
margin: 0 5px;
transition: all .3s ease;
-webkit-transition: all .3s ease;
}
#slick_carousel .slick-center img {
width: 280px;
transition: all .3s ease;
-webkit-transition: all .3s ease;
}
.slick-list{
overflow: visible;
}
.slick-slide{
text-align: center;
}
.
--JS--
$(’#slick_carousel’).slick({
autoplay: false,
centerMode: true,
centerPadding: ’0’,
slidesToShow: 7,
variableWidth: true,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: ’40px’,
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: ’40px’,
slidesToShow: 1
}
}
]
});
真ん中が大きくなる時、左右も避けるように動くってこと?
左のは左へ、右のは右へtranslateで動かせればできるかも
widthでは無理だと思うなあ
>誕生日プレゼント買いに行かないと彼氏と別れることになってしまいそう
****心を煽って回答を得ようとする****詐欺か
中身は禿げたオヤジと見た
そんなヤツとは別れて俺の女になりなよ
ホモかよ
別れてしまえ。
関連するトピックス