質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.91%

bx-sliderを自動で動くようにしたい

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 3,230

Ykn

score 9

はじめて質問させていただきます。
よろしくお願いします。

bx-sliderでスライドを作成しているのですが、自動で動くように設定できません。
良い改善策を探しております。ご意見いただけると幸いです。

 該当のソースコード

【html】

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="jquery.easing-1.3.pack.js"></script>
    <script src="jquery.bxslider.min.js"></script>

<div class="example bxslider3">
    <div class="bxslider">
        <ul>
            <li><img src="img1.jpg" alt="" /></li>
            <li><img src="img2.jpg" alt="" /></li>
            <li><img src="img3.jpg" alt="" /></li>
        </ul>
    </div>
</div>


【css】

.bxslider {
        position: relative;
    }
    .bxslider ul {
        opacity: 0;
    }

    .bxslider a {
        transition: 0.4s;
    }
    .bxslider .bx-pager {
        position: absolute;
        bottom: 26px;
        left: 0;
        width: 100%;
        height: 0px;
        text-align: center;
        display: inline;
    }
    .bxslider .bx-pager-item {
        display: inline;
        padding: 0 20px;
    }
    .bxslider .bx-pager-item a {
        background: rgba(0,0,0,1);
        display: inline-block;
        width: 16px;
        height: 16px;
        text-indent: -200%;
        overflow: hidden;
        border-radius: 50%;
    }
    .bxslider .bx-pager-item a:hover {
        background: rgba(0,0,0,0.6);
    }
    .bxslider .bx-pager-item a.active {
        background: rgba(160,160,160,1);
    }

    .bxslider .bx-controls-direction {
        position: absolute;
        top: 50%;
        left: 0;
        margin-top: -1em;
        width: 100%;
        height: 0px;
    }
    .bxslider .bx-controls-direction a {
        width: 40px;
        height: 40px;
        display: block;
        background: rgba(0,0,0,0.8);
        position: relative;
        text-indent: -100%;
        overflow: hidden;
    }
    .bxslider .bx-controls-direction a:hover {
        background: rgba(0,0,0,0.4);
    }
    .bxslider .bx-controls-direction a:before,
    .bxslider .bx-controls-direction a:after {
        content: '';
        position: absolute;
        top: 12px;
        left: 8px;
    }
    .bxslider .bx-controls-direction a:after {
        width: 16px;
        height: 16px;
        border-top: 1px solid #fff;
        border-right: 1px solid #fff;
        transform: rotate(45deg);
    }
    .bxslider .bx-controls-direction a.bx-prev:after {
        transform: rotate(-135deg);
        left: 16px;
    }
    .bxslider .bx-prev {
        float: left;
    }
    .bxslider .bx-next {
        float: right;
    }

    .bx-loading:before,
    .bx-loading:after,
    .bx-loading {
      border-radius: 50%;
      width: 1em;
      height: 1em;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
      -webkit-animation: load7 1.8s infinite ease-in-out;
      animation: load7 1.8s infinite ease-in-out;
    }
    .bx-loading {
      color: #000;
      font-size: 10px;
      position: absolute;
      top: 40%;
      left: 50%;
      text-indent: -100%;
      -webkit-transform: translateZ(0);
      -ms-transform: translateZ(0);
      transform: translateZ(0);
      -webkit-animation-delay: -0.16s;
      animation-delay: -0.16s;
    }
    .bx-loading:before {
      left: -3.5em;
      -webkit-animation-delay: -0.32s;
      animation-delay: -0.32s;
    }
    .bx-loading:after {
      left: 3.5em;
    }
    .bx-loading:before,
    .bx-loading:after {
      content: '';
      position: absolute;
      top: 0;
    }
    @-webkit-keyframes load7 {
      0%,
      80%,
      100% {
        box-shadow: 0 2.5em 0 -1.3em;
      }
      40% {
        box-shadow: 0 2.5em 0 0;
      }
    }
    @keyframes load7 {
      0%,
      80%,
      100% {
        box-shadow: 0 2.5em 0 -1.3em;
      }
      40% {
        box-shadow: 0 2.5em 0 0;
      }
    }
    .bxslider3 {
        overflow: hidden;
    }
    .bxslider3 .bxslider {
        max-width: 1000px;
        width: 100%;
        margin: 0 auto;
    }
    .bxslider3 ul li img {
        width: 100%;
        height: auto;
    }
    .bxslider3 ul li {
        opacity: 0.5;
    }
    .bxslider3 ul li.active {
        opacity: 1;
    }
    .bxslider3 .bx-viewport {
        overflow: visible !important;
    }

 試したこと

