web-dev-qa-db-fra.com

comment ajouter des éléments entre les éléments de carrousel de hibou

Comment puis-je ajouter de l'espace entre les éléments de hibou. ajouter une marge ou un remplissage entre les éléments. il faut être réactif. Je peux ajouter un peu de gouttière à la requête.

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

Utilisez simplement margin comme ceci: 

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

J'ai trouvé la solution. Mais je devais changer le code source. J'ai ajouté une nouvelle option "padding" dans $.fn.owlCarousel.options{}. Puis j'ai changé de formule dans 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());
},

Et dernière chose, j'ai ajouté ce rembourrage (padding-right) pour les éléments:

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);
        });
    },

Alors maintenant, je peux juste initialiser le carrousel avec l’option "padding" comme ceci:

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

Et obtenez ce résultat:  enter image description here

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

Sur la base de cette démo je dirais, il suffit d’augmenter la marge dans la classe .item de cSS personnalisé.

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

Soyez prudent avec la modification de CSS pour les sites et les plugins responsive. Si cela devait être ajusté pour différentes résolutions, vous pourriez ajouter à votre cSS personnalisé des requêtes de médias et étendre les styles en conséquence

2
steven iseki

Vous devez savoir qu’à présent, il n’ya aucun moyen d’ajouter une marge directement dans le carrousel des hiboux et qu’ils puissent créer une date ultérieure, la solution consiste donc à créer les espaces avec les propriétés Css.

vous pouvez ajouter la padding dans css et également la margin et le meilleur moyen d'obtenir l'espace spécifique que vous pouvez utiliser en mathématique pour calculer l'espace dont vous avez besoin et l'appliquer au remplissage et à la marge 

J'espère que cela vous aidera à trouver la solution à votre problème

vous pouvez suivre ces étapes dans ce Tuto publié par le site officiel du plugin owl carousel: http://www.istedod.uz/lib/owl-carousel/demos/custom.html

1
Soufiane Douimia

Peut-être utilisez-vous la version 1 de OWL Carousel, je vous suggère d’utiliser la version 2.

Vous l'obtiendrez ici .

Allez dans le menu Docs, vous trouverez tout.

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

Vous pouvez utiliser du CSS pur en utilisant box-shadow comme suit:

.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

créez une classe pour margin/padding et utilisez-la selon vos besoins. 

.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