I am using OwlCarousel2 slider on a Wordpress site, but it is not displaying correctly in one gallery. Today I've moved OwlCarousel 2 slider with one displayed image from half-a-page block to the full page block. Right now it displays one slide, taking up a third of the container block. I need it to display 3 slides per container. And as it is now, when I click prev1/next1, one slide should be removed and a new one should appear Here is the block itself as it is specified in the code file: <div class="slider__container hentry"> <div class="slider__btn-container"> <h3>Heading</h3> <div class="slider__arrows"> <a href="" class="prev prev1"></a> <a href="" class="next next1"></a> </div> </div> <div class="owl-carousel owl-theme carousel1 brands"> <?php $args = array( 'post_type' => 'brands' ); $my_posts = get_posts($args); foreach ($my_posts as $post) : setup_postdata($post); ?> <div class="item"> <div class="item__img"> <?php the_post_thumbnail(); ?> </div> <p> <?php the_title(); ?> </p> </div> <?php endforeach; ?> </div> </div> Here's the same block, but through developer tools: <div class="slider__container hentry"> <div class="slider__btn-container"> <h3>Brands</h3> <div class="slider__arrows"> <a href="" class="prev prev1"></a> <a href="" class="next next1"></a> </div> </div> <div class="owl-carousel owl-theme carousel1 partners owl-loaded"> <div class="owl-stage-outer"> <div class="owl-stage" style="transform: translate3d(-3450px, 0px, 0px); transition: all; width: 12650px;"> <div class="owl-item" style="width: 1140px; margin-right: 10px;"> <div class="item"> <div class="item__img"> <img width="320" height="200" src="third.png" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="Сеть Агромаркетов" decoding="async" loading="lazy" srcset="third.png 320w, third.png 300w" sizes="(max-width: 320px) 100vw, 320px"> </div> <p> Third brand </p> </div> </div> <div class="owl-item" style="width: 1140px; margin-right: 10px;"> <div class="item"> <div class="item__img"> <img width="320" height="200" src="fourth.png" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="fourth" decoding="async" loading="lazy" srcset="fourth.png 320w, fourth-300x188.png 300w" sizes="(max-width: 320px) 100vw, 320px"> </div> <p> Fourth brand </p> </div> </div> <div class="owl-item" style="width: 1140px; margin-right: 10px;"> <div class="item"> <div class="item__img"> <img width="320" height="200" src="fifth.png" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="fifth" decoding="async" loading="lazy" srcset="fifth.png 320w, fifth-300x188.png 300w" sizes="(max-width: 320px) 100vw, 320px"> </div> <p> Fifth brand </p> </div> </div> <div class="owl-item active" style="width: 1140px; margin-right: 10px;"> <div class="item"> <div class="item__img"> <img width="512" height="135" src="first.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" decoding="async" loading="lazy" srcset="first.jpg 512w, first-230x61.jpg 230w" sizes="(max-width: 512px) 100vw, 512px"> </div> <p> First brand </p> </div> </div> <div class="owl-item" style="width: 1140px; margin-right: 10px;"> <div class="item"> <div class="item__img"> <img width="252" height="94" src="second.png" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" decoding="async" loading="lazy" srcset="second.png 252w, second-230x86.png 230w" sizes="(max-width: 252px) 100vw, 252px"> </div> <p> Second brand </p> </div> </div> <div class="owl-item" style="width: 1140px; margin-right: 10px;"> <div class="item"> <div class="item__img"> <img width="320" height="200" src="third.png" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="Сеть Агромаркетов" decoding="async" loading="lazy" srcset="third.png 320w, third.png 300w" sizes="(max-width: 320px) 100vw, 320px"> </div> <p> Third brand </p> </div> </div> <div class="owl-item" style="width: 1140px; margin-right: 10px;"> <div class="item"> <div class="item__img"> <img width="320" height="200" src="fourth.png" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="fourth" decoding="async" loading="lazy" srcset="fourth.png 320w, fourth-300x188.png 300w" sizes="(max-width: 320px) 100vw, 320px"> </div> <p> Fourth brand </p> </div> </div> <div class="owl-item" style="width: 1140px; margin-right: 10px;"> <div class="item"> <div class="item__img"> <img width="320" height="200" src="fifth.png" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="fifth" decoding="async" loading="lazy" srcset="fifth.png 320w, fifth-300x188.png 300w" sizes="(max-width: 320px) 100vw, 320px"> </div> <p> Fifth brand </p> </div> </div> <div class="owl-item cloned" style="width: 1140px; margin-right: 10px;"> <div class="item"> <div class="item__img"> <img width="512" height="135" src="first.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="first" decoding="async" loading="lazy" srcset="first.jpg 512w, first-230x61.jpg 230w" sizes="(max-width: 512px) 100vw, 512px"> </div> <p> First brand </p> </div> </div> <div class="owl-item cloned" style="width: 1140px; margin-right: 10px;"> <div class="item"> <div class="item__img"> <img width="252" height="94" src="second.png" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="second" decoding="async" loading="lazy" srcset="second.png 252w, second-230x86.png 230w" sizes="(max-width: 252px) 100vw, 252px"> </div> <p> Second brand </p> </div> </div> <div class="owl-item cloned" style="width: 1140px; margin-right: 10px;"> <div class="item"> <div class="item__img"> <img width="320" height="200" src="third.png" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="third" decoding="async" loading="lazy" srcset="third.png 320w, third-300x188.png 300w" sizes="(max-width: 320px) 100vw, 320px"> </div> <p> Third brand </p> </div> </div> </div> </div> <div class="owl-nav disabled"> <button type="button" role="presentation" class="owl-prev"> <span aria-label="Previous">‹</span> </button> <button type="button" role="presentation" class="owl-next"> <span aria-label="Next">›</span> </button> </div> <div class="owl-dots disabled"></div> </div> </div> Here is part of a main script file: jQuery(document).ready(function () { if (jQuery.each(jQuery(".main-carousel .item"), function () { var fmt = jQuery(this).find("img").attr("src"); jQuery(this).css("background", "url(" + fmt + ")"); }), jQuery("body").find(".main-carousel")) { var nextModel = jQuery(".main-carousel").owlCarousel({ loop: true, margin: 10, nav: false, mouseDrag: false, touchDrag: false, dotsContainer: "#carousel-custom-dots", responsive: { 0: { items: 1 }, 600: { items: 1 }, 1E3: { items: 1 } } }); jQuery(".owl-dot").click(function () { nextModel.trigger("to.owl.carousel", [jQuery(this).index(), 300]); }); /** @type {number} */ var pauseText = 1; jQuery("#carousel-custom-dots .owl-dot").each(function () { jQuery(this).text(pauseText); pauseText++; }); jQuery(".slider__navigation .next").click(function (types) { types.preventDefault(); nextModel.trigger("next.owl.carousel"); }); } if (jQuery("body").find(".carousel1")) { var elements = jQuery(".carousel1").owlCarousel({ loop: true, margin: 10, nav: false, dots: false, mouseDrag: false, touchDrag: false, items: 3 } ); jQuery(".prev1").click(function (types) { types.preventDefault(); elements.trigger("prev.owl.carousel"); }); jQuery(".next1").click(function (types) { types.preventDefault(); elements.trigger("next.owl.carousel"); }); } jQuery('.owl-carousel').owlCarousel({ items: 1, video: true, lazyLoad: true }) }); Style file: .owl-theme .owl-dots, .owl-theme .owl-nav { text-align: center; -webkit-tap-highlight-color: transparent } .owl-carousel .owl-video-tn { min-height: 350px; } .owl-theme .owl-nav { margin-top: 10px } .owl-theme .owl-nav [class*=owl-] { color: #FFF; font-size: 14px; margin: 5px; padding: 4px 7px; background: #D6D6D6; display: inline-block; cursor: pointer; border-radius: 3px } .owl-theme .owl-nav [class*=owl-]:hover { background: #869791; color: #FFF; text-decoration: none } .owl-theme .owl-nav .disabled { opacity: .5; cursor: default } .owl-theme .owl-nav.disabled+.owl-dots { margin-top: 10px } .owl-theme .owl-dots .owl-dot { display: inline-block; zoom: 1 } .owl-theme .owl-dots .owl-dot span { width: 10px; height: 10px; margin: 5px 7px; background: #D6D6D6; display: block; transition: opacity .2s ease; border-radius: 30px } .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span { background: #869791 } .item__description { position: absolute; height: 100%; background: rgba(0, 0, 0, .5); z-index: 999999 } .item__description .container { max-width: 742px } .item__content p { color: #fc3; font-size: 16px } .item__content .more-link { color: #fff; margin-top: 20px; display: block } .slider__container { position: relative } .item__content .more-link:hover { text-decoration: none } .item__block { width: 360px; float: right; padding-right: 30px; padding-top: 45px } .item__img { height: 200px; overflow: hidden; display: flex; align-items: center; } .slider__btn-container { overflow: hidden } .slider__btn-container a { display: inline-block; width: 29px; height: 9px; outline: none!important; } .slider__btn-container h3 { float: left; margin-right: 20px } .slider__btn-container .prev { background: url(../images/arrows2.png) 0 0 no-repeat; margin-right: 5px } .slider__btn-container .next { background: url(../images/arrows2.png) -41px 0 no-repeat } .slider__arrows { float: right } .item__title { font-size: 16px; display: inline-block; margin-top: 15px; color: #2266bb; } .item__title:visited { color: #2266bb; } .item__title:hover { color: #fc3; text-decoration: underline; } @media all and (max-width:1700px) { .item__description .container { max-width: 641px } } @media all and (max-width:1400px) { .item__description .container { max-width: 491px } } @media all and (max-width:1280px) { .item__description .container { max-width: 432px } } @media all and (max-width:1200px) { .item__description .container { max-width: 391px } } @media all and (max-width:1024px) { .owl-carousel .owl-item img { display: inline; } .item__img { text-align: center } } .carousel1 img { height: auto!important; display: block; margin-left: auto; margin-right: auto; width: 33%!important; } .brands p { text-align: center; } .owl-carousel .owl-item img { height: 500px; width: auto; max-width: none; } Please, tell me what steps I can do in order to solve this issue.