web-dev-qa-db-ja.com

Bootstrapカルーセルスライダーでモバイルの左/右スワイプを使用する方法

DEMO JSSFIDDLE

  <div class="col-md-4">
          <!--Carousel-->
          <div id="sidebar-carousel-1" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators grey">
              <li data-target="#sidebar-carousel-1" data-slide-to="0" class="active"></li>
              <li data-target="#sidebar-carousel-1" data-slide-to="1"></li>
              <li data-target="#sidebar-carousel-1" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner">
              <div class="item active">
                <a href="" data-lightbox="image-1" title="">
                <img src="http://shrani.si/f/3D/13b/1rt3lPab/2/img1.jpg" alt="...">
                </a>
              </div>
              <div class="item">
                <a href="" data-lightbox="image-1" title="">
                <img src="http://shrani.si/f/S/jE/UcTuhZ6/1/img2.jpg" alt="...">
                </a>                  </div>
              <div class="item">
                <a href="" data-lightbox="image-1" title="">
                <img src="http://shrani.si/f/h/To/1yjUEZbP/img3.jpg" alt="...">
                </a>                  </div>
            </div>
             <!-- Controls -->
        <a class="left carousel-control" href="#sidebar-carousel-1" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="#sidebar-carousel-1" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
                  </div><!--/Carousel--></div>

私がやりたいのは、モバイルデバイスのみに左/右タッチスワイプ機能を追加することです。どうやってやるの？

また、ホバーに表示されるprev/nextボタンをモバイル/ iPadバージョン用に小さくするにはどうすればよいですか？

ありがとう

jqueryhtmlcsstwitter-bootstrap-3carousel
55
user3187469

UPDATE：

私がWebデザインを始めたばかりのときに、このソリューションを思いつきました。私は年を取り、賢くなったので、答えはMark Shiraldiの方が良い選択肢のようです。次のトップアンサーをご覧ください。より生産的なソリューションです。

最近プロジェクトに取り組みましたが、この例は完璧に機能しました。以下のリンクをお知らせします。

まず、jQuery mobileを追加する必要があります。

http://jquerymobile.com/

これによりタッチ機能が追加され、スワイプなどのイベントを作成するだけで済みます。

<script>
$(document).ready(function() {
   $("#myCarousel").swiperight(function() {
      $(this).carousel('prev');
    });
   $("#myCarousel").swipeleft(function() {
      $(this).carousel('next');
   });
});
</script>

リンクは以下のとおりです。ここで、使用したチュートリアルを見つけることができます。

http://lazcreative.com/blog/how-to/how-to-adding-swipe-support-to-bootstraps-carousel/

87
Abdul-Rafay Shaikh

最近取り組んでいるプロジェクトにこの機能を追加する必要があり、この問題を解決するためにjQuery Mobileを追加するのはやり過ぎのように思えたので、解決策を考え出してgithubに追加しました： bcSwipe（Bootstrap Carousel Swipe） 。

これは軽量のjQueryプラグイン（最大600バイト対8 kbのjQuery Mobileタッチイベント）であり、AndroidおよびiOSでテスト済みです。

これがあなたの使い方です：

$('.carousel').bcSwipe({ threshold: 50 });
91
Mark Shiraldi

私はパーティーに少し遅れていますが、ここで私が使用しているjQueryを少し紹介します。

$(".carousel").on("touchstart", function(event){
        var xClick = event.originalEvent.touches[0].pageX;
    $(this).one("touchmove", function(event){
        var xMove = event.originalEvent.touches[0].pageX;
        if( Math.floor(xClick - xMove) > 5 ){
            $(this).carousel('next');
        }
        else if( Math.floor(xClick - xMove) < -5 ){
            $(this).carousel('prev');
        }
    });
    $(".carousel").on("touchend", function(){
            $(this).off("touchmove");
    });
});

JQuery mobileやその他のプラグインは必要ありません。スワイプの感度を調整する必要がある場合は、5および-5を調整します。これが誰かを助けることを願っています。

83
Liam

このソリューションを参照してください：Bootstrap TouchCarousel。 Twitter BootstrapのCarousel（v3）のドロップイン完全機能により、タッチデバイスでジェスチャーを有効にします。 http://ixisio.github.io/bootstrap-touch-carousel/

4
stan1379

私のようにjQuery mobileを使いたくない場合。 Hammer.js を使用できます

それはほとんど不要なコードのないjQuery Mobileに似ています。

$(document).ready(function() {
  Hammer(myCarousel).on("swipeleft", function(){
    $(this).carousel('next');
  });
  Hammer(myCarousel).on("swiperight", function(){
    $(this).carousel('prev');
  });
});
3
Madan Bhandari

チェックされたソリューションは正確ではありません。マウスを右クリックすると右スワイプがトリガーされることがあります。スワイプのためにさまざまなプラグインを試した後、私はほぼ完璧なものを見つけました。

touchSwipe

このプラグインは将来の要素をサポートしないため、「ほぼ」と言いました。そのため、スワイプコンテンツがajaxなどによって変更された場合、スワイプコールを再初期化する必要があります。このプラグインには、マルチフィンガータッチ、ピンチなどのタッチイベントで遊ぶための多くのオプションがあります。

h ttp：//labs.rampinteractive.co.uk/touchSwipe/demos/index.html

解決策1：

$("#myCarousel").swipe( {
            swipe:function(event, direction, distance, duration, fingerCount, fingerData) {

                if(direction=='left'){
                    $(this).carousel('next');
                }else if(direction=='right'){
                    $(this).carousel('prev');
                }

            }
        });

解決策2：（将来の要素の場合）

function addSwipeTo(selector){
            $(selector).swipe("destroy");
            $(selector).swipe( {
                swipe:function(event, direction, distance, duration, fingerCount, fingerData) {
                    if(direction=='left'){
                        $(this).carousel('next');
                    }else if(direction=='right'){
                        $(this).carousel('prev');
                    }
                }
            });
}
addSwipeTo("#myCarousel");
2
Rameez Rami

これを見つけた人は誰でも、カルーセルをスワイプすると、約5日前（2018年10月20日）
https://github.com/twbs/bootstrap/pull/25776

https://deploy-preview-25776--twbs-bootstrap4.netlify.com/docs/4.1/components/carousel/

1
geo

Carousel Swipe。 重いjQuery mobileを使用するよりも私が好む同じ機能は、githubのソースコードに直接ジャンプして、ファイルcarousel-swipe.jsをプロジェクトディレクトリにコピーすることをお勧めします。

以下のようにスワイパーイベントを使用します。

$('#carousel-example-generic').carousel({
      interval: false 
  });
0
Shweta