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

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

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

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

Q&A

解決済

1回答

6432閲覧

【jQuery】bxsliderを使用したスライダーがスマホサイズにした時だけ巻き戻るような動作をする

miyoshi_work

総合スコア69

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

0グッド

0クリップ

投稿2017/01/25 09:23

編集2017/01/26 09:23

いつもお世話になっております。

今回、jQueryのプラグイン、「bxslider」を使用して
レスポンシブ対応のスライダーを作成することになり、下記コード実装しました。

PCの時は問題なく動作するのですが画面幅をスマホサイズにした際、スライダーが上手く動作せずご質問させていただきました。

上手くいっていない部分なのですが、
next(画像に重なった>)を押して、
最後の画像(下記ソースで三枚目の画像)でさらにnextを押すと
一瞬画像の2枚目が移り(TEXT02)その後すぐに1枚目が表示されるといった動作になってしまいます。(実機スマホ、PCでの画面幅調整ともに同じ動作です)

これをTEXT01からTEXT02の画像にうつるときのように
滑らかに移動するようにしたいです。

cssで無理やり画像サイズを変えてるのが原因なのでしょうか。。。

また、関係あるのかわかりませんが、画像をシステムで登録する仕組みとなっておりまして、PC表示で登録画像一枚の際はセンター寄せされるように、また、画像数がPCで2枚、スマホで1枚の際にはスライダーが動かないようにといった記述もしております。

どこをいじれば良いかわからず、ご教授頂けますと幸いです。

js/jquery.bxSlider.min.jsは、
http://bxslider.com/
右上のダウンロードより取得しました。

###19:27 追記
https://teratail.com/questions/30104

こちらをお見かけし、githubからjquery.bxslider.min.jsを落としてみたところ、上記で問題としていたnextを押した際の動作は綺麗に推移するようになりました!
ただ今度は上手くいっていたPCの画面サイズでの動きがおかしくなり、2枚目のnextを押すと1枚目が出たり2枚目が出たりします。。
またスマホサイズの画面の際も、prevを連打するとだんだんおかしな動作になってしまい。。。

動作としては追記前に落としたjsの方が理想の動きでした。

###1/26 18:14 追記

追記前のDLボタンより落としたjquery.bxSlider.min.jsを使用し、
スマホサイト表示時には

.bx-clone { display: none; }

としたところ、

nextを押した際に一瞬画像の2枚目(TEXT02)が移るといった動作はなくなり、綺麗に巻き戻るようにはなりました。

ただやはり巻き戻るような動作をしてしまいます…

昨日の追記でbxsliderのバージョンをあげれば巻き戻りの動作だけはなくなることはわかっているので、あとはcssのバッティングなのでしょうか…

ちょっと質問内容が変わってきた気もするので
回答ないようでしたら
一度自己解決で締め切り新しく質問し直そうかと思います。

###該当のソースコード

html

1 2<head> 3<meta name="viewport" content="width=device-width, initial-scale=1"/> 4<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 5<script src="js/jquery.bxSlider.min.js"></script> 6</head> 7<body> 8<div id="slide_space" class="main_slider"> 9 <ul class="bxslider"> 10 <li><a href="#"> 11 <figure> <img src="https://placehold.jp/470x320.png" alt="ああ"> 12 <figcaption> 13 <p>TEXT01<span class="shop_name">01</span></p> 14 </figcaption> 15 </figure> 16 </a> </li> 17 <li> <a href="#"> 18 <figure> <img src="https://placehold.jp/470x320.png" alt="ああ"> 19 <figcaption> 20 <p>TEXT02<span class="shop_name">02</span></p> 21 </figcaption> 22 </figure> 23 </a> </li> 24 <li> <a href="#"> 25 <figure> <img src="https://placehold.jp/470x320.png" alt="ああ"> 26 <figcaption> 27 <p>TEXT03<span class="shop_name">03</span></p> 28 </figcaption> 29 </figure> 30 </a> </li> 31 </ul> 32</div> 33</body>

javascript

1// JavaScript Document 2$(document).ready(function(){ 3"use strict"; 4 function bxslider(){ 5 var obj = $('.bxslider').bxSlider({ 6 auto: true,//自動切り替えの有無 7 pause:8000,//停止時間※デフォルトは4000 8 speed:1500,//動くスピード※デフォルトは500 9 minSlides: 1,//一度に表示させる画像の最小値 10 maxSlides: 2,//一度に表示させる画像の数 11 slideWidth: 470, 12 slideMargin: 0, 13 moveSlides: 1, 14 touchEnabled: true, 15 pager: false, 16 prevText: '<', 17 nextText: '>', 18 onSlideAfter: function () { obj.startAuto(); } 19 }); 20 } 21 var sliderImg = $('.bxslider li:not(.bx-clone)').length; 22 23 if (window.matchMedia('(max-width: 640px)').matches) { 24 if(sliderImg > 1){ 25 bxslider(); 26 return false; 27 } 28 }else if(sliderImg > 2){ 29 bxslider(); 30 }else if(sliderImg === 1){ 31 $(".bxslider").addClass("onlyimg"); 32 } 33 34});

