Images for demo purpose, use images at your own risk.
<!-- HTML code -->
<section class="cm-item-58 slider">
<div class="cm-item-58-swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide slider-item-1">
<div class="content-wrapper">
<h1 class="title">
Build Everything <br> with Passion
</h1>
<p class="text">There are many of passages of lorem Ipsum, but the majori have suffered <br> alteration in
some form.</p>
<a class="theme-btn" href="#">Discover more</a>
</div>
</div>
<div class="swiper-slide slider-item-2">
<div class="content-wrapper">
<h1 class="title">
Build Everything <br> with Passion
</h1>
<p class="text">There are many of passages of lorem Ipsum, but the majori have suffered <br> alteration in
some form.</p>
<a class="theme-btn" href="#">Discover more</a>
</div>
</div>
<div class="swiper-slide slider-item-3">
<div class="content-wrapper">
<h1 class="title">
Build Everything <br> with Passion
</h1>
<p class="text">There are many of passages of lorem Ipsum, but the majori have suffered <br> alteration in
some form.</p>
<a class="theme-btn" href="#">Discover more</a>
</div>
</div>
</div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev">
<svg width="20px" height=20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M11.7071 4.29289C12.0976 4.68342 12.0976 5.31658 11.7071 5.70711L6.41421 11H20C20.5523 11 21 11.4477 21 12C21 12.5523 20.5523 13 20 13H6.41421L11.7071 18.2929C12.0976 18.6834 12.0976 19.3166 11.7071 19.7071C11.3166 20.0976 10.6834 20.0976 10.2929 19.7071L3.29289 12.7071C3.10536 12.5196 3 12.2652 3 12C3 11.7348 3.10536 11.4804 3.29289 11.2929L10.2929 4.29289C10.6834 3.90237 11.3166 3.90237 11.7071 4.29289Z"
fill="#fff" />
</svg>
</div>
<div class="swiper-button-next">
<svg width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M12.2929 4.29289C12.6834 3.90237 13.3166 3.90237 13.7071 4.29289L20.7071 11.2929C21.0976 11.6834 21.0976 12.3166 20.7071 12.7071L13.7071 19.7071C13.3166 20.0976 12.6834 20.0976 12.2929 19.7071C11.9024 19.3166 11.9024 18.6834 12.2929 18.2929L17.5858 13H4C3.44772 13 3 12.5523 3 12C3 11.4477 3.44772 11 4 11H17.5858L12.2929 5.70711C11.9024 5.31658 11.9024 4.68342 12.2929 4.29289Z"
fill="#fff"/>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<!-- JS code -->
<script>
const swiper = new Swiper('.cm-item-58-swiper', {
loop: true,
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
autoplay: {
delay: 3000,
},
slidesPerView: 1,
// Responsive breakpoints
breakpoints: {
// when window width is >= 320px
320: {
slidesPerView: 1,
},
// when window width is >= 480px
480: {
slidesPerView: 1,
},
// when window width is >= 640px
640: {
slidesPerView: 1,
},
// when window width is >= 767px
767: {
slidesPerView: 1,
},
// when window width is >= 991px
991: {
slidesPerView: 1,
},
// when window width is >= 1200px
1200: {
slidesPerView: 1,
}
}
});
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
<!-- CSS code -->
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img,
svg {
max-width: 100%;
vertical-align: middle;
}
.cm-item-58.slider {
position: relative;
overflow: hidden;
}
.cm-item-58.slider .cm-item-58-swiper .swiper-slide {
width: 100%;
height: 100vh;
position: relative;
}
.cm-item-58.slider .swiper-slide::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(16, 28, 48, .50);
z-index: -1;
}
.cm-item-58.slider .cm-item-58-swiper .swiper-slide.slider-item-1 {
background: url(https://cdn.codemela.com/wp-content/uploads/2024/09/main-slider-1-1.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.cm-item-58.slider .cm-item-58-swiper .swiper-slide.slider-item-2 {
background: url(https://cdn.codemela.com/wp-content/uploads/2024/09/main-slider-1-2.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.cm-item-58.slider .cm-item-58-swiper .swiper-slide.slider-item-3 {
background: url(http://cdn.codemela.com/wp-content/uploads/2024/09/main-slider-1-3.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.cm-item-58.slider .cm-item-58-swiper .swiper-slide .content-wrapper {
padding: 180px 140px;
}
.cm-item-58.slider .cm-item-58-swiper .swiper-slide .content-wrapper .title {
font-size: 90px;
line-height: 90px;
color: #fff;
opacity: 1;
margin-bottom: 30px;
}
.cm-item-58.slider .cm-item-58-swiper .swiper-slide .content-wrapper .text {
font-size: 18px;
color: #fff;
opacity: .9;
margin-bottom: 50px;
}
.cm-item-58.slider .cm-item-58-swiper .swiper-slide .content-wrapper .theme-btn {
position: relative;
display: inline-block;
vertical-align: middle;
appearance: none;
font-weight: 700;
font-size: 13px;
color: #fff;
background-color: #fc811b;
text-transform: uppercase;
text-decoration: none;
padding: 18px 40px;
transition: all 0.5s linear;
overflow: hidden;
z-index: 1;
}
.cm-item-58.slider .cm-item-58-swiper .swiper-slide .content-wrapper .theme-btn:hover {
color: #fc811b;
}
.cm-item-58.slider .cm-item-58-swiper .swiper-slide .content-wrapper .theme-btn::after {
position: absolute;
content: "";
top: 0;
left: 0;
right: 0;
bottom: 0;
transition-delay: .1s;
background-color: #fff;
transition-timing-function: ease-in-out;
transition-duration: .4s;
transition-property: all;
transform-origin: top;
transform-style: preserve-3d;
transform: scalex(0);
z-index: -1;
}
.cm-item-58.slider .cm-item-58-swiper .swiper-slide .content-wrapper .theme-btn:hover::after {
transform: scalex(1);
opacity: 1;
}
.cm-item-58.slider .cm-item-58-swiper .swiper-button-next,
.cm-item-58.slider .cm-item-58-swiper .swiper-button-prev {
color: #fff;
top: 65%;
height: 60px;
width: 60px;
line-height: 60px;
text-align: center;
border-radius: 50%;
border: 1px solid #fff;
}
.cm-item-58.slider .cm-item-58-swiper .swiper-button-prev {
left: auto;
right: 15%;
top: 55%;
}
.cm-item-58.slider .cm-item-58-swiper .swiper-button-next {
right: 15%;
}
.cm-item-58.slider .cm-item-58-swiper .swiper-button-next::after,
.cm-item-58.slider .cm-item-58-swiper .swiper-button-prev::after {
content: '';
}
.cm-item-58.slider .cm-item-58-swiper .swiper-button-next:hover,
.cm-item-58.slider .cm-item-58-swiper .swiper-button-prev:hover {
background-color: #fc811b;
}
@media (max-width: 600px) {
.cm-item-58.slider .cm-item-58-swiper .swiper-slide {
height: auto;
}
.cm-item-58.slider .cm-item-58-swiper .swiper-slide .content-wrapper {
padding: 120px 20px;
}
.cm-item-58.slider .cm-item-58-swiper .swiper-slide .content-wrapper .title {
font-size: 40px;
line-height: 50px;
}
.cm-item-58.slider .cm-item-58-swiper .swiper-button-prev {
left: auto;
right: 33%;
}
.cm-item-58.slider .cm-item-58-swiper .swiper-button-next,
.cm-item-58.slider .cm-item-58-swiper .swiper-button-prev{
top: auto;
bottom: 5%;
}
}
@media (min-width: 600px) and (max-width: 991px){
.cm-item-58.slider .cm-item-58-swiper .swiper-slide .content-wrapper {
padding: 120px 20px;
}
.cm-item-58.slider .cm-item-58-swiper .swiper-button-prev{
top: 65%;
}
.cm-item-58.slider .cm-item-58-swiper .swiper-button-next{
top: 75%;
}
}
</style>