bxSliderデモページ | かけちまるblog

bxSliderのデモページ

jQueryで簡単にスライダーを実装できるプラグイン「bxSlider」を使って色々なデザインを実装しているページです。

記事ページはこちら

各セクションで

・実装サンプル
・実装で使用している画像のダウンロードリンク
・HTML
・CSS
・JavaScript

をのせていますので参考にしてみてください。

基本的なスライダー前後が見えるスライダー可視範囲に入ったら自動スライド開始

基本的なスライダー

実装サンプル

スライダーで使用している画像

スライダーで使用している画像のダウンロードはこちら

HTML

jQeryとプラグインは各自で読み込んでください。

HTML
コピー

<div class="slider_container">
    <div class="slider_wrap">
        <img class="slider_img" src="./image/slider_img01.jpg">
    </div>
    <div class="slider_wrap">
        <img class="slider_img" src="./image/slider_img02.jpg">
    </div>
    <div class="slider_wrap">
        <img class="slider_img" src="./image/slider_img03.jpg">
    </div>
</div>

CSS

CSS
コピー

.slider_container{
    width: 100%;
}

.slider_wrap{
    width: 100%;
}

.slider_img{
    display: block;
    object-fit: cover;
    width: 100%;
    height: auto;
}

/* bxsliderのスタイル */
.bx-wrapper{
    position: relative;
}

.bx-wrapper .bx-controls-direction a{
    outline: 0;
    text-indent: -9999px;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999;
}

.bx-wrapper .bx-next{
    right: 5%;
    /* お好みの画像に変更してください */
    background: url(./image/slider_arrow_right.svg) no-repeat;
}
.bx-wrapper .bx-prev {
    left: 5%;
    /* お好みの画像に変更してください */
    background: url(./image/slider_arrow_left.svg) no-repeat;
}

.bx-wrapper .bx-pager{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100px;
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
}

.bx-wrapper .bx-pager.bx-default-pager a {
    background: #fff;
    border-radius: 1000px;
    display: block;
    opacity: 0.5;
    text-indent: -9999px;
    width: 15px;
    height: 15px;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active, .bx-wrapper .bx-pager.bx-default-pager a:focus {
    opacity: 1;
}

JavaScript

JavaScript
コピー

$(window).on('load',function(){
    $('.slider_container').bxSlider();
});

前後が見えるスライダー

実装サンプル

スライダーで使用している画像

スライダーで使用している画像のダウンロードはこちら

HTML

jQeryとプラグインは各自で読み込んでください。

HTML
コピー

<div class="slider_container">
    <div class="slider_inner">
        <div class="slider_wrap">
            <img class="slider_img" src="./image/slider_img01.jpg">
        </div>
        <div class="slider_wrap">
            <img class="slider_img" src="./image/slider_img02.jpg">
        </div>
        <div class="slider_wrap">
            <img class="slider_img" src="./image/slider_img03.jpg">
        </div>
    </div>
</div>

CSS

CSS
コピー

.slider_container{
    margin-left: auto;
    margin-right: auto;
    width: 90%;
}

.slider_wrap{
    width: 100%;
}

.slider_img{
    display: block;
    object-fit: cover;
    width: 100%;
    height: auto;
}

/* bxsliderのスタイル */
.bx-wrapper{
    position: relative;
}

.bx-viewport{
    overflow: visible !important; /* これを追加しないとうまくいかない */
}

.bx-wrapper .bx-controls-direction a{
    outline: 0;
    text-indent: -9999px;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999;
}

.bx-wrapper .bx-next{
    right: 5%;
    /* お好みの画像に変更してください */
    background: url(./image/slider_arrow_right.svg) no-repeat;
}
.bx-wrapper .bx-prev {
    left: 5%;
    /* お好みの画像に変更してください */
    background: url(./image/slider_arrow_left.svg) no-repeat;
}

.bx-wrapper .bx-pager{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100px;
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
}

.bx-wrapper .bx-pager.bx-default-pager a {
    background: #fff;
    border-radius: 1000px;
    display: block;
    opacity: 0.5;
    text-indent: -9999px;
    width: 15px;
    height: 15px;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active, .bx-wrapper .bx-pager.bx-default-pager a:focus {
    opacity: 1;
}

JavaScript

JavaScript
コピー

$(window).on('load',function(){
    $('.slider_inner').bxSlider({
        easing: 'ease',
        speed: 1000,
        pause: 6000,
        auto: true,
        slideMargin: 10,
    });
});

可視範囲に入ったら自動スライド開始

実装サンプル

スライダーで使用している画像

スライダーで使用している画像のダウンロードはこちら

HTML

jQeryとプラグインは各自で読み込んでください。

HTML
コピー

<div class="slider_container">
    <div class="slider_wrap">
        <img class="slider_img" src="./image/slider_img01.jpg">
    </div>
    <div class="slider_wrap">
        <img class="slider_img" src="./image/slider_img02.jpg">
    </div>
    <div class="slider_wrap">
        <img class="slider_img" src="./image/slider_img03.jpg">
    </div>
</div>

CSS

CSS
コピー

.slider_container{
    width: 100%;
}

.slider_wrap{
    width: 100%;
}

.slider_img{
    display: block;
    object-fit: cover;
    width: 100%;
    height: auto;
}

/* bxsliderのスタイル */
.bx-wrapper{
    position: relative;
}

.bx-wrapper .bx-controls-direction a{
    outline: 0;
    text-indent: -9999px;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999;
}

.bx-wrapper .bx-next{
    right: 5%;
    /* お好みの画像に変更してください */
    background: url(./image/slider_arrow_right.svg) no-repeat;
}
.bx-wrapper .bx-prev {
    left: 5%;
    /* お好みの画像に変更してください */
    background: url(./image/slider_arrow_left.svg) no-repeat;
}

.bx-wrapper .bx-controls-auto{
    display: none; /* スタートボタンを非表示にする */
}

.bx-wrapper .bx-pager{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100px;
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
}

.bx-wrapper .bx-pager.bx-default-pager a {
    background: #fff;
    border-radius: 1000px;
    display: block;
    opacity: 0.5;
    text-indent: -9999px;
    width: 15px;
    height: 15px;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active, .bx-wrapper .bx-pager.bx-default-pager a:focus {
    opacity: 1;
}

JavaScript

JavaScript
コピー

$(window).on('load',function(){
    $('.slider_container').bxSlider({
        auto: true,
        autoStart: false,
        autoControls: true,
    });
});

$(window).on('scroll', function(){
    let scrollTop = $(window).scrollTop();
    let winH = $(window).height();

    if($('.slider_container').offset().top - winH * 0.8 < scrollTop){
        $('.bx-wrapper .bx-start').trigger('click');
    }
});