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

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

新規登録して質問してみよう
ただいま回答率
85.35%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

0回答

813閲覧

bxsliderで最後のスライドが表示されて、一気にスライドしてしまうバグについて

mmngchip

総合スコア19

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/02/03 06:48

同じ内容の質問を投稿してたのですが、誤って解決済みにしてしまったので
再度投稿させていただきました。申し訳ございません。

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点とも試してみたのですが、変化有りませんでした。

ご教示いただければ幸いです。
よろしくお願いいたします。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

x_x

2020/02/03 09:15

ベストアンサーは外せたのでは? 誤って解決済みにしたという質問はどれでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問