There is an owl carousel in which the stagePadding property is stagePadding to make the pieces of elements visible. How to make it so that in addition to the switches next | prev, the carousel also switches when you click on the protrusions of the elements on the right and left, respectively? go through the feedl - you will understand enter image description here

 $('.owl-carousel').owlCarousel({ stagePadding: 100, loop: true, margin: 10, nav: true, autoplay: true, autoplayTimeout: 2000, autoplayHoverPause: true, responsive: { 0: { items: 1 }, 470: { items: 3 }, 768: { items: 4 }, 1199: { items: 5 } } }); $('.owl-carousel').find('.owl-item.active').prev(':not(.active)').css('background-color', 'red'); $('.owl-carousel').find('.owl-item.active').next(':not(.active)').css('background-color', 'red'); 
 .owl-carousel .item { height: 10rem; background: #4DC7A0; padding: 1rem; } 
 <link href="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.theme.default.min.css" rel="stylesheet" /> <link href="https://owlcarousel2.imtqy.com/OwlCarousel2/assets/css/docs.theme.min.css" rel="stylesheet" /> <link href="https://owlcarousel2.imtqy.com/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://owlcarousel2.imtqy.com/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script> <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>

  • What projections? - Alexey Shimansky
  • @ Alexey Shimansky click on the link fidla - on the left and on the right only part of the element is visible - Vasya
  • there are no projections in fidle - Jean-Claude
  • @ Jean-Claude specially for you added a picture to the description - Vasya

2 answers 2

Well, the solution is of course clumsy, in the documentation, especially on this occasion, there is nothing but for .owl-prev, .owl-next {made positioning and transparency}

 .owl-carousel .item { height: 10rem; background: #4DC7A0; padding: 1rem; position:relative; } .owl-carousel .owl-prev{ position:absolute; top:0; left:0; display:block; height:99%; width:90px; background:red; } .owl-carousel .owl-next{ position:absolute; top:0; right:0; display:block; height:99%; width:90px; background:red; } .owl-prev,.owl-next{ opacity:0; }

Here is Demo: https://jsfiddle.net/Geyan/rtvc5exr/9/

  • uh, not really .. I need, as it is written in the question, the additional switches, so that there are both arrows to switch on and protrusions. if it were necessary to simply switch projections - the question would not be - Vasya
  • one
    jsfiddle.net/rtvc5exr/11 last option, point to the left and then to the right, works in general - user33274
  • Yes, only I got to the decision a little earlier from the bottom - Vasya

According to the documentation you need to add buttons on this principle:

 // Go to the next item $('.customNextBtn').click(function() { owl.trigger('next.owl.carousel'); }) // Go to the previous item $('.customPrevBtn').click(function() { // With optional speed parameter // Parameters has to be in square bracket '[]' owl.trigger('prev.owl.carousel', [300]); })

The final solution is here.

  • and where are the additional switches? I added in the example - you do not have them - user33274
  • @Geyan I did not say anything about their visibility - they work, as if the switch is triggered by an element, not a switch - Vasya