examples codepen bootstrap jquery css carousel owl-carousel owl-carousel-2

jquery - codepen - Mostrar parte de los elementos siguientes y anteriores con Owl Carousel 2.0



owl carousel wordpress (2)

Estoy usando Owl Carousel 2.0 . Me gustaría mostrar un elemento, la mitad (o menos) del elemento anterior (lado izquierdo) y la mitad (o menos) del siguiente elemento (lado derecho). Solo colocando una parte de ellos en el lado derecho y en el lado izquierdo:

He estado intentando usar solo CSS ( padding y margin negativo con el owl-stage-outer ) pero obviamente Javascript los anula.

Aquí está mi código hasta ahora:

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

.owl-carousel .item h4 { color: #FFF; font-weight: 400; margin-top: 0em; } .owl-carousel .item { height: 10em; background: #4DC7A0; padding: 1em; } .wrapper { width: 40em; }

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="//cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet" /> <script src="//cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script> <div class="wrapper"> <div class="owl-carousel"> <div class="item"> <h4>1</h4> </div> <div class="item"> <h4>2</h4> </div> <div class="item"> <h4>3</h4> </div> <div class="item"> <h4>4</h4> </div> <div class="item"> <h4>5</h4> </div> <div class="item"> <h4>6</h4> </div> <div class="item"> <h4>7</h4> </div> <div class="item"> <h4>8</h4> </div> <div class="item"> <h4>9</h4> </div> <div class="item"> <h4>10</h4> </div> <div class="item"> <h4>11</h4> </div> <div class="item"> <h4>12</h4> </div> </div>


La forma más fácil de hacerlo es usar stagePadding . Demostración a continuación:

$(function() { $(''.owl-carousel'').owlCarousel({ margin: 10, loop: true, items: 1, stagePadding: 100 }); });

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="//cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet" /> <script src="//cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script> <div class="owl-carousel"> <div class="item"><img src="//placehold.it/350x150&text=1" /></div> <div class="item"><img src="//placehold.it/350x150&text=2" /></div> <div class="item"><img src="//placehold.it/350x150&text=3" /></div> <div class="item"><img src="//placehold.it/350x150&text=4" /></div> <div class="item"><img src="//placehold.it/350x150&text=5" /></div> <div class="item"><img src="//placehold.it/350x150&text=6" /></div> <div class="item"><img src="//placehold.it/350x150&text=7" /></div> <div class="item"><img src="//placehold.it/350x150&text=8" /></div> </div>


Usé la mitad de los valores en el código personalizado como el anterior. Espero eso ayude.

$("#owlCarousel").owlCarousel({ itemsCustom: [ [0, 1], /* Show half of next item */ [450, 1.5], [600, 2.5], [700, 3], [800, 3], [1000, 4], [1200, 4], [1400, 4], [1600, 4] ], lazyLoad: true, navigation: false, });