Search code examples
jqueryowl-carousel

Owl carousel items won't scroll

I'm trying to get owl carousel work in the top of my webpage. It would be like a scrolling top news section. When you click on the navigation a new item would appear.

It looks something like this: enter image description here

This is my code:

$(document).ready(function(){
  $(".owl-carousel").owlCarousel();
});

jQuery(function($) {
      "use strict";

      $(".breaking").owlCarousel({

      loop:true,
      animateIn: 'fadeIn',
      autoplay:true,
      autoplayTimeout:3000,
      autoplayHoverPause:true,
      nav:true,
      margin:30,
      dots:false,
      mouseDrag:false,
      slideSpeed:500,
      navText: ["<i class="fas fa-angle-left"></i>", "<i class="fas fa-angle-right"></i>"],
      items : 1,
      responsive:{
            0:{
                  items:1
            },
            600:{
                  items:1
            }
      }

      });

}
:root {
    --main-accent: #f2552c;
}

.top-bar {
    background-color: #f2f2f2;
    border-bottom: 1px solid #e2e0e0;
    padding-top: 7px;
}

.top-bar .breaking-title {
    width: 200px;
}

.top-bar .breaking-title h6 {
    background: var(--main-accent);
    text-transform: uppercase;
    color: #ffffff;
    padding: 5px 10px;
    font-size: 13px;
    width: 123px;
    margin-right: 15px;
}

.post-content {
    /*z-index: 1;*/
    /*position: relative;*/
}

.top-bar .post-content {
    padding: 0;
}

.breaking .post-title.title-small {
    font-weight: 400;
    margin: 0;
    font-size: 14px;
    line-height: 20px;
}

.breaking .post-title a {
    color: #333333;
}

.breaking .post-title a:hover {
    text-decoration: none;
}


/* Carousel navigation */
.owl-carousel.owl-theme.breaking .owl-nav {
    position: absolute;
    right: 0;
    top: -3px;
    margin: 0;
}

.owl-carousel.owl-theme.breaking .owl-nav > div {
    background: var(--main-accent);
    border: 0;
    color: #fff;
}

.owl-carousel.owl-theme .owl-nav > div {
    margin: 0 3px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    padding: 0;
    border-radius: 0;
    text-align: center;
    font-size: 12px;
    -webkit-transition: 400ms;
    -moz-transition: 400ms;
    -o-transition: 400ms;
    transition: 400ms;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0/css/all.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">

        <div class="top-bar">

            <div class="container">
                <div class="row">
                    <div class="col-md-8 d-flex breaking-news-bar">
                        <div class="breaking-title"><h6>Breaking news</h6></div>
                        
                        <div id="breaking" class="owl-carousel owl-theme owl-loaded breaking">

                            <div class="owl-stage-outer">

                                <div class="owl-stage" style="transform: translate3d(-3420px, 0px, 0px); transition: all 0s ease 0s; width: 7980px;">

                                    <div class="owl-item cloned" style="width: 1110px; margin-right: 30px;">
                                        <div class="item">
                            
                                           <div class="post-content">
                                              <h2 class="post-title title-small">
                                                 <a href="#">Soaring through Southern Patagonia with the</a>
                                              </h2>
                                           </div><!-- Post content end -->
                            
                                        </div>
                                    </div>
                                    
                                    <div class="owl-item cloned" style="width: 1110px; margin-right: 30px;">
                                        <div class="item">
                            
                                           <div class="post-content">
                                              <h2 class="post-title title-small">
                                                 <a href="#">Super Tario Run isn’t groundbreaking, but it</a>
                                              </h2>
                                           </div><!-- Post content end -->
                            
                                        </div>
                                    </div>
                                    
                                    <div class="owl-item" style="width: 1110px; margin-right: 30px;">
                                        <div class="item">
                            
                                           <div class="post-content">
                                              <h2 class="post-title title-small">
                                                 <a href="#">The best MacBook Pro alternatives in 2017</a>
                                              </h2>
                                           </div><!-- Post content end -->
                            
                                        </div>
                                    </div>
                                    
                                    <div class="owl-item animated owl-animated-in fadeIn active" style="width: 1110px; margin-right: 30px;">	
                                        <div class="item">
                            
                                           <div class="post-content">
                                              <h2 class="post-title title-small">
                                                 <a href="#">Soaring through Southern Patagonia with the</a>
                                              </h2>
                                           </div><!-- Post content end -->
                            
                                        </div>
                                    </div>
                                    
                                    <div class="owl-item" style="width: 1110px; margin-right: 30px;">
                                        <div class="item">
                            
                                           <div class="post-content">
                                              <h2 class="post-title title-small">
                                                 <a href="#">Super Tario Run isn’t groundbreaking, but it has</a>
                                              </h2>
                                           </div><!-- Post content end -->
                            
                                        </div>
                                    </div>
                                    
                                    <div class="owl-item cloned" style="width: 1110px; margin-right: 30px;">
                                        <div class="item">
                            
                                           <div class="post-content">
                                              <h2 class="post-title title-small">
                                                 <a href="#">The best MacBook Pro alternatives in 2017</a>
                                              </h2>
                                           </div><!-- Post content end -->
                            
                                        </div>
                                    </div>
                                    
                                    <div class="owl-item cloned" style="width: 1110px; margin-right: 30px;">
                                        <div class="item">
                            
                                           <div class="post-content">
                                              <h2 class="post-title title-small">
                                                 <a href="#">Soaring through Southern Patagonia with the</a>
                                              </h2>
                                           </div><!-- Post content end -->
                            
                                        </div>
                                    </div>


                                </div>

                            </div>

                            <div class="owl-nav">
                                <div class="owl-prev"><i class="fas fa-angle-left"></i></div>
                                <div class="owl-next"><i class="fas fa-angle-right"></i></div>
                            </div>
                            <div class="owl-dots disabled"></div>

                        </div> <!-- End breaking-news  -->
                    </div>

                    <div class="col-md-4">

                    </div>
                </div>
            </div>

        </div> <!-- End top-bar  -->

        <div class="header-content">

                <div class="container">

                </div>

        </div> <!-- End header-content  -->

        <div class="main-navigation">

            <div class="container">
                    
            </div>

        </div> <!-- End main-navigation  -->








    </div> <!-- End wrapper  -->

When I click on the navigation icons, the slide won't change. Any help is appreciated, thanks.

Solution

  • You need to change style code, HTML structure code and follow Owl-Carousel structure so don't copy owl-carousel html structure from inspect-element also some errors in your js code. Now you can see working code in my snippet.
    I hope this will help you lot...

    jQuery(function($) {
  $(".breaking").owlCarousel({
    loop:true,
    autoplay:true,
    autoplayHoverPause: true,
    nav:true,
    margin: 30,
    dots:false,
    mouseDrag: false,
    navText: ['<i class="fas fa-angle-left"></i>', '<i class="fas fa-angle-right"></i>'],
    items : 1,
    responsive:{
      0:{
        items:1
      },
      600:{
        items:1
      }
    }
  });
});
    :root {
  --main-accent: #f2552c;
}
.top-bar {
  background-color: #f2f2f2;
  border-bottom: 1px solid #e2e0e0;
  padding: 7px 0;
}
.top-bar .breaking-title {
  width: 140px;
  display: inline-block;
  background: var(--main-accent);
  text-transform: uppercase;
  color: #ffffff;
  padding: 5px 10px;
  font-size: 13px;
  text-align: center;
  white-space: nowrap;
  margin-right: 15px;
  font-weight: bold;
}
.breaking .post-title.title-small {
  font-weight: 400;
  margin: 0;
  font-size: 14px;
  line-height: 20px;
}
.breaking .post-title a {
  color: #333333;
}
.breaking .post-title a:hover {
  text-decoration: none;
}
/* Carousel navigation */
.breaking .owl-nav {
  position: absolute;
  right: 0;
  top: 0px;
  margin: 0;
}
.breaking .owl-nav .owl-prev,
.breaking .owl-nav .owl-next{
  background: var(--main-accent)!important;
  color: #ffffff!important;
  width: 20px;
  height: 20px;
  margin-left: 6px;
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0/css/all.min.css" rel="stylesheet"/>
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>

<div class="wrapper">
  <div class="top-bar">
    <div class="container">
      <div class="row align-items-center">
        <div class="col-sm-4 text-right">
          <div class="breaking-title">Breaking news</div>
        </div>
        <div class="col-sm-8">
          <div id="breaking" class="owl-carousel breaking">
            <div class="item">
              <div class="post-content">
                <h2 class="post-title title-small">
                  <a href="#">Soaring through Southern Patagonia with the</a>
                </h2>
              </div><!-- Post content end -->
            </div>
            <div class="item">
              <div class="post-content">
                <h2 class="post-title title-small">
                  <a href="#">Super Tario Run isn’t groundbreaking, but it</a>
                </h2>
              </div><!-- Post content end -->
            </div>
            <div class="item">                  
              <div class="post-content">
                <h2 class="post-title title-small">
                  <a href="#">The best MacBook Pro alternatives in 2017</a>
                </h2>
              </div><!-- Post content end -->
            </div>
            <div class="item">                  
              <div class="post-content">
                <h2 class="post-title title-small">
                  <a href="#">Soaring through Southern Patagonia with the</a>
                </h2>
              </div><!-- Post content end -->
            </div>  
            <div class="item">                  
              <div class="post-content">
                <h2 class="post-title title-small">
                  <a href="#">Super Tario Run isn’t groundbreaking, but it has</a>
                </h2>
              </div><!-- Post content end -->
            </div>
            <div class="item">                  
              <div class="post-content">
                <h2 class="post-title title-small">
                  <a href="#">The best MacBook Pro alternatives in 2017</a>
                </h2>
              </div><!-- Post content end -->
            </div>
            <div class="item">
              <div class="post-content">
                <h2 class="post-title title-small">
                  <a href="#">Soaring through Southern Patagonia with the</a>
                </h2>
              </div><!-- Post content end -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div> <!-- End top-bar  -->
</div> <!-- End wrapper  -->