Implement carousel with standard Bootstrap for better responsiveness

This commit is contained in:
Adam Iannazzone 2024-09-26 13:04:58 -04:00
parent 95a80fb3ba
commit 755e161eaa
2 changed files with 168 additions and 98 deletions

View file

@ -99,25 +99,25 @@ footer {
border-bottom: var(--rd-purple) 5px solid; border-bottom: var(--rd-purple) 5px solid;
} }
#feature-row { /* #feature-row {
flex-wrap: nowrap; flex-wrap: nowrap;
scrollbar-width: none; scrollbar-width: none;
scroll-behavior: smooth; scroll-behavior: smooth;
} } */
.feature-container { /* .feature-container {
transition: 0.5s; transition: 0.5s;
cursor: pointer; cursor: pointer;
scale: 80%; scale: 80%;
scroll-margin-top: 20px; scroll-margin-top: 20px;
max-height: fit-content; max-height: fit-content;
} } */
.feature-container#active-feature { /* .feature-container#active-feature {
transition: 0.5s; transition: 0.5s;
scale: 100%; scale: 100%;
cursor:auto; cursor:auto;
} } */
.empty-feature-container { .empty-feature-container {
visibility: hidden; visibility: hidden;

View file

@ -153,7 +153,8 @@
<main class="container-fluid px-0 mt-4"> <main class="container-fluid px-0 mt-4">
<!-- Jumbotron --> <!-- Jumbotron -->
<div class="container p-2 mb-4 bg-body-tertiary rounded-3 jumbotron"> <div class="container px-2">
<div class="p-2 mb-4 bg-body-tertiary rounded-3 jumbotron">
<div class="container-fluid align-items-center"> <div class="container-fluid align-items-center">
<!-- First section --> <!-- First section -->
<div class="row align-items-center"> <div class="row align-items-center">
@ -220,10 +221,11 @@
<!-- End Second Section --> <!-- End Second Section -->
</div> </div>
</div>
<!-- End Jumbotron --> <!-- End Jumbotron -->
<!-- Screenshot/Feature Section --> <!-- Screenshot/Feature Section -->
<div class="container-fluid mb-4 pt-2" id="features"> <!-- <div class="container-fluid mb-4 pt-2" id="features">
<div class="row mb-2 overflow-x-scroll" id="feature-row"> <div class="row mb-2 overflow-x-scroll" id="feature-row">
<div class="col-8 col-sm-6 feature-container empty-feature-container" id=""></div> <div class="col-8 col-sm-6 feature-container empty-feature-container" id=""></div>
<div class="col-8 col-sm-6 feature-container" id="active-feature"> <div class="col-8 col-sm-6 feature-container" id="active-feature">
@ -282,11 +284,78 @@
</div> </div>
<div class="col-8 col-sm-6 feature-container empty-feature-container" id=""></div> <div class="col-8 col-sm-6 feature-container empty-feature-container" id=""></div>
</div> </div>
</div> </div> -->
<!-- End Screenshot/Feature Section --> <!-- End Screenshot/Feature Section -->
<!-- Screenshots and Features as Bootstrap Carousel -->
<div class="container-fluid mb-4" id="features">
<div class="carousel slide py-2" id="features-carousel">
<div class="carousel-inner">
<div class="carousel-item active feature-container">
<img src="assets/screens/large/screen01.png" class="d-block w-75 screenshot" alt="" />
<div class="feature-card px-5 mt-2 mx-auto">
<h3>Feature 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit
sodales
mattis. Praesent eget lacinia risus, ut bibendum est.</p>
</div>
</div>
<div class="carousel-item feature-container">
<img src="assets/screens/large/screen02.png" class="d-block w-75 screenshot" alt="" />
<div class="feature-card px-5 mt-2 mx-auto">
<h3>Feature 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit
sodales
mattis. Praesent eget lacinia risus, ut bibendum est.</p>
</div>
</div>
<div class="carousel-item feature-container">
<img src="assets/screens/large/screen03.png" class="d-block w-75 screenshot" alt="" />
<div class="feature-card px-5 mt-2 mx-auto">
<h3>Feature 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit
sodales
mattis. Praesent eget lacinia risus, ut bibendum est.</p>
</div>
</div>
<div class="carousel-item feature-container">
<img src="assets/screens/large/screen04.png" class="d-block w-75 screenshot" alt="" />
<div class="feature-card px-5 mt-2 mx-auto">
<h3>Feature 4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit
sodales
mattis. Praesent eget lacinia risus, ut bibendum est.</p>
</div>
</div>
<div class="carousel-item feature-container">
<img src="assets/screens/large/screen05.png" class="d-block w-75 screenshot" alt="" />
<div class="feature-card px-5 mt-2 mx-auto">
<h3>Feature 5</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit
sodales
mattis. Praesent eget lacinia risus, ut bibendum est.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#features-carousel" 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="#features-carousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<!-- Screenshots and Features as Bootstrap Carousel -->
<!-- Donate Appeal --> <!-- Donate Appeal -->
<div class="container p-2 mb-4 bg-body-tertiary rounded-3 jumbotron"> <div class="container px-2">
<div class="p-2 mb-4 bg-body-tertiary rounded-3 jumbotron">
<div class="container-fluid py-2 align-items-center"> <div class="container-fluid py-2 align-items-center">
<!-- First section --> <!-- First section -->
<div class="row align-items-center"> <div class="row align-items-center">
@ -323,6 +392,7 @@
</div> </div>
</div> </div>
</div>
<!-- End Donate Appeal --> <!-- End Donate Appeal -->
</main> </main>
@ -350,7 +420,7 @@
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script> crossorigin="anonymous"></script>
<!-- <script src="scripts/gradient.js"></script> --> <!-- <script src="scripts/gradient.js"></script> -->
<script src="scripts/features.js"></script> <!-- <script src="scripts/features.js"></script> -->
<script src="scripts/accessibility.js"></script> <script src="scripts/accessibility.js"></script>
</body> </body>