Trouble with Owl Carousel 2.2.1 with Bootstrap 4 Beta

Question

I am trying to get a simple carousel designed using owl carousel and Bootstrap 4. I have all of the proper CSS and JS linked on my HTML and follow instructions on their site for HTML and JS, but the carousel does not work. My items just stack on top of each other with no styling nor Javascript. Please see code:

<!-- BOOTSTRAP 4 STYLESHEETS & CUSTOM - before all other stylesheets -->
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<!-- FontAwesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" crossorigin="anonymous" />
<!-- Owl carousel -->
<link rel="stylesheet" href="../node_modules/owl.carousel/dist/assets/owl.carousel.min.css" />
<link rel="stylesheet" href="../node_modules/owl.carousel/dist/assets/owl.theme.default.min.css" />

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

<div class="owl-carousel owl-theme">
    <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>

<script>
    $('.owl-carousel').owlCarousel({
        rtl:true,
        loop:true,
        margin:10,
        nav:true,
        responsive:{
            0:{
                items:1
            },
            600:{
                items:3
            },
            1000:{
                items:5
            }
        }
    });
</script>

score 3 · Answer 1 · answered Nov 29 '17 at 15:34

Try the answer from this stack overflow:

Owl Carousel 2 items stack on top of each other.

Use overflow-x: hidden on your slider so you hide the text that isn't in your slider.

Use display: flex on .owl-stage to display the items next to each other.

hojjat.mi · Answer 2 · 2018-11-10T10:20:28.703

In your sample code dont use javascripts for wol Full sample code is:

<html>
<head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.2/assets/owl.carousel.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.2/assets/owl.theme.default.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.2/assets/owl.theme.green.min.css" />

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.2/owl.carousel.min.js"></script>


<style>
    .owl-carousel .item {
        text-align: center;
        /*background-color: #F44336;*/
        height: 300px;
        vertical-align: middle;
    }

        .owl-carousel .item h4 {
            background-color: #808080;
            padding: 5px;
        }
</style>

as you can see , bootstrap and OWL are used. and body is:

<body>
<div class="container-fluid">
    <section id="demos">
        <div class="row">
            <div class="col-lg-12">
                <div class="owl-carousel owl-theme" style="display:block !important;overflow-x: hidden">
                    <div class="item">
                        <h4>
                            <img    src="https://www.w3schools.com/bootstrap/ny.jpg" alt="New york">
                        </h4>
                    </div>
                    <div class="item">
                        <h4>
                            <img    src="https://www.w3schools.com/bootstrap/chicago.jpg" alt="Chicago">
                        </h4>
                    </div>
                    <div class="item">
                        <h4>
                            <img    src="https://www.w3schools.com/bootstrap/la.jpg" alt="Los Angeles">
                        </h4>
                    </div>

                </div>
                <script type="text/javascript">
                    $('.owl-carousel').owlCarousel({
                        loop: true,
                        margin: 0,
                        nav: true,
                        center: true,
                        autoplay: true,
                        autoplayTimeout: 3000,
                        autoplayHoverPause: true,
                        responsive: {
                            0: {
                                items: 1
                            },
                            600: {
                                items: 1
                            },
                            1000: {
                                items: 1
                            }
                        }
                    })         </script>
            </div>
        </div>
    </section>
</div>

by using this sample can resolve your problem.and by change value of item is responsive can modify number of slide show in page. go to owl-carousel more detail in persian language

score -2 · Answer 3 · answered Mar 27 '18 at 07:18

-2

//css file
<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">

//js file
<script src="jquery.min.js"></script>
<script src="owlcarousel/owl.carousel.min.js"></script>

    <div class="owl-carousel">
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
</div>

have a good time :)

download file

answered Mar 27 '18 at 07:18

Rahman Sadeghi

1
1

1

Maybe try to add some explanations on how this is an answer and what OP did wrong. Also you could move that code to a JS Snippet, so we won't have to click a link who said "Download file" :) – Antoine Thiry Mar 27 '18 at 07:28
you sample not used bootstrap . while trouble with owl carousel2-2-1 with bootstrap-4-beta is asked. – hojjat.mi Nov 10 '18 at 09:14

Trouble with Owl Carousel 2.2.1 with Bootstrap 4 Beta

3 Answers3