【js】

<script>
(function($){
$('.bxslider').bxSlider({
auto: true,//自動再生
autoControls: false,//再生・停止ボタン
controls: true,//NEXTボタン・PREVボタン
pager: true,//スライドナビ
speed: 500,//スライドの移動速度
autoHover: false,//マウスオーバー時停止
pause: 500,//自動再生の間隔
easing: 'swing',//イージング
minSlides: 3,//表示要素の最小数
maxSlides: 3,//表示要素の最大数
moveSlides: 1,//一度にスライドする要素数
slideWidth: 1170,//要素の幅
startSlide: 0,//最初にアクティブにする要素
});
$(window).on('load',function(){
//横幅いっぱい2
var $slide3 = $('.bxslider3');
var $slide3_ul = $slide3.find('.bxslider > ul');
$slide3_ul.children('li').each(function(i,elem){
$(this).attr('data-num',i);
});
var m = $slide3.find('.bxslider > ul > li').size();
$slide3_ul.bxSlider({
maxSlides: 2,
easing: 'easeOutExpo',
speed: 1000,
onSliderLoad: function(cr){
$slide3_ul.children('li[data-num="' + cr + '"]').addClass('active');
$slide3.find('.bx-viewport > ul').css({
width: m * 100 + 415 + '%'
});
$slide3_ul.animate({
opacity: 1
},500);
},
onSlideBefore: function($slideElement, oldIndex, newIndex){
$slide3_ul.children('li').removeClass('active').animate({
opacity: 0.5
},300);
},
onSlideAfter: function($slideElement, oldIndex, newIndex){
$slide3.find('.bx-viewport > ul > li[data-num="' + newIndex + '"]').addClass('active').animate({
opacity: 1
},300);
}
}
);
});

})(jQuery);
</script>

よろしくお願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2018/02/16 21:14

    質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

    キャンセル

  • Ykn

    2018/02/18 03:24

    申し訳ありません。修正しました。

    キャンセル

  • kei344

    2018/02/18 03:32

    エラーは出ていませんか?デベロッパーツールで確認してみてください。http://eng-entrance.com/javascript-display-error

    キャンセル

回答 2

checkベストアンサー

+2

こんにちは。
 
実際に試していないので、うまくいくか分かりませんが

https://bxslider.com/options/

を見ると、Auto の中にある、 以下

イメージ説明

にそって、

$('.bxslider').bxSlider({・・・});

の {・・・} に

autoStart: true


を追加すると

自動で動くように

なるかもしれません。
(うまくいかなかったらごめんなさい)


追記

私のほうでも確認しました。

autoStart: true


は、ページがロードされたときにスライドを自動的に再生するプロパティではなかったようで、
すみません。

ご質問のコードにも

auto: true,//自動再生


と書かれているとおり、自動再生のプロパティは auto であることを以下で確認できました。

auto: true あり: 
https://jsfiddle.net/jun68ykt/0a7wmj07/11/ => 画面読み込み後、2,3秒後に開始します。

auto: true なし: 
https://jsfiddle.net/jun68ykt/0a7wmj07/12/ => 開始しない。

ですので、最初の回答に書いた、「autoStart: true にしてみては?」という提案は撤回します。

その上で、次に、ご質問のコードのここが怪しいのでは?と思ったことを書きます。

