W3QはBiztterに生まれ変わりました!
Web制作に関するお悩みはBiztterへどうぞ!

Biztterで質問する

ID:Bo/TUw さんの質問

中央を scale じゃなくて width で大きくしたカルーセルを実装したい
.
.
いつも楽しく拝見させていただいております。
中央の画像が大きくなるカルーセルを実装したいです。
でも、 transform:scale(数字) とかで変えると中央画像が前後の画像に被ってしまうので、widthで大きさを変更したいです。
.
しかし、slick.js で実装しようとすると 矢印で動かしたあと、挙動がおかしくなってしまいます。
.
明日は早く帰って誕生日プレゼント買いに行かないと彼氏と別れることになってしまいそうなんです!助けてください!
.
.

みんなの回答 6 件

ID:Bo/TUw さんの回答

ソースコードです。

--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
}
}
]
});

ID:MnUYcP さんの回答

真ん中が大きくなる時、左右も避けるように動くってこと?
左のは左へ、右のは右へtranslateで動かせればできるかも
widthでは無理だと思うなあ

ID:Bo/TUw

回答ありがとうございます
.
translate でやると
    ┏━━┓
←□□□┃  ┃□□□→
    ┗━━┛
こういう↑感じにしたいんですけど
   ┏━━┓
←□□┃  ┃□□→
   ┗━━┛
こういう↑感じになってしまいます
(画像が scale で大きくなってるので前後の画像が大きい画像に隠れている)
.
widthでやると
    ┏━━┓
←□□□┃  ┃□□□→
    ┗━━┛
上記のようにできるんですけど矢印をクリックした後
   ┏━━┓
←□□┃  ┃□□□□→
   ┗━━┛
一瞬いきすぎて
    ┏━━┓
←□□□┃  ┃□□□→
    ┗━━┛
またもとの位置に戻ります
動いたときの処理が多めに移動されていて、(一つだけサイズが違うから計算が合わない?)三歩進んで二歩下がる感じになってしまいます。

ID:xwYp/h さんの回答

>誕生日プレゼント買いに行かないと彼氏と別れることになってしまいそう
****心を煽って回答を得ようとする****詐欺か
中身は禿げたオヤジと見た

ID:/WZrIY

こんなのはFlashの時に流行った考え方だから、禿オヤジなら余裕で出来るから。

ID:Bo/TUw

ごめんなさい、アラサーです!女です!今日帰らないと彼氏に怒られます!後がなくて必死なんです!

ID:Aanczh さんの回答

そんなヤツとは別れて俺の女になりなよ

ID:Bo/TUw

海外在住なんですけど大丈夫ですか?><

ID:cyKQx2 さんの回答

ホモかよ

ID:/WZrIY さんの回答

別れてしまえ。

最終更新日:2017-02-21 (846 views)

関連するトピックス

ページ上部に戻る