ID:Bo/TUw0kMJiE さんの質問

482 views

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

登録日:2017-02-20 · カテゴリー:JavaScript・jQuery

みんなの回答 6 件

2017-02-20 · トピ主 報告

ソースコードです。

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

2017-02-20 · ID:MnUYcPolKGqQ 報告

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

2017-02-21 · トピ主 報告

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

2017-02-20 · ID:xwYp/hwl6D9r 報告

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

2017-02-21 · ID:/WZrIYnUnyKL 報告

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

2017-02-21 · トピ主 報告

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

2017-02-21 · ID:AanczhFLd6MT 報告

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

2017-02-21 · トピ主 報告

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

2017-02-21 · ID:cyKQx2RTnms7 報告

ホモかよ

2017-02-21 · ID:/WZrIYnUnyKL 報告

別れてしまえ。

回答の受付は終了しました。

関連トピック