はじめて質問させていただきます。
よろしくお願いします。
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件
あなたの回答
tips
プレビュー