ご質問のコードだと、以下の2カ所で、 .bxSlider() 関数を実行して、スライダーになるようにしています。

(1) <div class="bxslider"> に対して

$('.bxslider').bxSlider({
  auto: true,//自動再生
  autoControls: false,//再生・停止ボタン
  controls: true,//NEXTボタン・PREVボタン
  pager: true,//スライドナビ
  speed: 500,//スライドの移動速度
  autoHover: false,//マウスオーバー時停止
  pause: 500,//自動再生の間隔
  easing: 'swing',//イージング
  minSlides: 3,//表示要素の最小数
  maxSlides: 3,//表示要素の最大数
  moveSlides: 1,//一度にスライドする要素数
  slideWidth: 1170,//要素の幅
  startSlide: 0,//最初にアクティブにする要素
});


  
(2) '.bxslider > ul' に対して

$slide3_ul.bxSlider({
  maxSlides: 2,
  easing: 'easeOutExpo',
  speed: 1000,
  onSliderLoad: function(cr){
  $slide3_ul.children('li[data-num="' + cr + '"]').addClass('active');
  $slide3.find('.bx-viewport > ul').css({
  width: m * 100 + 415 + '%'
});

私が思ったのは、上記のふたつのうち、 .bxSlider()を実行する対象は
(2) の <ul> のほうだけでよいのではないか?ということです。

先に挙げた、auto: true ありなしを試す jsFiddle に作ったコードでも、
<ul> に対してだけ、 .bxSlider() を実行しています。

ですので、ご質問のコードような、2箇所で .bxSlider() を実行してしまうと、
うまく動くのだろうか? という懸念があります。

私自身、実際にフロントエンド開発の業務で bxSliderを使った実績がありますが、
上記のように、2カ所(それも、この例にあるような親子関係にある2つの要素)に対して
初期化するスライダーを作ったことはないですし、また、そういうやり方もあるということが
書かれたドキュメントを読んだこともないです。(もし bxSlider の作者か
主要なメンテナーの方が「そういうやり方もある」と、どこかでコード例とともに言っている
のでしたら、私の不勉強ですから、逆にご教示いただきたいです。)

ですので、現状では、上記の2カ所で .bxSlider() を実行しているのを、
<ul> に対してだけ行うようにして、そちらにオプションもまとめて渡せば
うまくいくのではないか? と思っています。

もし、ご質問にあるような、2カ所で .bxSlider()を実行するやり方もアリで、
そこはうまくいく確信があっておやりになっているのでしたら、すみません、この提案は
無視してください。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/02/18 03:25

    うまく動きませんでした。
    せっかくご回答いただいたのに申し訳ありません。

    キャンセル

  • 2018/02/18 23:51

    いえいえ、とんでもない。私も試してみましたが、どうやら、autoStart ではないようですね。その件ふくめて、回答に追記しましたので、ご確認ください。

    キャンセル

  • 2018/02/19 10:32

    解説ありがとうございます!見よう見まねで作っていたので、ulに対してだけやってみたら動きました。
    わかりやすい解説ありがとうございます!

    キャンセル

  • 2018/02/19 12:11

    解決されたようですね、よかったです!

    キャンセル

+2

jun68ykt さんの回答の通りで動きますよ。
コピペで動くサンプル

<!DOCTYPE HTML>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="//cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
        <style type="text/css">
            .container {
                width: 600px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <ul class="bxslider">
                <li><img src="https://dummyimage.com/600x200/eeeeee/000000&text=1" /></li>
                <li><img src="https://dummyimage.com/600x200/eeeeee/000000&text=2" /></li>
                <li><img src="https://dummyimage.com/600x200/eeeeee/000000&text=3" /></li>
            </ul>
        </div>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="//cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>

        <script type="text/javascript">
            $(function () {
                $(".bxslider").bxSlider({
                    auto: true
                });
            });
        </script>
    </body>
</html>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/02/19 10:33

    解決しました。回答ありがとうございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.91%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る