web-dev-qa-db-ja.com

フクロウのカルーセルアイテムの間にスペースを追加する方法

フクロウのアイテムの間にスペースを追加するにはどうすればよいですか。アイテム間にマージンまたはパディングを追加します。これはレスポンシブである必要があります。jqueryにガターを追加できますか。

enter image description here

function newsCarousel(){
    $("#carousel").owlCarousel({
        items : 4,
        itemsCustom : false,
        itemsDesktop : [1199,4],
        itemsDesktopSmall : [980,2],
        itemsTablet: [768,1],
        itemsTabletSmall: false,
        itemsMobile : [479,1],
        singleItem : false,
        itemsScaleUp : false,
        mouseDrag   :   true,

        //Basic Speeds
        slideSpeed : 200,
        paginationSpeed : 800,
        rewindSpeed : 1000,

        //Autoplay
        autoPlay : true,
        stopOnHover : false,

         //Auto height
        autoHeight : true,
    });
}
javascriptjquerycsshtml5owl-carousel
9
Dishan TD

次のようにmarginを使用するだけです。

function newsCarousel(){
    $("#carousel").owlCarousel({
        items : 4,
        margin: 20,
        autoHeight : true,
    });
}
9
Den Pat

私は解決策を見つけました。しかし、私はソースコードを変更しなければなりませんでした。 _$.fn.owlCarousel.options{}_に新しいオプション「パディング」を追加しました。次に、calculateWidth : function () {}の式を変更しました

_calculateWidth : function () {
    var base = this;
    base.itemWidth = Math.round( (base.$elem.width() + base.options.padding) / base.options.items);
    console.log(base.$owlItems.width());
},
_

そして最後に、アイテムにこのパディング（padding-right）を追加しました。

_appendItemsSizes : function () {
        var base = this,
            roundPages = 0,
            lastItem = base.itemsAmount - base.options.items;

        base.$owlItems.each(function (index) {
            var $this = $(this);
            $this
                .css({
                    "width": base.itemWidth,
                    "padding-right": base.options.padding
                })
                .data("owl-item", Number(index));

            if (index % base.options.items === 0 || index === lastItem) {
                if (!(index > lastItem)) {
                    roundPages += 1;
                }
            }
            $this.data("owl-roundPages", roundPages);
        });
    },
_

これで、次のようなオプション「パディング」を使用してカルーセルを初期化できます。

_$(".carousel").owlCarousel({
    items : 3,
    padding : 23
});
_

そして、この結果を取得します： enter image description here

3
Дмитрий Уланов

これに基づいて demo つまり、.itemクラスのマージンを増やすだけです custom.css。

#owl-example .item{
    ...
    margin-left: 20px;
    margin-right: 20px;
}

レスポンシブサイトとプラグインのCSSの変更には注意してください。これをさまざまな解像度に調整する必要がある場合は、 custom.css 一部のメディアクエリとそれに応じたスタイルの拡張

2
svnm

現時点では、フクロウのカルーセルに直接マージンを追加する方法がないことを知っておく必要があります。将来的には、フクロウのカルーセルが追加できる可能性があるため、解決策はCssプロパティを使用してスペースを作成することです。

cssにpaddingを追加し、marginを追加して、特定のスペースを取得するための最良の方法を数学で計算して、必要なスペースを計算し、それをパディングとマージン

これがあなたの問題の解決策を見つけるのに役立つことを願っています

フクロウカルーセルプラグインの公式サイトで公開されているこのTutoで、この手順を実行できます： http://www.istedod.uz/lib/owl-carousel/demos/custom.html

1
Soufiane Douimia

OWLカルーセルバージョン1を使用している可能性があります。バージョン2を使用することをお勧めします。

あなたはそれを得るでしょう ここ 。

ドキュメントメニューに移動すると、すべてが見つかります。

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
})
0
Sourov Roy Chowdhury

次のように、box-shadowを使用して純粋なCSSを使用できます。

.item::after{
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  -webkit-box-shadow: inset -5px 0px 0px 0px rgba(255,255,255,1);
  -moz-box-shadow: inset -5px 0px 0px 0px rgba(255,255,255,1);
  box-shadow: inset -5px 0px 0px 0px rgba(255,255,255,1);
}
0
Liviu Costache
.item{
    margin: 5px;
} 
.owl-item:nth-child(3n+1) > .item {
    margin-left: 0;
}
.owl-item:nth-child(3n+3) > .item {
    margin-right: 0;
}

Config OwlCarousel：

$("#owl-highlight").owlCarousel({
            autoPlay: 3000,
            items : 3,
            scrollPerPage: true,
            itemsDesktop : [1199,3],
            itemsDesktopSmall : [979,3]
        });
0
Thành Nguyễn

マージン/パディング用のクラスを作成し、要件に従って使用します。

.margin_10 { margin:10px }

</style>




<div id="carousel2"
<div class="carousel-inner">

<div class="item margin_10">

<!--your pic + content will go here as per requirement-->


 </div> 

</div>
</div>
0
Firoz Khan