Carousel #1
<div
class="swiper-container swiper"
id="swiper-1"
data-pagination-type=""
data-speed="400"
data-space-between="100"
data-pagination="true"
data-navigation="false"
data-autoplay="true"
data-autoplay-delay="3000"
data-breakpoints='{"480": {"slidesPerView": 1}, "768":
{"slidesPerView": 1}, "1024": {"slidesPerView": 1}}'>
<div class="swiper-wrapper pb-6 mx-auto">
<div class="swiper-slide">
<div class="card shadow-sm overflow-hidden">
<div class="row g-0">
<div class="col-xl-6 col-md-6">
<div class="card-body h-100 d-flex align-items-start
flex-column p-lg-7">
<div class="mb-3">
<small class="text-uppercase fw-semibold ls-md">Online</small>
<h2 class="mb-0 mt-3">
<a href="#" class="text-reset">React - Next.js developers events and
meetup</a>
</h2>
</div>
<div class="mb-5">
<small class="me-2">June 22, 2024</small>
<small>1:00PM EDT</small>
</div>
<div class="mt-auto">
<a href="./event-single.html" class="icon-link icon-link-hover card-link">
Mode Details
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
fill="currentColor"
class="bi bi-arrow-right"
viewBox="0 0 16 16">
<path
fill-rule="evenodd"
d="M1 8a.5.5 0 0 1
.5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0
0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"></path>
</svg>
</a>
</div>
</div>
</div>
<div
class="col-md-6"
style="
background-image: url(../assets/images/event/event-img-1.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
min-height: 15rem;
">
<!-- for mobile img-->
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card shadow-sm overflow-hidden">
<div class="row g-0">
<div class="col-xl-6 col-md-6">
<div class="card-body h-100 d-flex align-items-start
flex-column p-lg-7">
<div class="mb-4">
<small class="text-uppercase fw-semibold ls-md">Online</small>
<h2 class="mb-0 mt-3">
<a href="#" class="text-reset">React - Next.js developers events and
meetup</a>
</h2>
</div>
<div class="mb-5">
<small class="me-2">June 22, 2024</small>
<small>1:00PM EDT</small>
</div>
<div class="mt-auto">
<a href="./event-single.html" class="icon-link icon-link-hover card-link">
Mode Details
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
fill="currentColor"
class="bi bi-arrow-right"
viewBox="0 0 16 16">
<path
fill-rule="evenodd"
d="M1 8a.5.5 0 0 1
.5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0
0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"></path>
</svg>
</a>
</div>
</div>
</div>
<div
class="col-md-6"
style="
background-image: url(../assets/images/event/event-img-2.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
min-height: 15rem;
">
<!-- for mobile img-->
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card shadow-sm overflow-hidden">
<div class="row g-0">
<div class="col-xl-6 col-md-6">
<div class="card-body h-100 d-flex align-items-start
flex-column p-lg-7">
<div class="mb-4">
<small class="text-uppercase fw-semibold ls-md">Online</small>
<h2 class="mb-0 mt-3">
<a href="#" class="text-reset">React - Next.js developers events and
meetup</a>
</h2>
</div>
<div class="mb-5">
<small class="me-2">June 22, 2024</small>
<small>1:00PM EDT</small>
</div>
<div class="mt-auto">
<a href="./event-single.html" class="icon-link icon-link-hover card-link">
Mode Details
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
fill="currentColor"
class="bi bi-arrow-right"
viewBox="0 0 16 16">
<path
fill-rule="evenodd"
d="M1 8a.5.5 0 0 1
.5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0
0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"></path>
</svg>
</a>
</div>
</div>
</div>
<div
class="col-md-6"
style="
background-image: url(../assets/images/event/event-img-3.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
min-height: 15rem;
">
<!-- for mobile img-->
</div>
</div>
</div>
</div>
<!-- Add more slides as needed -->
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Navigation -->
<div class="swiper-navigation">
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>Carousel #2
portfolio
Our favourite portfolio project.
We’ll design a beautiful, scalable, and modular website that your design team will drool over and marketing team will thank you for.
- Design discovery workshop
- Conversion focused design
- Responsive across major breakpoints
- Comprehensive design documentation
<div
class="swiper-container swiper"
id="swiper-1"
data-pagination-type=""
data-speed="400"
data-space-between="100"
data-pagination="true"
data-navigation="false"
data-autoplay="true"
data-autoplay-delay="3000"
data-breakpoints='{"480": {"slidesPerView": 1}, "768":
{"slidesPerView": 1}, "1024": {"slidesPerView": 1}}'>
<div class="swiper-wrapper pb-6 mx-auto">
<div class="swiper-slide">
<img src="../assets/images/service/project-small-img-1.jpg" alt="project" class="img-fluid rounded-3" />
</div>
<div class="swiper-slide">
<img src="../assets/images/service/project-small-img-2.jpg" alt="project" class="img-fluid rounded-3" />
</div>
<div class="swiper-slide">
<img src="../assets/images/service/project-small-img-3.jpg" alt="project" class="img-fluid rounded-3" />
</div>
<!-- Add more slides as needed -->
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Navigation -->
<div class="swiper-navigation">
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>Carousel #3
Choose The Way You Ride
<section class="py-lg-8 py-5">
<div class="container">
<div class="row ">
<div class="col-lg-12 col-12 ">
<div class="mb-6">
<h2 class="mb-0">Choose The Way You Ride</h2>
</div>
</div>
</div>
<!--Slider-->
<div class="swiper-container swiper px-3" id="swiper-3"
data-pagination-type="progressbar" data-speed="400" data-space-between="30"
data-pagination="true" data-navigation="true" data-autoplay="false"
data-effect="slides" data-autoplay-delay="3000"
data-breakpoints='{"480": {"slidesPerView": 2}, "768":
{"slidesPerView": 3}, "1024": {"slidesPerView": 3}}'>
<div class="swiper-wrapper pb-10">
<div class="swiper-slide">
<div class="position-relative">
<img src="../assets/images/landings/product/ride-img-1.jpg" alt=""
class="img-fluid rounded-3 mb-4">
<div class="d-flex justify-content-between
align-items-center mb-3">
<a href="#!"
class="text-inherit d-flex align-items-center
justify-content-between w-100">
<div class="mb-0 fs-4 fw-semibold">Cruise</div>
<span class="">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28"
fill="currentColor" class="bi bi-arrow-right-short"
viewBox="0 0 16 16">
<path fill-rule="evenodd"
d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5
0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293
8.5H4.5A.5.5 0 0 1 4 8" />
</svg>
</span>
</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="position-relative">
<img src="../assets/images/landings/product/ride-img-2.jpg" alt=""
class="img-fluid rounded-3 mb-4">
<div class="d-flex justify-content-between
align-items-center mb-3">
<a href="#!"
class="text-inherit d-flex align-items-center
justify-content-between w-100">
<div class="mb-0 fs-4 fw-semibold">Off Road</div>
<span class="">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28"
fill="currentColor" class="bi bi-arrow-right-short"
viewBox="0 0 16 16">
<path fill-rule="evenodd"
d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5
0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293
8.5H4.5A.5.5 0 0 1 4 8" />
</svg>
</span>
</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="position-relative">
<img src="../assets/images/landings/product/ride-img-3.jpg" alt=""
class="img-fluid rounded-3 mb-4">
<div class="d-flex justify-content-between
align-items-center mb-3">
<a href="#!"
class="text-inherit d-flex align-items-center
justify-content-between w-100">
<div class="mb-0 fs-4 fw-semibold">Commuter eBikes</div>
<span class="">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28"
fill="currentColor" class="bi bi-arrow-right-short"
viewBox="0 0 16 16">
<path fill-rule="evenodd"
d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5
0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293
8.5H4.5A.5.5 0 0 1 4 8" />
</svg>
</span>
</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="position-relative">
<img src="../assets/images/landings/product/ride-img-1.jpg" alt=""
class="img-fluid rounded-3 mb-4">
<div class="d-flex justify-content-between
align-items-center mb-3">
<a href="#!"
class="text-inherit d-flex align-items-center
justify-content-between w-100">
<div class="mb-0 fs-4 fw-semibold">Cruise</div>
<span class="">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28"
fill="currentColor" class="bi bi-arrow-right-short"
viewBox="0 0 16 16">
<path fill-rule="evenodd"
d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5
0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293
8.5H4.5A.5.5 0 0 1 4 8" />
</svg>
</span>
</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="position-relative">
<img src="../assets/images/landings/product/ride-img-2.jpg" alt=""
class="img-fluid rounded-3 mb-4">
<div class="d-flex justify-content-between
align-items-center mb-3">
<a href="#!"
class="text-inherit d-flex align-items-center
justify-content-between w-100">
<div class="mb-0 fs-4 fw-semibold">Off Road</div>
<span class="">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28"
fill="currentColor" class="bi bi-arrow-right-short"
viewBox="0 0 16 16">
<path fill-rule="evenodd"
d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5
0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293
8.5H4.5A.5.5 0 0 1 4 8" />
</svg>
</span>
</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="position-relative">
<img src="../assets/images/landings/product/ride-img-3.jpg" alt=""
class="img-fluid rounded-3 mb-4">
<div class="d-flex justify-content-between
align-items-center mb-3">
<a href="#!"
class="text-inherit d-flex align-items-center
justify-content-between w-100">
<div class="mb-0 fs-4 fw-semibold">Commuter eBikes</div>
<span class="">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28"
fill="currentColor" class="bi bi-arrow-right-short"
viewBox="0 0 16 16">
<path fill-rule="evenodd"
d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5
0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293
8.5H4.5A.5.5 0 0 1 4 8" />
</svg>
</span>
</a>
</div>
</div>
</div>
<!-- Add more slides as needed -->
</div>
<!-- Add Pagination -->
<div class="swiper-pagination top-100 mt-n4 start-lg-0
w-md-75 w-50 "></div>
<!-- Add Navigation -->
<div class="swiper-navigation position-absolute end-0
bottom-0 mb-1 ">
<div
class="swiper-button-prev me-1 btn btn-icon btn-sm
btn-outline-primary rounded-circle"
id="slide1">
</div>
<div
class="swiper-button-next btn btn-icon btn-sm
btn-outline-primary rounded-circle"
id="slide2">
</div>
</div>
</div>
</div>
</section>