【bxSlider】両サイドのスライドをチラ見せする方法
jQueryのスライダープラグイン「bxSlider」でスライドの両サイドをチラ見せするサンプルをご紹介｡
サンプル
PCで見ると､左右のスライドがチラ見えしています｡
HTML
bxSliderを <div class="bxslider_wrap"> で囲みます｡
<div class="bxslider_wrap">
<div class="bxslider">
<div class="slide"><img src="/slickthumb/img/img01.jpg"></div>
<div class="slide"><img src="/slickthumb/img/img02.jpg"></div>
<div class="slide"><img src="/slickthumb/img/img03.jpg"></div>
<div class="slide"><img src="/slickthumb/img/img04.jpg"></div>
</div>
</div>JS
ごく普通にbxSliderを実行します｡
$(function(){
$(".bxslider").bxSlider({
auto: true
});
});CSS
CSSに以下を追記します｡
6行目の「max-width」は適宜変更してください｡
.bxslider_wrap {
overflow: hidden;
}
.bx-wrapper {
max-width: 640px!important; /*スライドの幅に合わせて変更*/
margin-left: auto;
margin-right: auto;
background: none;
border: none;
box-shadow: none;
}
.bx-viewport {
overflow: visible!important;
}6行目の「max-width」を適宜変更すれば､正方形などにも対応できます｡
max-width: 320px!important; /*スライドの幅に合わせて変更*/
コメント
「できました！」などの報告もお待ちしております｡
お役に立てましたら応援をお待ちしております！
頂いた応援は子育てに活用させていただきます｡
または以下のボタンからなにか買って応援 (PR)