jak dodać spacje między karambolem owl item

Question

Jak dodać spację między przedmiotami owl. dodaj margines lub dopełnienie między elementami. to musi być responsive.can mogę dodać trochę rynny do jquery.

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

Answer 1

podstawie tej demo chciałbym powiedzieć, po prostu zwiększyć margines w klasie .Item w custom.css.

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

Należy zachować ostrożność podczas modyfikowania CSS w przypadku witryn responsywnych i wtyczek. Jeśli to potrzebne, aby być dostosowane do różnych rozdzielczościach, można dodać do custom.css kilka zapytań o media i rozszerzenie style odpowiednio

Answer 2

Wystarczy użyć margin takiego:

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

Answer 3

utworzyć klasę na marginesie/padding i użyj go zgodnie z wymaganiami.

.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> 

Answer 4

.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] 
     }); 

Answer 5

Musisz wiedzieć, że w tym czasie nie ma żadnego sposobu, aby dodać margines bezpośrednio w karuzeli sowa może oni mogą zrobić apdate w przyszłości, więc rozwiązaniem jest utworzenie przestrzeni o właściwościach Css, aby można było dodać w css, a także margin i najlepszy sposób uzyskania określonej powierzchni, którą można wykorzystać do obliczenia potrzebnej powierzchni i zastosowania jej do wyściółki i marginesów.

Mam nadzieję, że pomoże to znaleźć rozwiązanie problemu

można śledzić to kroki w tym túto opublikowanej przez oficjalnej stronie wtyczki sowa karuzeli: http://www.istedod.uz/lib/owl-carousel/demos/custom.html

Answer 6

znalazłem rozwiązanie. Ale musiałem zmienić kod źródłowy. Dodałem nową opcję "dopełnienie" do $.fn.owlCarousel.options{}. Potem zmienił formułę w 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()); 
}, 

i ostatnią rzeczą, dodałem to dopełnienie (padding-prawy) dla elementów:

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

Więc teraz mogę tylko zainicjować karuzelę z opcji "dopełnienie" tak :

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

I uzyskać ten wynik:

Answer 7

Może używasz karuzeli OWL w wersji 1, sugeruję użycie wersji 2.

Otrzymasz ją here.

Przejdź do menu Dokumenty, aby znaleźć wszystko.

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

Answer 8

Można użyć czystego CSS za pomocą box-shadow następująco:

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