web-dev-qa-db-ja.com

フクロウのカルーセルの間にマージンを追加する方法

追加したいmargin-leftまたはmargin-rightカルーセルアイテム間。ただし、最初のアイテムのマージンは残りません。以下は私のコードです。これに適用するにはどうすればよいですか。

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

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

        //Autoplay
        autoPlay : true,
        stopOnHover : false,

         //Auto height
        autoHeight : true,
    });
jquerycssowl-carousel
4
Dishan TD

こんにちはあなたはこのステップを使うことができます

    $('.owl-carousel').owlCarousel({
    stagePadding: 50,
    loop:true,
    margin:10,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
})

または、このチュートリアルに従うことができます： http://www.owlcarousel.owlgraphic.com/demos/stagepadding.html

9
Soufiane Douimia

CSSソリューション：

Michael Aaron Safyanが言ったことは、実際にはそれを行うための「最良の」方法ではありません。それを行う適切な方法は次のとおりです。

.carousel-item + .carousel-item {
   margin-left: 10px;
}

逆にすると、CSSの「カスケード」部分全体が無視されます。

補足

フクロウのカルーセル1：

フクロウカルーセルに冗長なオプションを設定しないようにしてください。使用可能なオプションを見ると、それらの多くがデフォルトでfalseに設定されているブール値であることがわかります。たとえば、次のオプションはすべてデフォルト設定です。

itemsCustom: false
itemsTabletSmall: false
singleItem: false
itemsScaleUp: false
slideSpeed: 200
paginationSpeed: 800
rewindSpeed: 1000
stopOnHover: false

これらをすべて削除すると、コードは次のような小さなスニペットになります。

$("#carousel").owlCarousel({
    items : 4,
    itemsDesktop : [1199,4],
    itemsDesktopSmall : [980,2],
    itemsTablet: [768,1],
    itemsMobile : [479,1],

    //Autoplay
    autoPlay : true,

     //Auto height
    autoHeight : true
});

フクロウカルーセル2

そして、あなたがフクロウカルーセル2を使用することにした場合、あなたの質問にさらによく答えるために：

フクロウカルーセル2には、オプション（ フクロウカルーセル2：オプション ）を使用してスライダーアイテムに右ピクセルマージンを設定するオプションがあります。これを使用することで、CSSを最小限に抑えることができます。

マージン

タイプ：番号
デフォルト：0

アイテムのmargin-right（px）。

3
Brannie19

JavaScriptでCSSを適用する代わりに、適切なスタイルシートでCSSを適用します。それからそれは簡単になります：

.carousel-item {
  margin-left: 10px;
}
.carousel-item:first-child {
  margin-left: 0;
}
3
Michael Aaron Safyan

このコードは私のために働きます

.owl-carousel .owl-item img{
  padding: 10px;
}
2
flaviobarcaccia

与えられた回答は、.owl-itemの余分なマージンが原因で、フクロウカルーセル（v1.3）がアイテムの位置をずらすといういくつかの問題を引き起こしました。次のスライドに進んだ後、最初のスライドの小さな断片がまだ表示されていました。

より良いアプローチは、次のように、.owl-itemのアイテムinsideにマージンを追加することです。

.owl-item + .owl-item .my-div {
  margin-left: 1em
}

上記の.my-divは、.owl-item内にあるものすべてのセレクターに置き換えてください。

@ Brannie19で述べたように、Owl Carousel 2を使用している場合は、marginオプションを使用できます。

2
stephen.hanson

こんにちは、1つのカルーセルに対してのみパディングを変更することもできます。
CSS：

.padding-item{
    padding-right: 15px;
}

そして、すべてのカルーセルアイテムにこのクラスを追加します。
JQuery：

    $('#owl-carousel-identifier').find('.owl-item').each(function(i){
            this.className+=' padding-item';
        });

このように、カルーセルの境界とのシフトはありません。

0
Tktorza