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

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

ただいまの
回答率

90.34%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,205

miyoshi_work

score 67

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

今回、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のバッティングなのでしょうか…

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

該当のソースコード

<head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquery.bxSlider.min.js"></script>
</head>
<body>
<div id="slide_space" class="main_slider">
  <ul class="bxslider">
    <li><a href="#">
      <figure> <img src="https://placehold.jp/470x320.png" alt="ああ">
        <figcaption>
          <p>TEXT01<span class="shop_name">01</span></p>
        </figcaption>
      </figure>
      </a> </li>
    <li> <a href="#">
      <figure> <img src="https://placehold.jp/470x320.png" alt="ああ">
        <figcaption>
          <p>TEXT02<span class="shop_name">02</span></p>
        </figcaption>
      </figure>
      </a> </li>
    <li> <a href="#">
      <figure> <img src="https://placehold.jp/470x320.png" alt="ああ">
        <figcaption>
          <p>TEXT03<span class="shop_name">03</span></p>
        </figcaption>
      </figure>
      </a> </li>
  </ul>
</div>
</body>
// JavaScript Document
$(document).ready(function(){
"use strict";
    function bxslider(){
        var obj = $('.bxslider').bxSlider({
            auto: true,//自動切り替えの有無
            pause:8000,//停止時間※デフォルトは4000
            speed:1500,//動くスピード※デフォルトは500
            minSlides: 1,//一度に表示させる画像の最小値
            maxSlides: 2,//一度に表示させる画像の数
            slideWidth: 470,
            slideMargin: 0,
            moveSlides: 1,
            touchEnabled: true,
            pager: false,
            prevText: '<',
            nextText: '>',
            onSlideAfter: function () { obj.startAuto(); }
        });
    }
  var sliderImg = $('.bxslider li:not(.bx-clone)').length;

    if (window.matchMedia('(max-width: 640px)').matches) {
        if(sliderImg > 1){
            bxslider();
            return false;
        }
    }else    if(sliderImg > 2){
            bxslider();
    }else    if(sliderImg === 1){
            $(".bxslider").addClass("onlyimg");
    }

});
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary {
  display: block;
}
figure {
  margin: 0;
}
a {
  color: #337ab7;
  text-decoration: none;
  background-color: transparent;
}
img {
  vertical-align: middle;
  border: 0;
}
p {
  margin: 0 0 10px;
}
.bxslider {
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  width: 940px;
  padding-left: 0;
}
.bxslider li {
  list-style: none;
  float: left;
  position: relative;
  width: 470px;
}
.bx-prev,
.bx-next {
  position: absolute;
  color: #333!important;
  font-weight: bold;
  font-size: 25px;
  background: rgba(255,255,255,0.8);
  height: 50px;
  width: 35px;
  line-height: 50px;
  -moz-border-radius: 0 50px 50px 0;
  -webkit-border-radius: 0 50px 50px 0;
  -o-border-radius: 0 50px 50px 0;
  -ms-border-radius: 0 50px 50px 0;
  border-radius: 0 80px 80px 0;
  z-index: 1000;
  top: 0;
  bottom: 0;
  margin: auto;
}
a.bx-prev:hover,
a.bx-next:hover {
  text-decoration: none;
}
.bx-next {
  -moz-border-radius: 50px 0 0 50px;
  -webkit-border-radius: 50px 0 0 50px;
  -o-border-radius: 50px 0 0 50px;
  -ms-border-radius: 50px 0 0 50px;
  border-radius: 50px 0 0 50px;
  right: 0;
  text-align: right;
}
.bx-wrapper {
  position: relative;
  margin: 0 auto 30px;
  padding: 0;
 *zoom: 1;
}
.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
  position: absolute;
  width: 100%;
}
.bx-wrapper .bx-pager {
  text-align: center;
  font-size: .85em;
  font-family: Arial;
  font-weight: bold;
  color: #666;
  padding-top: 5px;
}
.bx-wrapper .bx-pager .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
  display: inline-block;
 *zoom: 1;
 *display: inline;
}
.bx-wrapper .bx-pager.bx-default-pager a {
  background: #fba4c1;
  text-indent: -9999px;
  display: block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  outline: 0;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
.bx-wrapper .bx-pager.bx-default-pager a.active {
  background: #de094f;
}
.main_slider img {
  border-style: none;
  width: 100%;
}
.main_slider figcaption {
  position: absolute;
  bottom: 0;
  padding: 2px 0;
  width: 100%;
  background-color: rgba(241,241,241,0.8);
  font-size: 28px;
  font-weight: bold;
}
.main_slider figcaption p {
  padding: 2px 16px;
  margin-bottom: 0px;
}
.main_slider .shop_name {
  float: right;
  font-size: 22px;
  font-weight: normal;
  margin-top: 8px;
}
.main_slider a:hover,
 .main_slider a:focus {
  text-decoration: none;
}
.bxslider.onlyimg {
  width: 470px;
}

@media screen and (min-width:641px) {
.bxslider {
  height: 320px!important;
}
.bxslider li {
  width: 470px!important;
}
}

@media screen and (max-width:640px) {
.bxslider {
  height: 245px!important;
}
.bxslider li {
  width: 360px!important;
}
}
@media screen and (max-width:362px) {
.bxslider li {
width: 310px!important;
}
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

いっそのこと違うライブラリを探されてみてはいかがでしょうか。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/10 13:53 編集

    お世話になっております。
    自己解決すると言っておきながら放置してしまってました…

    結局うまくいかなかったため
    FlexSlider (http://on-ze.com/archives/409)で代用しましたが、Swiperも使ったことがないのでどこかで試してみようと思います!

    ご回答ありがとうございました

    キャンセル

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

  • ただいまの回答率 90.34%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

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