CODEWITHSUNDEEP
twitter-bootstrapcarouselowl-carousel
Elysian Web Design
Elysian Web Design

Reputation: 43

Trouble with Owl Carousel 2.2.1 with Bootstrap 4 Beta

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>

Upvotes: 3

Views: 9613

Answers (3)

hojjat.mi
hojjat.mi

Reputation: 1534

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

Upvotes: 0

Rahman Sadeghi
Rahman Sadeghi

Reputation: 1

//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

Upvotes: -2

Kevin
Kevin

Reputation: 65

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.

Upvotes: 3

Related Questions