Slider with OwlCarousel 2 displays one slide instead of three

Question

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:

                    
                        
                            Heading
                            
                                
                                
                            
                        
                        
                             'brands'
                            );
                            $my_posts = get_posts($args);
                            foreach ($my_posts as $post) :
                                setup_postdata($post);
                            ?>

Here's the same block, but through developer tools:

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
  })
});

.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;
}


  
    Brands
    
      
      
    
  
  
    
      
        
          
            
              
            
            
              Third brand 
          
        
        
          
            
              
            
            
              Fourth brand 
          
        
        
          
            
              
            
            
              Fifth brand
            
          
        
        
          
            
              
            
            
              First brand
            
          
        
        
          
            
              
            
            
              Second brand
            
          
        
        
          
            
              
            
            
              Third brand 
          
        
        
          
            
              
            
            
              Fourth brand 
          
        
        
          
            
              
            
            
              Fifth brand
            
          
        
        
          
            
              
            
            
              First brand
            
          
        
        
          
            
              
            
            
              Second brand 
          
        
        
          
            
              
            
            
              Third brand

Please, tell me what steps I can do in order to solve this issue.

Slider with OwlCarousel 2 displays one slide instead of three

Answers (0)

Related Questions