同じ内容の質問を投稿してたのですが、誤って解決済みにしてしまったので
再度投稿させていただきました。申し訳ございません。
bxsliderで、3つ表示で、1つずつスライドの設定にしているですが、
最後のスライドが最初に表示されており、
さらに最初は必ず4つ(最後から3つと最初の一枚)が一気にスライドしてしまいます。
下記のサイトを参考に書き換えてみたのですが、直りませんでした。
<参考サイト>
最後のスライダー画像が最初に表示されてしまう!そんな時に考えられる要因と対処方法3つ!
最初に記述していたjsは下記です。
js
1$(function(){ 2 var slider = $('#bxSlider01 ul').bxSlider(); 3 4 function sliderSetting(){ 5 var windowWidth = jQuery(window).width(); 6 var width = windowWidth / 1.4; 7 if(width > 768){ 8 slider.reloadSlider({ 9 speed: 3000, 10 slideMargin: 35, 11 pause: 5000, 12 pager: true, /*ページ送りを追加するかどうかの設定*/ 13 controls: false, /*前後のコントロールを追加するかどうかの設定。*/ 14 auto: true, /*自動スライドの設定*/ 15 minSlider: 3, 16 maxSlides: 3, 17 moveSlides: 1, /*一度のスライド時に移動するスライド数*/ 18 autoHover: true, 19 slideWidth: 310 20 }); 21 } else { 22 slider.reloadSlider({ 23 speed: 1000, 24 pager: true, /*ページ送りを追加するかどうかの設定*/ 25 controls: true, /*前後のコントロールを追加するかどうかの設定。*/ 26 auto: false, /*自動スライドの設定*/ 27 minSlider: 1, 28 maxSlides: 1, 29 moveSlides: 1, /*一度のスライド時に移動するスライド数*/ 30 slideWidth: width 31 }); 32 } 33 } 34 // 初期表示時の実行 35 sliderSetting(); 36 // リサイズ時の実行 37 $(window).resize( function() { 38 sliderSetting(); 39 }); 40});/*function閉じ*/
<試したこと>
参考サイトを元に記述したjsは下記です。
js
1$(window).on('load', function(){ 2 var slider = $('#bxSlider01 ul').bxSlider(); 3 var pauseTime = 5000; 4 5 function sliderSetting(){ 6 var windowWidth = jQuery(window).width(); 7 var width = windowWidth / 1.4; 8 if(width > 768){ 9 slider.reloadSlider({ 10 startSlide: 0, 11 speed: 3000, 12 slideMargin: 35, 13 pager: true, /*ページ送りを追加するかどうかの設定*/ 14 controls: false, /*前後のコントロールを追加するかどうかの設定。*/ 15 auto: false, /*自動スライドの設定*/ 16 minSlider: 3, 17 maxSlides: 3, 18 moveSlides: 1, /*一度のスライド時に移動するスライド数*/ 19 autoHover: true, 20 slideWidth: 310, 21 autoControls: false, 22 pause: pauseTime 23 }); 24 setTimeout(function(){ 25 slider.goToSlide(1); 26 slider.startAuto(); 27 },pauseTime); 28 } else { 29 slider.reloadSlider({ 30 speed: 1000, 31 pager: true, /*ページ送りを追加するかどうかの設定*/ 32 controls: true, /*前後のコントロールを追加するかどうかの設定。*/ 33 auto: false, /*自動スライドの設定*/ 34 minSlider: 1, 35 maxSlides: 1, 36 moveSlides: 1, /*一度のスライド時に移動するスライド数*/ 37 slideWidth: width 38 }); 39 } 40 } 41 // 初期表示時の実行 42 sliderSetting(); 43 // リサイズ時の実行 44 $(window).resize( function() { 45 sliderSetting(); 46 }); 47});/*function閉じ*/
参考サイトに記載の
・ど定番の対処法
・最初だけautoをfalseにしておく
・最終手段
の3点とも試してみたのですが、変化有りませんでした。
ご教示いただければ幸いです。
よろしくお願いいたします。
あなたの回答
tips
プレビュー