bxsliderの使い方メモ
2025年3月6日bxsliderの使い方メモ
https://bxslider.com/
公式サイトのGithubの最新版を使いたいけれど、最新版はループの仕様が変わっていて、
ループの最後から最初に切り替わるときに白いチラツキが発生するので、
古いバージョン4.12らへんを使う。
古いバージョンは各解説サイトさまにあるように、修正すればチラツキ解消できる。
<style>
.bxslider_wrap { overflow: hidden; position: relative; }
.bx-wrapper {
max-width: 660px!important; /* スライド幅+余白 */
margin-left: auto;
margin-right: auto;
background: none;
border: none;
box-shadow: none;
position: relative;
}
.bxslider {
display: flex;
justify-content: center;
margin-left:-25px;
}
.slide { padding:10px; margin:0px 10px; }
@media screen and (max-width: 768px){
.bxslider { margin:0px; }
.slide, .slide img { width:100%; max-width:100%; height:auto; padding:0px; margin:0px; }
}
.bx-viewport {
overflow: visible!important;
}
.bx-wrapper .bx-controls-direction a {
position: absolute;
top: 50%;
margin-top: -16px;
outline: 0;
width: 32px;
height: 32px;
text-indent: -9999px;
z-index: 9999;
}
.bx-wrapper .bx-next {
right: 0px;
background: url(controls.png) no-repeat -43px -32px;
}
.bx-wrapper .bx-prev {
left: 0px;
background: url(controls.png) no-repeat 0 -32px;
}
a:visited {
color: #1E1E1E;
}
.bx-wrapper .bx-pager {
text-align: center;
font-size: .85em;
font-family: Arial;
font-weight: bold;
color: #666;
padding-top: 20px;
}
.bx-wrapper .bx-pager .bx-pager-item, .bx-wrapper .bx-controls-auto .bx-controls-auto-item {
display: inline-block;
}
.bx-wrapper .bx-pager.bx-default-pager a {
background: #666;
text-indent: -9999px;
display: block;
width: 10px;
height: 10px;
margin: 0 5px;
outline: 0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active {
background:blue;
}
</style>
<div class="bxslider_wrap">
<div class="bxslider">
<div class="slide"><img src="IMAGE.jpg"></div>
<div class="slide"><img src="IMAGE.jpg"></div>
<div class="slide"><img src="IMAGE.jpg"></div>
<div class="slide"><img src="IMAGE.jpg"></div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="jquery.bxslider.js"></script>
<script>
$(function(){
$(".bxslider").bxSlider({
auto: true,
speed: 300,
pager: true, // ドットを表示
controls: true, // Prev/Next ボタンを表示
prevText: '<', // '<' にする
nextText: '>', // '>' にする
infiniteLoop: true, // ループを有効にする
touchEnabled: true, // タッチ操作を有効にする
});
});
</script>
