I have a slider owl carousel, I want to make sure that the extreme elements are half visible, i.e. half was visible, and half went beyond the horizon (so that the user understood that there were more elements in the carousel) - how can this be done?

$("#owl-example").owlCarousel({ itemsCustom: [[600,5],[500,4],[400,3],[300,2],[200,1]] }); 
 .block { display: block; width: 100px; height: 100px; font-size: 20px; font-weight: bold; text-align: center; line-height: 100px; color: #888888; } .red { background: #FFCCCC; } .green { background: #CCFFCC; } .blue { background: #CCCCFF; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.min.js"></script> <link rel="stylesheet" href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css"> <link rel="stylesheet" href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.theme.css"> <div id="owl-example" class="owl-carousel"> <div class="block red">1</div> <div class="block green">2</div> <div class="block blue">3</div> <div class="block red">4</div> <div class="block green">5</div> <div class="block blue">6</div> <div class="block red">7</div> <div class="block green">8</div> <div class="block blue">9</div> <div class="block red">10</div> <div class="block green">11</div> <div class="block blue">12</div> </div>

1 answer 1

 .owl-carousel .owl-wrapper-outer:before { width: 40px; background: black; content: ''; height: 100px; position: absolute; left: 0; z-index: 20; } .owl-carousel .owl-wrapper-outer:after { width: 40px; background: black; content: ''; height: 100px; position: absolute; right: 0; top: 0; z-index: 20; }

You can try to do so. Black color is of course replaced either with another color or with arrows, for example, additionally indicating that there are still elements.

  • I'm afraid that in this situation it will look like a shame .. jsfiddle.net/u918v9o9/8 - Vasya
  • Well, this is already a question of your styling of these parts) you can replace them with transparent pictures of arrows and use js so that they appear only when you point the mouse at the carousel. Decide for yourself how you should do it better) - Moonvvell
  • Well, yes - you hope that you see that with this approach, indentation is in trouble - I’m interested in how to make exactly half of the slide on each side look. however, the necessary answer has already been given above - Vasya