Q&A
質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
はじめて質問させていただきます。
よろしくお願いします。
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> ``` よろしくお願いします。
回答2件
0
jun68ykt さんの回答の通りで動きますよ。
コピペで動くサンプル
html
1<!DOCTYPE HTML> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <link rel="stylesheet" href="//cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css"> 7 <style type="text/css"> 8 .container { 9 width: 600px; 10 } 11 </style> 12 </head> 13 <body> 14 <div class="container"> 15 <ul class="bxslider"> 16 <li><img src="https://dummyimage.com/600x200/eeeeee/000000&text=1" /></li> 17 <li><img src="https://dummyimage.com/600x200/eeeeee/000000&text=2" /></li> 18 <li><img src="https://dummyimage.com/600x200/eeeeee/000000&text=3" /></li> 19 </ul> 20 </div> 21 <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 22 <script src="//cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script> 23 24 <script type="text/javascript"> 25 $(function () { 26 $(".bxslider").bxSlider({ 27 auto: true 28 }); 29 }); 30 </script> 31 </body> 32</html>
投稿2018/02/17 18:45
退会済みユーザー
総合スコア0
0
ベストアンサー
こんにちは。
実際に試していないので、うまくいくか分かりませんが
を見ると、Auto の中にある、 以下
にそって、
javascript
1$('.bxslider').bxSlider({・・・});
の {・・・} に
javascript
1autoStart: true
を追加すると
自動で動くように
なるかもしれません。
（うまくいかなかったらごめんなさい）
追記
私のほうでも確認しました。
javascript
1autoStart: true
は、ページがロードされたときにスライドを自動的に再生するプロパティではなかったようで、
すみません。
ご質問のコードにも
javascript
1auto: true,//自動再生
と書かれているとおり、自動再生のプロパティは auto であることを以下で確認できました。
auto: true **あり： **
https://jsfiddle.net/jun68ykt/0a7wmj07/11/ => 画面読み込み後、２，３秒後に開始します。
auto: true なし：
https://jsfiddle.net/jun68ykt/0a7wmj07/12/ => 開始しない。
ですので、最初の回答に書いた、「autoStart: true にしてみては？」という提案は撤回します。
その上で、次に、ご質問のコードのここが怪しいのでは？と思ったことを書きます。
ご質問のコードだと、以下の２カ所で、 .bxSlider() 関数を実行して、スライダーになるようにしています。
(1) <div class="bxslider"> に対して
javascript
1$('.bxslider').bxSlider({ 2 auto: true,//自動再生 3 autoControls: false,//再生・停止ボタン 4 controls: true,//NEXTボタン・PREVボタン 5 pager: true,//スライドナビ 6 speed: 500,//スライドの移動速度 7 autoHover: false,//マウスオーバー時停止 8 pause: 500,//自動再生の間隔 9 easing: 'swing',//イージング 10 minSlides: 3,//表示要素の最小数 11 maxSlides: 3,//表示要素の最大数 12 moveSlides: 1,//一度にスライドする要素数 13 slideWidth: 1170,//要素の幅 14 startSlide: 0,//最初にアクティブにする要素 15});
(2) '.bxslider > ul' に対して
javascript
1$slide3_ul.bxSlider({ 2 maxSlides: 2, 3 easing: 'easeOutExpo', 4 speed: 1000, 5 onSliderLoad: function(cr){ 6 $slide3_ul.children('li[data-num="' + cr + '"]').addClass('active'); 7 $slide3.find('.bx-viewport > ul').css({ 8 width: m * 100 + 415 + '%' 9});
私が思ったのは、上記のふたつのうち、 .bxSlider()を実行する対象は
(2) の <ul> のほうだけでよいのではないか？ということです。
先に挙げた、auto: true ありなしを試す jsFiddle に作ったコードでも、
<ul> に対してだけ、 .bxSlider() を実行しています。
ですので、ご質問のコードような、２箇所で .bxSlider() を実行してしまうと、
うまく動くのだろうか？ という懸念があります。
私自身、実際にフロントエンド開発の業務で bxSliderを使った実績がありますが、
上記のように、２カ所（それも、この例にあるような親子関係にある２つの要素）に対して
初期化するスライダーを作ったことはないですし、また、そういうやり方もあるということが
書かれたドキュメントを読んだこともないです。（もし bxSlider の作者か
主要なメンテナーの方が「そういうやり方もある」と、どこかでコード例とともに言っている
のでしたら、私の不勉強ですから、逆にご教示いただきたいです。）
ですので、現状では、上記の２カ所で .bxSlider() を実行しているのを、
<ul> に対してだけ行うようにして、そちらにオプションもまとめて渡せば
うまくいくのではないか？ と思っています。
もし、ご質問にあるような、２カ所で .bxSlider()を実行するやり方もアリで、
そこはうまくいく確信があっておやりになっているのでしたら、すみません、この提案は
無視してください。
投稿2018/02/16 07:10
編集2018/02/19 01:46
総合スコア9058
あなたの回答
tips
プレビュー
