Slider
The basic slider is horizontal and has a single handle that can be moved with the mouse or by using the arrow keys.
Slider
<div class="owl-carousel owl-theme" id="owl-slider-four" >
<div class="item">
<!-- Card -->
<div class="card card-hover mb-3">
<a href="course-single.html" class="card-img-top"><img src="../assets/images/course/course-react.jpg"
alt="" class="rounded-top-md card-img-top"></a>
<!-- Card Body -->
<div class="card-body">
<h4 class="mb-2 text-truncate-line-2 "><a href="course-single.html" class="text-inherit">How
to
easily create a website with React</a></h4>
<!-- List -->
<ul class="mb-3 list-inline">
<li class="list-inline-item"><i class="mdi mdi-clock-time-four-outline text-muted me-1"></i>3h 56m</li>
<li class="list-inline-item">
<svg class="me-1 mt-n1" width="16" height="16" viewBox="0 0 16 16" fill="none"
xmlns="http://www.w3.org/2000/svg">
<rect x="3" y="8" width="2" height="6" rx="1" fill="#754FFE" />
<rect x="7" y="5" width="2" height="9" rx="1" fill="#DBD8E9" />
<rect x="11" y="2" width="2" height="12" rx="1" fill="#DBD8E9" />
</svg>
Beginner
</li>
</ul>
<div class="lh-1">
<span>
<i class="mdi mdi-star text-warning me-n1"></i>
<i class="mdi mdi-star text-warning me-n1"></i>
<i class="mdi mdi-star text-warning me-n1"></i>
<i class="mdi mdi-star text-warning me-n1"></i>
<i class="mdi mdi-star text-warning"></i>
</span>
<span class="text-warning">4.5</span>
<span class="fs-6 text-muted">(7,700)</span>
</div>
</div>
<!-- Card Footer -->
<div class="card-footer">
<div class="row align-items-center g-0">
<div class="col-auto">
<img src="../assets/images/avatar/avatar-1.jpg" class="rounded-circle avatar-xs" alt="">
</div>
<div class="col ms-2">
<span>Morris Mccoy</span>
</div>
<div class="col-auto">
<a href="#" class="text-muted bookmark">
<i class="fe fe-bookmark "></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<!-- Card -->
<div class="card card-hover mb-3">
<a href="course-single.html" class="card-img-top"><img
src="../assets/images/course/course-graphql.jpg" alt="" class="rounded-top-md card-img-top"></a>
<!-- Card Body -->
<div class="card-body">
<h4 class="mb-2 text-truncate-line-2 "><a href="course-single.html"
class="text-inherit">GraphQL:
introduction to graphQL for beginners</a></h4>
<!-- List -->
<ul class="mb-3 list-inline">
<li class="list-inline-item"><i class="mdi mdi-clock-time-four-outline text-muted me-1"></i>2h 46m</li>
<li class="list-inline-item">
<svg class="me-1 mt-n1" width="16" height="16" viewBox="0 0 16 16" fill="none"
xmlns="http://www.w3.org/2000/svg">
<rect x="3" y="8" width="2" height="6" rx="1" fill="#754FFE" />
<rect x="7" y="5" width="2" height="9" rx="1" fill="#754FFE" />
<rect x="11" y="2" width="2" height="12" rx="1" fill="#754FFE" />
</svg>
Advance
</li>
</ul>
<div class="lh-1">
<span>
<i class="mdi mdi-star text-warning me-n1"></i>
<i class="mdi mdi-star text-warning me-n1"></i>
<i class="mdi mdi-star text-warning me-n1"></i>
<i class="mdi mdi-star text-warning me-n1"></i>
<i class="mdi mdi-star text-warning"></i>
</span>
<span class="text-warning">4.5</span>
<span class="fs-6 text-muted">(9,300)</span>
</div>
</div>
<!-- Card Footer -->
<div class="card-footer">
<div class="row align-items-center g-0">
<div class="col-auto">
<img src="../assets/images/avatar/avatar-2.jpg" class="rounded-circle avatar-xs" alt="">
</div>
<div class="col ms-2">
<span>Ted Hawkins</span>
</div>
<div class="col-auto">
<a href="#" class="text-muted bookmark">
<i class="fe fe-bookmark "></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<!-- Card -->
<div class="card card-hover mb-3">
<a href="course-single.html" class="card-img-top"><img
src="../assets/images/course/course-angular.jpg" alt="" class="card-img-top rounded-top-md"></a>
<!-- Card Body -->
<div class="card-body">
<h4 class="mb-2 text-truncate-line-2 "><a href="course-single.html"
class="text-inherit">Angular -
the complete guide for beginner</a></h4>
<!-- List -->
<ul class="mb-3 list-inline">
<li class="list-inline-item"><i class="mdi mdi-clock-time-four-outline text-muted me-1"></i>1h 30m</li>
<li class="list-inline-item">
<svg class="me-1 mt-n1" width="16" height="16" viewBox="0 0 16 16" fill="none"
xmlns="http://www.w3.org/2000/svg">
<rect x="3" y="8" width="2" height="6" rx="1" fill="#754FFE" />
<rect x="7" y="5" width="2" height="9" rx="1" fill="#DBD8E9" />
<rect x="11" y="2" width="2" height="12" rx="1" fill="#DBD8E9" />
</svg>
Beginner
</li>
</ul>
<div class="lh-1">
<span>
<i class="mdi mdi-star text-warning me-n1"></i>
<i class="mdi mdi-star text-warning me-n1"></i>
<i class="mdi mdi-star text-warning me-n1"></i>
<i class="mdi mdi-star text-warning me-n1"></i>
<i class="mdi mdi-star text-warning"></i>
</span>
<span class="text-warning">4.5</span>
<span class="fs-6 text-muted">(8,890)</span>
</div>
</div>
<!-- Card Footer -->
<div class="card-footer">
<div class="row align-items-center g-0">
<div class="col-auto">
<img src="../assets/images/avatar/avatar-3.jpg" class="rounded-circle avatar-xs" alt="">
</div>
<div class="col ms-2">
<span>Juanita Bell</span>
</div>
<div class="col-auto">
<a href="#" class="text-muted bookmark">
<i class="fe fe-bookmark "></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<!-- Card -->
<div class="card card-hover mb-3">
<a href="course-single.html" class="card-img-top"><img
src="../assets/images/course/course-python.jpg" alt="" class="card-img-top rounded-top-md"></a>
<!-- Card Body -->
<div class="card-body">
<h4 class="mb-2 text-truncate-line-2 "><a href="course-single.html" class="text-inherit">The
Python
Course: build web application</a></h4>
<!-- List -->
<ul class="mb-3 list-inline">
<li class="list-inline-item"><i class="mdi mdi-clock-time-four-outline text-muted me-1"></i>2h 30m</li>
<li class="list-inline-item">
<svg class="me-1 mt-n1" width="16" height="16" viewBox="0 0 16 16" fill="none"
xmlns="http://www.w3.org/2000/svg">
<rect x="3" y="8" width="2" height="6" rx="1" fill="#754FFE" />
<rect x="7" y="5" width="2" height="9" rx="1" fill="#754FFE" />
<rect x="11" y="2" width="2" height="12" rx="1" fill="#DBD8E9" />
</svg>
Intermediate
</li>
</ul>
<div class="lh-1">
<span>
<i class="mdi mdi-star text-warning me-n1"></i>
<i class="mdi mdi-star text-warning me-n1"></i>
<i class="mdi mdi-star text-warning me-n1"></i>
<i class="mdi mdi-star text-warning me-n1"></i>
<i class="mdi mdi-star text-warning"></i>
</span>
<span class="text-warning">4.5</span>
<span class="fs-6 text-muted">(13,245)</span>
</div>
</div>
<!-- Card Footer -->
<div class="card-footer">
<div class="row align-items-center g-0">
<div class="col-auto">
<img src="../assets/images/avatar/avatar-4.jpg" class="rounded-circle avatar-xs" alt="">
</div>
<div class="col ms-2">
<span>Claire Robertson</span>
</div>
<div class="col-auto">
<a href="#" class="text-muted bookmark">
<i class="fe fe-bookmark "></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<!-- Card -->
<div class="card card-hover mb-3">
<a href="course-single.html" class="card-img-top"><img
src="../assets/images/course/course-graphql.jpg" alt="" class="rounded-top-md card-img-top"></a>
<!-- Card Body -->
<div class="card-body">
<h4 class="mb-2 text-truncate-line-2 "><a href="course-single.html"
class="text-inherit">GraphQL:
introduction to graphQL for beginners</a></h4>
<!-- List -->
<ul class="mb-3 list-inline">
<li class="list-inline-item"><i class="mdi mdi-clock-time-four-outline text-muted me-1"></i>2h 46m</li>
<li class="list-inline-item">
<svg class="me-1 mt-n1" width="16" height="16" viewBox="0 0 16 16" fill="none"
xmlns="http://www.w3.org/2000/svg">
<rect x="3" y="8" width="2" height="6" rx="1" fill="#754FFE" />
<rect x="7" y="5" width="2" height="9" rx="1" fill="#754FFE" />
<rect x="11" y="2" width="2" height="12" rx="1" fill="#754FFE" />
</svg>
Advance
</li>
</ul>
<div class="lh-1">
<span>
<i class="mdi mdi-star text-warning me-n1"></i>
<i class="mdi mdi-star text-warning me-n1"></i>
<i class="mdi mdi-star text-warning me-n1"></i>
<i class="mdi mdi-star text-warning me-n1"></i>
<i class="mdi mdi-star text-warning"></i>
</span>
<span class="text-warning">4.5</span>
<span class="fs-6 text-muted">(9,300)</span>
</div>
</div>
<!-- Card Footer -->
<div class="card-footer">
<div class="row align-items-center g-0">
<div class="col-auto">
<img src="../assets/images/avatar/avatar-2.jpg" class="rounded-circle avatar-xs" alt="">
</div>
<div class="col ms-2">
<span>Ted Hawkins</span>
</div>
<div class="col-auto">
<a href="#" class="text-muted bookmark">
<i class="fe fe-bookmark "></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<!-- Card -->
<div class="card card-hover mb-3">
<a href="course-single.html" class="card-img-top"><img
src="../assets/images/course/course-angular.jpg" alt="" class="card-img-top rounded-top-md"></a>
<!-- Card Body -->
<div class="card-body">
<h4 class="mb-2 text-truncate-line-2 "><a href="course-single.html"
class="text-inherit">Angular -
the complete guide for beginner</a></h4>
<!-- List -->
<ul class="mb-3 list-inline">
<li class="list-inline-item"><i class="mdi mdi-clock-time-four-outline text-muted me-1"></i>1h 30m</li>
<li class="list-inline-item">
<svg class="me-1 mt-n1" width="16" height="16" viewBox="0 0 16 16" fill="none"
xmlns="http://www.w3.org/2000/svg">
<rect x="3" y="8" width="2" height="6" rx="1" fill="#754FFE" />
<rect x="7" y="5" width="2" height="9" rx="1" fill="#DBD8E9" />
<rect x="11" y="2" width="2" height="12" rx="1" fill="#DBD8E9" />
</svg>
Beginner
</li>
</ul>
<div class="lh-1">
<span>
<i class="mdi mdi-star text-warning me-n1"></i>
<i class="mdi mdi-star text-warning me-n1"></i>
<i class="mdi mdi-star text-warning me-n1"></i>
<i class="mdi mdi-star text-warning me-n1"></i>
<i class="mdi mdi-star text-warning"></i>
</span>
<span class="text-warning">4.5</span>
<span class="fs-6 text-muted">(8,890)</span>
</div>
</div>
<!-- Card Footer -->
<div class="card-footer">
<div class="row align-items-center g-0">
<div class="col-auto">
<img src="../assets/images/avatar/avatar-3.jpg" class="rounded-circle avatar-xs" alt="">
</div>
<div class="col ms-2">
<span>Juanita Bell</span>
</div>
<div class="col-auto">
<a href="#" class="text-muted bookmark">
<i class="fe fe-bookmark "></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<!-- Card -->
<div class="card card-hover mb-3">
<a href="course-single.html" class="card-img-top"><img
src="../assets/images/course/course-python.jpg" alt="" class="card-img-top rounded-top-md"></a>
<!-- Card Body -->
<div class="card-body">
<h4 class="mb-2 text-truncate-line-2 "><a href="course-single.html" class="text-inherit">The
Python
Course: build web application</a></h4>
<!-- List -->
<ul class="mb-3 list-inline">
<li class="list-inline-item"><i class="mdi mdi-clock-time-four-outline text-muted me-1"></i>2h 30m</li>
<li class="list-inline-item">
<svg class="me-1 mt-n1" width="16" height="16" viewBox="0 0 16 16" fill="none"
xmlns="http://www.w3.org/2000/svg">
<rect x="3" y="8" width="2" height="6" rx="1" fill="#754FFE" />
<rect x="7" y="5" width="2" height="9" rx="1" fill="#754FFE" />
<rect x="11" y="2" width="2" height="12" rx="1" fill="#DBD8E9" />
</svg>
Intermediate
</li>
</ul>
<div class="lh-1">
<span>
<i class="mdi mdi-star text-warning me-n1"></i>
<i class="mdi mdi-star text-warning me-n1"></i>
<i class="mdi mdi-star text-warning me-n1"></i>
<i class="mdi mdi-star text-warning me-n1"></i>
<i class="mdi mdi-star text-warning"></i>
</span>
<span class="text-warning">4.5</span>
<span class="fs-6 text-muted">(13,245)</span>
</div>
</div>
<!-- Card Footer -->
<div class="card-footer">
<div class="row align-items-center g-0">
<div class="col-auto">
<img src="../assets/images/avatar/avatar-4.jpg" class="rounded-circle avatar-xs" alt="">
</div>
<div class="col ms-2">
<span>Claire Robertson</span>
</div>
<div class="col-auto">
<a href="#" class="text-muted bookmark">
<i class="fe fe-bookmark "></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<!-- Card -->
<div class="card card-hover mb-3">
<a href="course-single.html" class="card-img-top"><img
src="../assets/images/course/course-graphql.jpg" alt="" class="rounded-top-md card-img-top"></a>
<!-- Card Body -->
<div class="card-body">
<h4 class="mb-2 text-truncate-line-2 "><a href="course-single.html"
class="text-inherit">GraphQL:
introduction to graphQL for beginners</a></h4>
<!-- List -->
<ul class="mb-3 list-inline">
<li class="list-inline-item"><i class="mdi mdi-clock-time-four-outline text-muted me-1"></i>2h 46m</li>
<li class="list-inline-item">
<svg class="me-1 mt-n1" width="16" height="16" viewBox="0 0 16 16" fill="none"
xmlns="http://www.w3.org/2000/svg">
<rect x="3" y="8" width="2" height="6" rx="1" fill="#754FFE" />
<rect x="7" y="5" width="2" height="9" rx="1" fill="#754FFE" />
<rect x="11" y="2" width="2" height="12" rx="1" fill="#754FFE" />
</svg>
Advance
</li>
</ul>
<div class="lh-1">
<span>
<i class="mdi mdi-star text-warning me-n1"></i>
<i class="mdi mdi-star text-warning me-n1"></i>
<i class="mdi mdi-star text-warning me-n1"></i>
<i class="mdi mdi-star text-warning me-n1"></i>
<i class="mdi mdi-star text-warning"></i>
</span>
<span class="text-warning">4.5</span>
<span class="fs-6 text-muted">(9,300)</span>
</div>
</div>
<!-- Card Footer -->
<div class="card-footer">
<div class="row align-items-center g-0">
<div class="col-auto">
<img src="../assets/images/avatar/avatar-2.jpg" class="rounded-circle avatar-xs" alt="">
</div>
<div class="col ms-2">
<span>Ted Hawkins</span>
</div>
<div class="col-auto">
<a href="#" class="text-muted bookmark">
<i class="fe fe-bookmark "></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>