<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slider</title>
<link rel="stylesheet" href="index.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<style>
#carouselExample::after {
border-bottom: 4px solid #ef0160;
border-left: 4px solid #ef0160;
border-top: 4px solid #ef0160;
content: "";
display: block;
height: 95%;
left: 24px;
position: absolute;
top: 25px;
transform: rotate(7deg);
width: 95%;
z-index: 5;
}
#carouselExample {
height: fit-content;
}
#carouselExample::before {
border-right: 4px solid #ef0160;
content: "";
display: block;
height: 95%;
left: 32px !important;
position: absolute;
top: 26px;
transform: rotate(7deg);
width: 94%;
z-index: -1;
}
.carousel-control-prev-icon {
background-color: red;
}
.carousel-control-next-icon {
background-color: red;
}
.carousel-item img {
display: block;
width: 100%;
height: 530px;
}
.carousel-control-prev {
position: absolute;
left: 580px !important;
top: 250px !important;
transform: rotate(89deg);
width: 20px !important;
height: fit-content !important;
}
.carousel-control-next {
position: absolute;
left: 580px !important;
top: 270px !important;
transform: rotate(89deg);
width: 20px !important;
height: fit-content !important;
}
@media only screen and (max-width: 768px) {
#carouselExample::after {
border-bottom: 4px solid #ef0160;
border-left: 4px solid #ef0160;
border-top: 4px solid #ef0160;
content: "";
display: block;
height: 95%;
left: 24px;
position: absolute;
top: 25px;
transform: rotate(7deg);
width: 95%;
z-index: 5;
}
.carousel-item img {
display: block !important;
width: 100%;
height: 400px;
}
#carouselExample::before {
border-right: 4px solid #ef0160;
content: "";
display: block;
height: 95%;
left: 30px !important;
position: absolute;
top: 25px;
transform: rotate(7deg);
width: 94%;
z-index: -1;
}
.carousel-control-prev-icon {
position: absolute;
top: 561px;
left: 150px;
transform: rotate(-90deg);
}
.carousel-control-next-icon {
position: absolute;
top: 529px;
left: 130px;
transform: rotate(-90deg);
}
}
@media only screen and (max-width: 360px) {
.container {
flex-direction: column;
}
#carouselExample::after {
display: none;
}
#carouselExample::before {
display: none;
}
.carousel-item img {
display: block;
width: 100%;
}
.carousel-control-prev-icon {
position: absolute !important;
top: 561px !important;
left: 150px !important;
transform: rotate(-89deg);
}
.carousel-control-next-icon {
position: absolute !important;
left: 130px !important;
bottom: 153px !important;
transform: rotate(-89deg);
}
}
</style>
<body>
<div class="container">
<div id="carouselExample" class="carousel slide col-md-5 ">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="about_img_01.jpg" class="d-block " class="img-fluid" alt="...">
</div>
<div class="carousel-item">
<img src="about_img_02.jpg" class="d-block " class="img-fluid" alt="...">
</div>
<div class="carousel-item">
<img src="about_img_03.jpg" class="d-block" class="img-fluid" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
crossorigin="anonymous"></script>
</body>
</html>USER LINKS