いつもお世話になっております。
今回、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}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/02/10 04:53 編集