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

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

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

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

20748閲覧

bxsliderで最後までいったら最初に戻す際に、ループを自然にするためにはどうすればいいですか?

ShunYoshizawa

総合スコア103

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2016/03/18 07:05

編集2016/03/18 09:34

スマホ版のスライドショーを
bxsliderを用いて作成しています。

auto: true

にして自動再生を設定しています。

また、

infiniteLoop: true

で最後までいったら最初にループするようにしています。

しかし、最後までいって最初の画像に戻る際にスムーズにいかず一度巻戻ってから表示されるような感じです。

でも私は他の画像が自然とスライドするように、
最後の画像から最初の画像にループする際も自然にループして欲しいと思っております。

html

1<div id="slideshow"> 2 <ul class="bxslider2"> 3 <li> 4 <img src="images/slide_img1.jpg"> 5 </li> 6 <li> 7 <img src="images/slide_img2.jpg"> 8 </li> 9 <li> 10 <img src="images/slide_img3.jpg"> 11 </li> 12 <li> 13 <img src="images/slide_img4.jpg"> 14 </li> 15 <li> 16 <img src="images/slide_img5.jpg"> 17 </li> 18 <li> 19 <img src="images/slide_img6.jpg"> 20 </li> 21 <li> 22 <img src="images/slide_img7.jpg"> 23 </li> 24 <li> 25 <img src="images/slide_img8.jpg"> 26 </li> 27 <li> 28 <img src="images/slide_img9.jpg"> 29 </li> 30 <li> 31 <img src="images/slide_img10.jpg"> 32 </li> 33 <li> 34 <img src="images/slide_img11.jpg"> 35 </li> 36 <li> 37 <img src="images/slide_img12.jpg"> 38 </li> 39 </ul> 40 </div>

bxsliderのcssになります。

css

