| Current File : /home/exataengenharia/public_html/resources/views/components/slide.blade.php |
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<style>
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.image-thumb {
display: flex;
align-items: flex-start;
justify-content: center;
height: 500px;
}
.image-thumb>img {
width: 100%;
height: auto;
}
/* Media Query para o breakpoint 900px a 1300px */
@media (min-width: 900px) and (max-width: 1300px) {
.image-thumb {
height: 600px;
}
.container__set {
color: #fff;
display: inline-block;
position: absolute;
bottom: 10%;
left: 0%;
}
}
.buttons #prevButton {
left: 80%;
}
.rotate-icon {
display: block !important;
transform: rotate(180deg) !important;
}
@media (min-width: 1400px){
.container{
max-width: 90vw !important;
}
}
@media (min-width: 2560px) and (min-height: 900px) {
.container-slide {
display: grid;
--bs-gutter-x: 24.5rem !important;
}
}
@media (min-width: 1800px) and (min-height: 100px) {
.container__set {
display: inline-block;
position: absolute;
left: -65%;
top: 100%;
}
.buttons #prevButton {
left: 80%;
top: 100%;
}
}
/* Media Query para o breakpoint 1024px a 1200px */
</style>
</head>
<body>
<div class="conatiner-fluid text-center">
<div id="carouselExample" class="carousel slide">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="image-thumb">
<img class="img-thumbnail" style="--aspect-ratio: 16/9" id="projectImage" src="" alt="Imagem">
</div>
</div>
</div>
<div class="buttons">
<div class="container__set" id="nextButton" style="z-index: 100000000;">
<i class="bi bi-arrow-right-circle rotate-icon"></i>
</div>
<div class=" container__set" id="prevButton" style="margin-left: 140px;z-index: 100000000;">
<i class="bi bi-arrow-left-circle rotate-icon"></i>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>