css

1* { 2 -webkit-box-sizing: border-box; 3 -moz-box-sizing: border-box; 4 box-sizing: border-box; 5} 6article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary { 7 display: block; 8} 9figure { 10 margin: 0; 11} 12a { 13 color: #337ab7; 14 text-decoration: none; 15 background-color: transparent; 16} 17img { 18 vertical-align: middle; 19 border: 0; 20} 21p { 22 margin: 0 0 10px; 23} 24.bxslider { 25 margin: 0 auto; 26 overflow: hidden; 27 position: relative; 28 width: 940px; 29 padding-left: 0; 30} 31.bxslider li { 32 list-style: none; 33 float: left; 34 position: relative; 35 width: 470px; 36} 37.bx-prev, 38.bx-next { 39 position: absolute; 40 color: #333!important; 41 font-weight: bold; 42 font-size: 25px; 43 background: rgba(255,255,255,0.8); 44 height: 50px; 45 width: 35px; 46 line-height: 50px; 47 -moz-border-radius: 0 50px 50px 0; 48 -webkit-border-radius: 0 50px 50px 0; 49 -o-border-radius: 0 50px 50px 0; 50 -ms-border-radius: 0 50px 50px 0; 51 border-radius: 0 80px 80px 0; 52 z-index: 1000; 53 top: 0; 54 bottom: 0; 55 margin: auto; 56} 57a.bx-prev:hover, 58a.bx-next:hover { 59 text-decoration: none; 60} 61.bx-next { 62 -moz-border-radius: 50px 0 0 50px; 63 -webkit-border-radius: 50px 0 0 50px; 64 -o-border-radius: 50px 0 0 50px; 65 -ms-border-radius: 50px 0 0 50px; 66 border-radius: 50px 0 0 50px; 67 right: 0; 68 text-align: right; 69} 70.bx-wrapper { 71 position: relative; 72 margin: 0 auto 30px; 73 padding: 0; 74 *zoom: 1; 75} 76.bx-wrapper .bx-pager, 77.bx-wrapper .bx-controls-auto { 78 position: absolute; 79 width: 100%; 80} 81.bx-wrapper .bx-pager { 82 text-align: center; 83 font-size: .85em; 84 font-family: Arial; 85 font-weight: bold; 86 color: #666; 87 padding-top: 5px; 88} 89.bx-wrapper .bx-pager .bx-pager-item, 90.bx-wrapper .bx-controls-auto .bx-controls-auto-item { 91 display: inline-block; 92 *zoom: 1; 93 *display: inline; 94} 95.bx-wrapper .bx-pager.bx-default-pager a { 96 background: #fba4c1; 97 text-indent: -9999px; 98 display: block; 99 width: 10px; 100 height: 10px; 101 margin: 0 5px; 102 outline: 0; 103 -moz-border-radius: 5px; 104 -webkit-border-radius: 5px; 105 border-radius: 5px; 106} 107.bx-wrapper .bx-pager.bx-default-pager a.active { 108 background: #de094f; 109} 110.main_slider img { 111 border-style: none; 112 width: 100%; 113} 114.main_slider figcaption { 115 position: absolute; 116 bottom: 0; 117 padding: 2px 0; 118 width: 100%; 119 background-color: rgba(241,241,241,0.8); 120 font-size: 28px; 121 font-weight: bold; 122} 123.main_slider figcaption p { 124 padding: 2px 16px; 125 margin-bottom: 0px; 126} 127.main_slider .shop_name { 128 float: right; 129 font-size: 22px; 130 font-weight: normal; 131 margin-top: 8px; 132} 133.main_slider a:hover, 134 .main_slider a:focus { 135 text-decoration: none; 136} 137.bxslider.onlyimg { 138 width: 470px; 139} 140 141@media screen and (min-width:641px) { 142.bxslider { 143 height: 320px!important; 144} 145.bxslider li { 146 width: 470px!important; 147} 148} 149 150@media screen and (max-width:640px) { 151.bxslider { 152 height: 245px!important; 153} 154.bxslider li { 155 width: 360px!important; 156} 157} 158@media screen and (max-width:362px) { 159.bxslider li { 160width: 310px!important; 161} 162}

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

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

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

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

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

guest

回答1

0

ベストアンサー

いっそのこと違うライブラリを探されてみてはいかがでしょうか。Swiperが比較的なんでも出来てお勧めです。

【jQuery無しで動く神スライダー[Swiper]が便利すぎて。 - ONZE】
http://on-ze.com/archives/4213

【jQuery無しで動く!「swiper」がとても便利 | ホームページ制作 大阪|株式会社I.M.D】
https://www.imd-net.com/blog/2016/05/31-235955/

【Swiper - Most Modern Mobile Touch Slider】
http://idangero.us/swiper/

投稿2017/02/08 14:56

kei344

総合スコア69364

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問