1/** 2 * BxSlider v4.1.2 - Fully loaded, responsive content slider 3 * http://bxslider.com 4 * 5 * Written by: Steven Wanderski, 2014 6 * http://stevenwanderski.com 7 * (while drinking Belgian ales and listening to jazz) 8 * 9 * CEO and founder of bxCreative, LTD 10 * http://bxcreative.com 11 */ 12 13 14/** RESET AND LAYOUT 15===================================*/ 16 17.bx-wrapper { 18 position: relative; 19 margin: 0 auto 100px; 20 padding: 0; 21 *zoom: 1; 22} 23 24.bx-wrapper img { 25 max-width: 100%; 26 display: block; 27} 28 29/** THEME 30===================================*/ 31 32.bx-wrapper .bx-viewport { 33 background: #fff; 34 35 /*fix other elements on the page moving (on Chrome)*/ 36 -webkit-transform: translatez(0); 37 -moz-transform: translatez(0); 38 -ms-transform: translatez(0); 39 -o-transform: translatez(0); 40 transform: translatez(0); 41} 42 43.bx-wrapper .bx-pager, 44.bx-wrapper .bx-controls-auto { 45 position: absolute; 46 width: 100%; 47} 48 49/* LOADER */ 50 51.bx-wrapper .bx-loading { 52 min-height: 50px; 53 background: url(images/bx_loader.gif) center center no-repeat #fff; 54 height: 100%; 55 width: 100%; 56 position: absolute; 57 top: 0; 58 left: 0; 59 z-index: 2000; 60} 61 62/* PAGER */ 63 64.bx-wrapper .bx-pager { 65 text-align: center; 66 font-size: .85em; 67 font-family: Arial; 68 font-weight: bold; 69 color: #666; 70 padding-top: 20px; 71} 72 73.bx-wrapper .bx-pager .bx-pager-item, 74.bx-wrapper .bx-controls-auto .bx-controls-auto-item { 75 display: inline-block; 76 *zoom: 1; 77 *display: inline; 78} 79 80.bx-wrapper .bx-pager.bx-default-pager a { 81 background: #666; 82 text-indent: -9999px; 83 display: block; 84 width: 10px; 85 height: 10px; 86 margin: 0 5px; 87 outline: 0; 88 -moz-border-radius: 5px; 89 -webkit-border-radius: 5px; 90 border-radius: 5px; 91} 92 93.bx-wrapper .bx-pager.bx-default-pager a:hover, 94.bx-wrapper .bx-pager.bx-default-pager a.active { 95 background: #000; 96} 97 98/* DIRECTION CONTROLS (NEXT / PREV) */ 99 100.bx-wrapper .bx-prev { 101 left: 10px; 102 background: url(images/controls.png) no-repeat 0 -32px; 103} 104 105.bx-wrapper .bx-next { 106 right: 10px; 107 background: url(images/controls.png) no-repeat -43px -32px; 108} 109 110.bx-wrapper .bx-prev:hover { 111 background-position: 0 0; 112} 113 114.bx-wrapper .bx-next:hover { 115 background-position: -43px 0; 116} 117 118.bx-wrapper .bx-controls-direction a { 119 position: absolute; 120 top: 50%; 121 margin-top: -16px; 122 outline: 0; 123 width: 32px; 124 height: 32px; 125 text-indent: -9999px; 126 z-index: 9999; 127} 128 129.bx-wrapper .bx-controls-direction a.disabled { 130 display: none; 131} 132 133/* AUTO CONTROLS (START / STOP) */ 134 135.bx-wrapper .bx-controls-auto { 136 text-align: center; 137} 138 139.bx-wrapper .bx-controls-auto .bx-start { 140 display: block; 141 text-indent: -9999px; 142 width: 10px; 143 height: 11px; 144 outline: 0; 145 background: url(images/controls.png) -86px -11px no-repeat; 146 margin: 0 3px; 147} 148 149.bx-wrapper .bx-controls-auto .bx-start:hover, 150.bx-wrapper .bx-controls-auto .bx-start.active { 151 background-position: -86px 0; 152} 153 154.bx-wrapper .bx-controls-auto .bx-stop { 155 display: block; 156 text-indent: -9999px; 157 width: 9px; 158 height: 11px; 159 outline: 0; 160 background: url(images/controls.png) -86px -44px no-repeat; 161 margin: 0 3px; 162} 163 164.bx-wrapper .bx-controls-auto .bx-stop:hover, 165.bx-wrapper .bx-controls-auto .bx-stop.active { 166 background-position: -86px -33px; 167} 168 169/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */ 170 171.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager { 172 text-align: left; 173 width: 80%; 174} 175 176.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto { 177 right: 0; 178 width: 35px; 179} 180 181/* IMAGE CAPTIONS */ 182 183.bx-wrapper .bx-caption { 184 position: absolute; 185 bottom: 0; 186 left: 0; 187 background: #666\9; 188 background: rgba(80, 80, 80, 0.75); 189 width: 100%; 190} 191 192.bx-wrapper .bx-caption span { 193 color: #fff; 194 font-family: Arial; 195 display: block; 196 font-size: .85em; 197 padding: 10px; 198} 199

javascript

1<script> 2 $(document).ready(function(){ 3 var huga = $('.bxslider2').bxSlider({ 4 infiniteLoop: true, 5 controls: false, 6 swipeThreshold: 70, 7 auto: true, 8 pause: 3000, 9 onSlideAfter: function(){ 10 huga.startAuto(); 11 } 12 }); 13 }); 14</script> 15<script>

解決策を知っている方宜しくお願い致します。

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

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

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

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

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

takumaro_web

2016/03/18 07:46

htmlとjsとcssを貼り付けてもらってもいいですか?
guest

回答1

0

ベストアンサー

詳細の掲載ありがとうございます。

http://codepen.io/takumaro-web/pen/NNdOQG

頂いたソースを元にこちらで組んでみたのですが、
【最後までいって最初の画像に戻る際にスムーズにいかず一度巻戻ってから表示されるような感じです。】
こちらの事象が再現できないので、他に原因があるような気がします。

投稿2016/03/18 09:50

takumaro_web

総合スコア301

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

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

ShunYoshizawa

2016/03/18 10:11

回答ありがとうございます! そうですね。。ちゃんと動作していますね。。 普通「infiniteLoop: true」にするとこうなるんでしょうか?
takumaro_web

2016/03/18 10:16

DEMOをのぞいてもそうなっていたので、こうなると思いますよ。 考えられる原因としては.. ・jQueryのバージョン ・bxsliderのバージョン ・CSSのバッティング ・JSのバッティング かなーと思います。 CSSでなにか変更を加えたりしてますか? またバージョンを確認しなおすのもありかと思います。 code penのやつでは、 bxSlider 4.2.5 jquery 2.1.3 を使用しております。
ShunYoshizawa

2016/03/18 10:42

cssはいじっていません。 jsも試してみましたがバッティングしていませんでした。 バージョンについてですが、 どちらも現在公式ページからダウンロードすれば最新版ですよね?
ShunYoshizawa

2016/03/18 10:50

takumaro_webさんのjs部分をコピペさせてもらったところ、できました!!! ありがとうございます!!! ちなみに、あのjsはダウンロードしたフォルダからコピペしただけでしょうか?
takumaro_web

2016/03/18 10:57

よかったです☆ コピペしただけですよー!
ShunYoshizawa

2016/03/18 12:07

bxsliderからダウンロードした「jquery.bxslider.js」でしょうか?
takumaro_web

2016/03/18 16:27

githubから落としましたよ!
ShunYoshizawa

2016/03/19 08:50

かしこまりました! ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問