Slider

<div class="position-relative">
  <ul class="controls " id="sliderFirstControls">
     <li class="prev">
        <i class="fe fe-chevron-left"></i>
     </li>
     <li class="next">
        <i class="fe fe-chevron-right"></i>
     </li>
  </ul>
  <div class="sliderFirst">
     <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>
</div>