Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Design Half-Page Carousel in Bootstrap?
Carousel is a popular web designing technique used by web developers. This is a way to show a series of images or any other media content in an interactive way. These carousels are important design elements in several kinds of websites like traveling websites, Educational websites, etc., where we need to attract users using the images. The half-page carousel is a slight variation where the carousel takes only half of the entire page. This article will teach us how to design a half-page carousel in Bootstrap.
Use The Grid System
The bootstrap grid system allows us to create responsive and visually appealing image layouts. We can place any kind of container, including texts, images, paragraphs, etc with the grid system. In Bootstrap, we need to define the rows and columns using the “row” and “col” class names to use the grid system. Using CSS styling, we can set the height of the Carousel to be half the height and 100% of the screen's width.
Example
The following code is an example of creating a half-page carousel using Bootstrap, a popular front-end framework. The carousel comprises three images, each taking up half the screen's height. The code uses the "carousel" component provided by Bootstrap and includes three "carousel-item" elements, each containing an image with a source URL from the "picsum.photos" website. The images are responsive using the "d-block" and "w-100" classes, respectively, making the image display a block element and setting its width to 100% of its parent container. The "container-fluid" class creates a full-width container, while the "container" class creates a centered container for the heading and paragraph text. Finally, the code includes three script tags that import the required JavaScript libraries for the carousel to function properly.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid px-0">
<div id="carouselExampleSlidesOnly" class="carousel slide" dataride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://picsum.photos/800/400?random=1" alt="First slide" style="height: 50vh !important;">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://picsum.photos/800/400?random=2" alt="Second slide"style="height: 50vh !important;">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://picsum.photos/800/400?random=3" alt="Third slide" style="height: 50vh !important;">
</div>
</div>
</div>
</div>
<div class="container my-5">
<h1 class="text-center">Half-Page Carousel Example</h1>
<p class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js "></script>
</body>
</html>
Create Half-Page Carousel Using a Modal
Modals are important designs used in modern websites. These are dialog or pop-up windows that appear above the current page. Usually, we display some additional information, prompts, and users for input. To create half page carousel using the modal, we can set the dimensions of the models accordingly
Example code
We used the Modal to implement a half-page carousel in the following code. We used two images. The button triggers the modal. On triggering, we displayed the images one by one. The user can navigate through the images through the cursor available.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
.modal-dialog {
max-width: 100vw;
height: 50vh;
margin: 0;
}
.modal-content {
width: 100%;
height: 100%;
}
.carousel-item img {
object-fit: cover;
width: 100%;
height: 50Vh !important;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', function() {
var modal = document.getElementById('carouselModal');
modal.addEventListener('show.bs.modal', function() {
var windowHeight = window.innerHeight || document.documentElement.clientHeight;
var modalHeight = windowHeight * 0.5; // Set modal height to 50% ofthe window height
var modalDialog = modal.querySelector('.modal-dialog');
modalDialog.style.height = modalHeight + 'px';
});
});
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#carouselModal">
Open Carousel
</button>
</div>
</div>
</div>
<div class="modal fade" id="carouselModal" tabindex="-1" role="dialog" aria-labelledby="carouselModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div id="carouselExampleControls" class="carousel slide" dataride=" carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://lh3.googleusercontent.com/p/AF1QipOwuHy1QZ8xoEEm09pfzalu3h-JoyMti5MrordD=w1080-h608-p-k-no-v0" alt="Image 1">
</div>
<div class="carousel-item">
<img src="https://static.ambitionbox.com/api/v2/photo/M2RLbTIvbklJQzh3Wk5pakZobWpHUT09" alt="Image 2">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls"role="button" data-slide="prev">
<span class="carousel-control-prev-icon" ariahidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls"role="button" data-slide="next">
<span class="carousel-control-next-icon" ariahidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
Conclusion
Designing the carousel is a great way to make the website look more attractive. This is exclusively used in blogging web applications, travel websites, etc., where users are highly attracted to the images. However, we should also remember that the web page takes more time to load when we add large images.
311 Views
