Cool card carousel Bootstrap 5 example

1<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css'>
2<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css'>
3<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
4
5<div class="container-fluid">
6  <div class="row">
7    <div class="col-md-12">
8      <div id="news-slider" class="owl-carousel">
9        <div class="post-slide">
10          <div class="post-img">
11            <img src="https://images.unsplash.com/photo-1596265371388-43edbaadab94?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=301&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=501" alt="">
12            <a href="#" class="over-layer"><i class="fa fa-link"></i></a>
13          </div>
14          <div class="post-content">
15            <h3 class="post-title">
16              <a href="#">Lorem ipsum dolor sit amet.</a>
17            </h3>
18            <p class="post-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam consectetur cumque dolorum, ex incidunt ipsa laudantium necessitatibus neque quae tempora......</p>
19            <span class="post-date"><i class="fa fa-clock-o"></i>Out 27, 2019</span>
20            <a href="#" class="read-more">read more</a>
21          </div>
22        </div>
23        
24        <div class="post-slide">
25          <div class="post-img">
26            <img src="https://images.unsplash.com/photo-1533227268428-f9ed0900fb3b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=303&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=503" alt="">
27            <a href="#" class="over-layer"><i class="fa fa-link"></i></a>
28          </div>
29          <div class="post-content">
30            <h3 class="post-title">
31              <a href="#">Lorem ipsum dolor sit amet.</a>
32            </h3>
33            <p class="post-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam consectetur cumque dolorum, ex incidunt ipsa laudantium necessitatibus neque quae tempora......</p>
34            <span class="post-date"><i class="fa fa-clock-o"></i>Out 27, 2019</span>
35            <a href="#" class="read-more">read more</a>
36          </div>
37        </div>
38        
39        <div class="post-slide">
40          <div class="post-img">
41            <img src="https://images.unsplash.com/photo-1564979268369-42032c5ca998?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=300&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=500" alt="">
42            <a href="#" class="over-layer"><i class="fa fa-link"></i></a>
43          </div>
44          <div class="post-content">
45            <h3 class="post-title">
46              <a href="#">Lorem ipsum dolor sit amet.</a>
47            </h3>
48            <p class="post-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam consectetur cumque dolorum, ex incidunt ipsa laudantium necessitatibus neque quae tempora......</p>
49            <span class="post-date"><i class="fa fa-clock-o"></i>Out 27, 2019</span>
50            <a href="#" class="read-more">read more</a>
51          </div>
52        </div>
53        
54        <div class="post-slide">
55          <div class="post-img">
56            <img src="https://images.unsplash.com/photo-1576659531892-0f4991fca82b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=301&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=501" alt="">
57            <a href="#" class="over-layer"><i class="fa fa-link"></i></a>
58          </div>
59          <div class="post-content">
60            <h3 class="post-title">
61              <a href="#">Lorem ipsum dolor sit amet.</a>
62            </h3>
63            <p class="post-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam consectetur cumque dolorum, ex incidunt ipsa laudantium necessitatibus neque quae tempora......</p>
64            <span class="post-date"><i class="fa fa-clock-o"></i>Out 27, 2019</span>
65            <a href="#" class="read-more">read more</a>
66          </div>
67        </div>
68        
69        <div class="post-slide">
70          <div class="post-img">
71            <img src="https://images.unsplash.com/photo-1586083702768-190ae093d34d?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=305&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=505" alt="">
72            <a href="#" class="over-layer"><i class="fa fa-link"></i></a>
73          </div>
74          <div class="post-content">
75            <h3 class="post-title">
76              <a href="#">Lorem ipsum dolor sit amet.</a>
77            </h3>
78            <p class="post-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam consectetur cumque dolorum, ex incidunt ipsa laudantium necessitatibus neque quae tempora......</p>
79            <span class="post-date"><i class="fa fa-clock-o"></i>Out 27, 2019</span>
80            <a href="#" class="read-more">read more</a>
81          </div>
82        </div>
83
84        <div class="post-slide">
85          <div class="post-img">
86            <img src="https://images.unsplash.com/photo-1484656551321-a1161420a2a0?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=306&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=506" alt="">
87            <a href="#" class="over-layer"><i class="fa fa-link"></i></a>
88          </div>
89          <div class="post-content">
90            <h3 class="post-title">
91              <a href="#">Lorem ipsum dolor sit amet.</a>
92            </h3>
93            <p class="post-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam consectetur cumque dolorum, ex incidunt ipsa laudantium necessitatibus neque quae tempora......</p>
94            <span class="post-date"><i class="fa fa-clock-o"></i>Out 27, 2019</span>
95            <a href="#" class="read-more">read more</a>
96          </div>
97        </div>
98      </div>
99    </div>
100  </div>
101</div>
102<script src='https://code.jquery.com/jquery-1.12.0.min.js'></script>
103<script src='https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js'></script>