web-dev-qa-db-ja.com

特定のビューポート幅でフクロウカルーセルを無効にする

現在、フクロウカルーセルを使用して、デスクトップ/ラップトップサイズのデバイスにギャラリーを表示しています。ただし、より小さなデバイスでは、プラグインを無効にして、各画像を上下に重ねて表示します。

これは可能ですか？フクロウカルーセルを微調整して、特定のブレークポイントで画面に特定の数の画像を表示できることを承知しています。しかし、私はそれを完全にオフにして、すべてのdivなどを削除できるようにしたいと思います。

これが私が現在現在作業しているもののペンです： http://codepen.io/abbasinho/pen/razXdN

HTML：

<div id="carousel">
  <div class="carousel-item" style="background-image: url(http://owlgraphic.com/owlcarousel/demos/assets/owl1.jpg);">
  </div>
  <div class="carousel-item" style="background-image: url(http://owlgraphic.com/owlcarousel/demos/assets/owl2.jpg);">
  </div>
  <div class="carousel-item" style="background-image: url(http://owlgraphic.com/owlcarousel/demos/assets/owl3.jpg);">
  </div>
</div>

CSS：

#carousel {
  width: 100%;
  height: 500px;
}

.carousel-item {
  width: 100%;
  height: 500px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

jQuery：

$("#carousel").owlCarousel({
      navigation : true,
      slideSpeed : 300,
      paginationSpeed : 400,
      singleItem: true
});

どんな援助も相変わらずありがたく受けられます！

javascriptjquerycsscarouselowl-carousel
12
abbas_arezoo

画面の幅が854pxより大きい場合は、プラグインを無効にする必要がありました。もちろん、必要に応じてコードを変更できます。これが私の解決策です：

  1. プラグインを呼び出す前にビューポートの幅を確認してください。
  2. 幅がプラグインを呼び出すのに適している場合は、プラグインを呼び出します。または、プラグインがすでに呼び出されて破棄されているかのように表示する「off」クラスを追加します。
  3. サイズ変更時：
    3.1。幅がプラグインの呼び出しに適していて、プラグインがまだ呼び出されていないか、以前に破棄された場合（'off'それを知るためのクラス）、それからプラグインを呼び出します。
    3.2。幅がプラグインの呼び出しに適しておらず、プラグインが現在アクティブである場合は、フクロウのトリガーイベントでプラグインを破棄しますdestroy.owl.carouselと不要なラッパー要素を削除します'owl-stage-outer' その後。
$(function() {
    var owl = $('.owl-carousel'),
        owlOptions = {
            loop: false,
            margin: 10,
            responsive: {
                0: {
                    items: 2
                }
            }
        };

    if ( $(window).width() < 854 ) {
        var owlActive = owl.owlCarousel(owlOptions);
    } else {
        owl.addClass('off');
    }

    $(window).resize(function() {
        if ( $(window).width() < 854 ) {
            if ( $('.owl-carousel').hasClass('off') ) {
                var owlActive = owl.owlCarousel(owlOptions);
                owl.removeClass('off');
            }
        } else {
            if ( !$('.owl-carousel').hasClass('off') ) {
                owl.addClass('off').trigger('destroy.owl.carousel');
                owl.find('.owl-stage-outer').children(':eq(0)').unwrap();
            }
        }
    });
});

そして無効にされたOwl要素を表示するためのちょっとしたCSS：

.owl-carousel.off {
    display: block;
}
19
mcmimik

CSSベースのソリューションを使いやすくする

@media screen and (max-width: 992px) {
  .owl-item.cloned{
    display: none !important;
  }
  .owl-stage{
    transform:none !important;
    transition: none !important;
    width: auto !important;
  }
  .owl-item{
    width: auto !important;
  }
}
7
Mark Williams

mcmimikの答え は正しいですが、機能するように変更する必要がありました。

関数内：

_    $(window).resize(function () {
    if ($(window).width() < 641) {
        if ($('.owl-carousel').hasClass('off')) {
            var owlActive = owl.owlCarousel(owlOptions);
            owl.removeClass('off');
        }
    } else {
        if (!$('.owl-carousel').hasClass('off')) {
             owl.addClass('off').trigger('destroy.owl.carousel');
            owl.find('.owl-stage-outer').children(':eq(0)').unwrap();
        }
    }
});
_

スワップアウトowl.addClass('off').trigger('destroy.owl.carousel');からowl.addClass('off').data("owlCarousel").destroy();：

_    $(window).resize(function () {
    if ($(window).width() < 641) {
        if ($('.owl-carousel').hasClass('off')) {
            var owlActive = owl.owlCarousel(owlOptions);
            owl.removeClass('off');
        }
    } else {
        if (!$('.owl-carousel').hasClass('off')) {
            owl.addClass('off').data("owlCarousel").destroy();
            owl.find('.owl-stage-outer').children(':eq(0)').unwrap();
        }
    }
});
_
4
Aline Vianna
function owlInitialize() {
   if ($(window).width() < 1024) {
      $('#carousel').owlCarousel();
   }else{
      $('#carousel').owlCarousel('destroy');
   }
}

$(document).ready(function(e) {
   owlInitialize();
});

$(window).resize(function() {
   owlInitialize();
});

作業フィドル： https://jsfiddle.net/j6qk4pq8/187/

3
Roy van Wensen

簡単です。jqueryを使用してください。カルーセルのコンテナーdivにクラスを追加します（例： "<div id="carousel class='is_hidden'> "、たとえば" .is_hidden{display:none;} "。次に、ウィンドウの幅に応じて、jqueryを使用してクラスを削除するか、クラスを追加します。

0
Gavin Simpson