Zeigen Sie einen Teil der nächsten und vorherigen Artikel mit Owl Carousel 2.0

Question 1

Ich benutze Eulenkarussell 2.0. Ich möchte einen Artikel zeigen, eine Hälfte (oder weniger) des vorherigen Artikels (linke Seite) und eine Hälfte (oder weniger) des nächsten Artikels (rechte Seite). Einfach einen Teil davon auf der rechten und auf der linken Seite herausstellen:

Ich habe versucht, nur CSS zu verwenden (padding und margin negativ mit owl-stage-outer), aber offensichtlich überschreibt Javascript sie.

Hier mein bisheriger Code:

$('.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="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet" />
<script src="https://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>

Question 2

Der einfachste Weg, dies zu tun, ist die Verwendung von stagePadding. Demo unten:

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>

<div class="owl-carousel">
  <div class="item"><img src="https://placehold.it/350x150&text=1" /></div>
  <div class="item"><img src="https://placehold.it/350x150&text=2" /></div>
  <div class="item"><img src="https://placehold.it/350x150&text=3" /></div>
  <div class="item"><img src="https://placehold.it/350x150&text=4" /></div>
  <div class="item"><img src="https://placehold.it/350x150&text=5" /></div>
  <div class="item"><img src="https://placehold.it/350x150&text=6" /></div>
  <div class="item"><img src="https://placehold.it/350x150&text=7" /></div>
  <div class="item"><img src="https://placehold.it/350x150&text=8" /></div>
</div>

Question 3

Auch wenn Sie einen Teil des nächsten Artikels nur von der rechten Seite haben möchten, verwenden Sie wie @witrin erwähnt:

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

und schreiben Sie auch in Ihrem Stil das CSS:

.owl-stage{
    left:-30
}

Haben Sie einen guten Code.

Question 4

Ich habe Halbwerte im benutzerdefinierten Code wie oben verwendet. Ich hoffe es hilft.

$("#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,
});

Question 5

Mein Code funktioniert gut, der einfachste Weg

 <style>
    /***** you should change (75px) for your own *****/
    #pro-slider{width: calc(100% - 75px);}
    #pro-slider .owl-stage-outer{overflow:unset;}
    </style>

    <script>
    jQuery(document).ready(function(){
    $('#pro-slider').owlCarousel({
    //items: depend on u
            items:1,
        });
    }
    </script>