I want to recreate the carousel just above the "browse all courses" button on this website https://www.bringyourownlaptop.com/
I wanted to make this post as straight to the point as possible, but it seems like stackoverflow is forcing me to type more stuff so I'll give you guys more details. If you want to save time, just skip reading the entire next section.
DETAILS:
- Expected result:
Multiple cards on a row with "<" and ">" controls on the side that allow the user to navigate through the cards. After intensively researching on google and youtube, I found the "owlcarousel" plugin or whatever that seemed to work for me. So I tried to recreate this carousel: https://owlcarousel2.github.io/OwlCarousel2/demos/basic.html and I'd reposition the controls as I want afterwards.
- Actual result:
There's no carousel whatsoever, if I add more cards or change the display size they all shrink in order to fit within their container (I've tried using "flex-wrap" but it doesn't change anything).
- What I've tried:
Adding autoplay, autoplayTimeout, etc... from different similar questions here on stackoverflow and other websites...
I believe the problem is how/where I imported the css, js, etc. but I've tried putting it on the head, footer, everything really and it doesn't work.
Here's my entire code:
* {
padding: 0;
margin: 0;
}
.wrapper-grid {
display: grid;
height: 100%;
place-items: center;
text-align: center;
background: #272727;
}
.slider {
/* max-width: 1000px; */
/* overflow: hidden; */
}
.card {
border-color: #272727;
flex: 1;
}
.card-img-top {
height: 200px;
width: 100%;
background: #471A69;
}
.card-img-top img {
height: 100%;
width: 100%;
object-fit: cover;
}
.card-body {
background: #7A2DB5;
}
.card-body p {
text-align: justify;
}<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" href="carousel.css">
<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">
<title>Hello, world!</title>
</head>
<body>
<div class="wrapper-grid">
<div class="slider d-flex owl-carousel">
<div class="card mx-2">
<img src="./Exports_iOS/Icon awesome-adobe.svg" class="card-img-top py-3 px-3" alt="Adobe">
<div class="card-body">
<h5 class="card-title">Suite Adobe</h5>
<p class="card-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Aliquid, iusto. Quas
corporis animi voluptas facilis minus? Laudantium veritatis debitis tenetur.
</p>
</div>
</div>
<div class="card mx-2">
<img src="./Exports_iOS/Icon awesome-bootstrap.svg" class="card-img-top py-3 px-3" alt="Bootsrap">
<div class="card-body">
<h5 class="card-title">Bootstrap</h5>
<p class="card-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Aliquid, iusto. Quas
corporis animi voluptas facilis minus? Laudantium veritatis debitis tenetur.
</p>
</div>
</div>
<div class="card mx-2">
<img src="./Exports_iOS/Icon awesome-php.svg" class="card-img-top py-3 px-3" alt="PHP">
<div class="card-body">
<h5 class="card-title">PHP</h5>
<p class="card-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Aliquid, iusto. Quas
corporis animi voluptas facilis minus? Laudantium veritatis debitis tenetur.
</p>
</div>
</div>
<div class="card mx-2">
<img src="./Exports_iOS/Icon awesome-python.svg" class="card-img-top py-3 px-3" alt="Python">
<div class="card-body">
<h5 class="card-title">Python</h5>
<p class="card-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Aliquid, iusto. Quas
corporis animi voluptas facilis minus? Laudantium veritatis debitis tenetur.
</p>
</div>
</div>
<div class="card mx-2">
<img src="./Exports_iOS/Icon awesome-wordpress.svg" class="card-img-top py-3 px-3" alt="Wordpress">
<div class="card-body">
<h5 class="card-title">Wordpress</h5>
<p class="card-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Aliquid, iusto. Quas
corporis animi voluptas facilis minus? Laudantium veritatis debitis tenetur.
</p>
</div>
</div>
<div class="card mx-2">
<img src="./Exports_iOS/Icon ionic-logo-javascript.svg" class="card-img-top py-3 px-3" alt="Javascript">
<div class="card-body">
<h5 class="card-title">Javascript</h5>
<p class="card-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Aliquid, iusto. Quas
corporis animi voluptas facilis minus? Laudantium veritatis debitis tenetur.
</p>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous">
</script>
<script src="jquery.min.js"></script>
<script src="owlcarousel/owl.carousel.min.js"></script>
<script>
var owl = $('.owl-carousel');
$(document).ready(function () {
owl.owlCarousel({
items: 3,
loop: true,
margin: 10,
autoplay: true,
autoplayTimeout: 1000,
autoplayHoverPause: true
});
$('.play').on('click', function () {
owl.trigger('play.owl.autoplay', [1000])
})
$('.stop').on('click', function () {
owl.trigger('stop.owl.autoplay')
})
});
</script>
</body>
</html>
jQuerylibrary to your page, loaded before the owl script. – prettyInPink