I am using owl carousel 2, but there seems to be an issue when I add the bootstrap link to my site. I feel that is the issue, not sure though.
Any help/suggestions?
This is what happens when I add this to my website: I just see the carousel next and previous pointers.
This is what my website looks like with it. Check the third section.
working site with carousel example
HTML
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<link rel="stylesheet" href="OwlCarousel2-2.3.4distassetsowl.carousel.css">
<link rel="stylesheet" href="OwlCarousel2-2.3.4distassetsowl.carousel.min.css">
<link rel="stylesheet" href="OwlCarousel2-2.3.4distassetsowl.theme.default.min.css">
<link rel="stylesheet" href="/css/waste.css">
</head>
<body>
<section class="carousel-section">
<div class="carousel-container">
<h2>Stage Padding OwlCarousel2</h2>
<div class="owl-carousel owl-theme">
<div class="carousel-item">
<div class="carousel-item__card">1</div>
</div>
<div class="carousel-item">
<div class="carousel-item__card">2</div>
</div>
<div class="carousel-item">
<div class="carousel-item__card">3</div>
</div>
<div class="carousel-item">
<div class="carousel-item__card">4</div>
</div>
<div class="carousel-item">
<div class="carousel-item__card">5</div>
</div>
<div class="carousel-item">
<div class="carousel-item__card">6</div>
</div>
<div class="carousel-item">
<div class="carousel-item__card">7</div>
</div>
</div>
</div>
</section>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> -->
<script src="jquery.min.js"></script>
<script src="OwlCarousel2-2.3.4distowl.carousel.min.js"></script>
<script src="OwlCarousel2-2.3.4distowl.carousel.js"></script>
</body>
</html>
JAVASCRIPT
jQuery(document).ready(function($){
let slider = $('.owl-carousel');
slider.each(function () {
$(this).owlCarousel({
nav: true,
loop:false,
autoplaySpeed:1000,
autoplay:true,
dots: false,
pagination: false,
margin: 25,
autoHeight: false,
stagePadding: 50,
responsive:{
0:{
items: 1,
stagePadding: 0,
margin: 30,
},
767:{
items: 3,
stagePadding: 25,
},
1000:{
items: 3,
}
}
});
});
});
CSS
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap");
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: "Poppins", sans-serif;
}
.carousel-section {
padding-top: 80px;
padding-bottom: 80px;
overflow: hidden;
}
.carousel-section .owl-carousel .owl-stage {
padding-left: 0 !important;
}
.carousel-section .owl-carousel .owl-stage-outer {
overflow: unset;
}
.carousel-section .owl-carousel .owl-nav .owl-next,
.carousel-section .owl-carousel .owl-nav .owl-prev {
width: 50px;
border: 1px solid #c3c3c3;
border-radius: 50%;
height: 50px;
font-size: 30px;
background-color:black;
}
.carousel-section .owl-carousel .owl-nav .owl-next:focus,
.carousel-section .owl-carousel .owl-nav .owl-prev:focus {
outline: 0;
}
.carousel-section h2 {
font-size: 34px;
text-align: left;
font-weight: 700;
}
.carousel-container {
max-width: 1140px;
padding-left: 15px;
padding-right: 15px;
margin: 0 auto;
width: 100%;
}
.carousel-item {
margin: 20px 0;
}
.carousel-item__card {
box-shadow: 0 13px 31px #dce1ed;
height: 300px;
border-radius: 12px;
margin: 30px 0 35px;
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
font-weight: 500;
border: 1px solid #dddddd;
}
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
