A slider comprises a series of consecutive frames that can be navigated forwards and backwards. This tutorial illustrates the process of building a slideshow solely utilizing HTML and CSS.
Initiate the basic HTML code initially, followed by utilizing the type attribute as a radio command to generate radio buttons for the frames. Subsequently, proceed with implementing the frame layouts in a consecutive manner. The frames can be rearranged and modified by leveraging radio buttons and control labels with the assistance of margin-left. Instead of textual content, images can be incorporated within the frames. This approach leads to reduced memory and computational resource utilization by the browser.
Carousels are a set of panels that can be navigated one by one. Each carousel panel has the potential to showcase images, videos, or HTML components like testimonials or ratings. Carousels are commonly found on numerous websites. Developers often turn to carousels when they need to share website details efficiently without occupying excessive space.
As an example, when a developer is working on a website for a product, they may aim to present customer endorsements or reviews to build trust with potential buyers. To achieve this, the developer can implement a slider feature that allows users to easily browse through each review.
Prerequisites
With the use of HTML, CSS, and Javascript, we will discover how to make a simple CSS picture slider. We need to be familiar with several ideas to understand what is happening and what we are doing completely. Let's look at them now.
- HTML: We should be familiar with the fundamentals of HTML, including its components and tags. We should be aware of the functions of each tag and element in our slider, as we will be employing a number of them to build it.
- CSS: We'll utilize a lot of CSS to build the slider. Several CSS intermediate principles, like stacking, z-index, position, and animations, should be familiar to us. When building the slider, each of these will be necessary.
- Javascript: We should be familiar with the fundamentals of JavaScript, including variable definition, for-loop use, and DOM manipulation. These would be used to adjust the slider and provide the desired effect.
How to Create a Slider
Create a slider using an HTML and CSS page.
Step 1: Utilize HTML markup to establish the fundamental structure of the Image Slider.
To begin, we will establish the framework for the slider. As previously noted, sliders consist of an array of frames. Our focus will be on constructing a CSS image slider.
Initially, we will generate the parent div to contain the slider images and functionalities. Additionally, we will apply styling adjustments like changing the background color and adjusting the dimensions of the parent div.
<!DOCTYPE html>
<html>
<head>
<title>Example for Slider in CSS</title>
<style>
</style>
</head>
<body>
<div id="parent-container">
<!-- All of the pictures and buttons we'll use for the slider will be in this div.
</div>
</body>
</html>
Step 2: Add the Prev and Next Buttons.
You can find navigation buttons on sliders to move between frames. To enable users to navigate through a carousel's images, we can add basic buttons to the parent div. In this case, we can use "<" for the previous button and ">" for the next button for simplicity.
Styling the primary HTML buttons and positioning them to be vertically centered within the central div is crucial for enhancing user navigation within the slider. Achieving this alignment involves utilizing relative positioning techniques.
<!DOCTYPE html>
<html>
<head>
<title>Slider in CSS</title>
<style>
body{
background-color: rgb(0,89, 0);
margin-top: 50px;
}
.carousel-container {
width: 200px;
height: 200px;
position: relative;
margin: 0 auto;
}
.navigation-buttons .previous {
position: absolute;
z-index: 9;
font-size: 25px;
top: 30%;
left: 10px;
font-weight: 700;
}
.navigation-buttons .next {
right: 10px;
position: absolute;
font-size: 25px;
z-index: 10;
top: 30%;
}
.navigation-buttons .nav-btn {
background: rgba(90, 150, 76, 70);
cursor: pointer;
border-radius: 60%;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
padding: 4px;
box-shadow: 2px 2px 10px rgba(5, 0, 3, 0.4);
}
.navigation .nav-btn:hover {
background: white;
}
</style>
</head>
<body>
<div id="parent-container">
<div class="navigation-buttons">
<div class="previous nav-btn"><</div>
<div class="next nav-btn">></div>
</div>
</div>
</body>
</html>
Output:
Step 3: Add the Required Text and Graphics to the Slider
Once the buttons have been incorporated, the next step involves uploading the images. In order to create a CSS carousel, floral pictures will be utilized. The arrangement of the photos on the carousel will be achieved through the utilization of position and z-index properties to layer them. A primary class will be designated, with its display property set to visible to ensure one image is displayed. Meanwhile, to conceal the rest of the images from the viewer, their display property will be set to hidden.
The text displayed in the slider will help identify the specific image being viewed by the user. This will assist the user in gaining a clearer insight into the quantity and layout of photos within the carousel.
<!DOCTYPE html>
<html>
<head>
<title>Example for Slider in CSS</title>
<style>
body{
background-color: rgb(76, 76, 76);
margin-top: 50px;
}
.carousel-container {
width: 300px;
height: 300px;
position: relative;
margin: 1 auto;
}
.navigation-buttons .previous {
position: absolute;
z-index: 5;
font-size: 20px;
top: 50%;
left: 10px;
font-weight: 500;
}
.navigation-buttons .next {
right: 10px;
position: absolute;
font-size: 20px;
z-index: 10;
top: 50%;
}
.navigation-buttons .nav-btn {
background: rgba(67, 532, 65, 0);
cursor: pointer;
border-radius: 30%;
width: 20px;
height: 20px;
display: flex;
justify-content: center;
align-items: center;
padding: 3px;
box-shadow: 5px 2px 5px rgba(10, 10, 10, 0.7);
}
.navigation .nav-btn:hover {
background: black;
}
.slider-carousel {
margin-top: 50px;
transition: all 0.2s ease;
}
.slider-carousel img {
width: 100%;
transition: all 0.3s ease;
border:7px solid white;
}
.images {
position: absolute;
display: none;
}
.main {
display: block;
}
.image-text {
position: absolute;
bottom: 0;
width: 100%;
display: flex;
font-size: 30px;
justify-content: center;
align-items: center;
color: rgb(150, 350, 150);
background: rgba(0, 0, 10, 0.5);
height: 60px;
}
</style>
</head>
<body>
<div id="parent-container">
<div class="navigation-buttons">
<div class="previous nav-btn"><</div>
<div class="next nav-btn">></div>
</div>
<div class="slider-carousel">
<div class="images main">
<img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt="flower 1" />
<div class="image-text">Picture 1</div>
</div>
<div class="images">
<img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt="flower 2" />
<div class="image-text">Picture 2</div>
</div>
<div class="images">
<img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt="flower 3" />
<div class="image-text">Picture 3</div>
</div>
</div>
</div>
</body>
</html>
Output:
Step 4: Employ JavaScript Code for Enabling the Pair of Buttons
All of the photos have been added to the class we built for the slider. To go forward, we must press the previous and next buttons. We'll employ javascript.
- First, these buttons need to have an event listener added. When a user selects the previous or next button, the appropriate action should be executed.
- To indicate the picture the viewer should see, we utilized the main class. We must decide which picture will be assigned to this class. Only the picture with the primary class will be shown to the viewer, with all other images being hidden.
- To do this, we'll employ DOM manipulation. We may add the main class to a new picture and delete the main class from an existing image with the use of DOM manipulation.
- Now, we will utilize the previous and next button event listeners to decide which picture should have the main class. We must first collect all of the photographs that are currently in the slideshow. We can see that there is an image div in the parent slider-carousel. Using the DOM's query Selector, we can obtain this. Once we have all of the image divs, we must now choose the appropriate one and give it the main class. The remainder won't have a primary class and will thus be hidden from the user.
An initially zero-pointing variable can be set up to indicate the currently displayed image to the user. This variable will be updated based on whether the user chooses to move to the next or previous image. If the user clicks 'previous' when the variable is 0, it will be updated to (number of images - 1). Conversely, if the user clicks 'next' when the variable is pointing to the last image, its value will be reset to 0.
<!DOCTYPE html>
<html>
<head>
<title>Example for Slider in CSS</title>
<style>
body{
background-color: rgb(76, 76, 76);
margin-top: 50px;
}
.carousel-container {
width: 300px;
height: 300px;
position: relative;
margin: 1 auto;
}
.navigation-buttons .previous {
position: absolute;
z-index: 5;
font-size: 20px;
top: 50%;
left: 10px;
font-weight: 500;
}
.navigation-buttons .next {
right: 10px;
position: absolute;
font-size: 20px;
z-index: 10;
top: 50%;
}
.navigation-buttons .nav-btn {
background: rgba(67, 532, 65, 0);
cursor: pointer;
border-radius: 30%;
width: 20px;
height: 20px;
display: flex;
justify-content: center;
align-items: center;
padding: 3px;
box-shadow: 5px 2px 5px rgba(10, 10, 10, 0.7);
}
.navigation .nav-btn:hover {
background: black;
}
.slider-carousel {
margin-top: 50px;
transition: all 0.2s ease;
}
.slider-carousel img {
width: 100%;
transition: all 0.3s ease;
border:7px solid white;
}
.images {
position: absolute;
display: none;
}
.main {
display: block;
}
.image-text {
position: absolute;
bottom: 0;
width: 100%;
display: flex;
font-size: 30px;
justify-content: center;
align-items: center;
color: rgb(150, 350, 150);
background: rgba(0, 0, 10, 0.5);
height: 60px;
}
</style>
</head>
<body>
<div id="parent-container">
<div class="navigation-buttons">
<div class="previous nav-btn"><</div>
<div class="next nav-btn">></div>
</div>
<div class="slider-carousel">
<div class="images main">
<img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt="flower 1" />
<div class="image-text">Picture 1</div>
</div>
<div class="images">
<img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt="flower 2" />
<div class="image-text">Picture 2</div>
</div>
<div class="images">
<img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt="flower 3" />
<div class="image-text">Picture 3</div>
</div>
</div>
</div>
<script>
const previous = document.querySelector('.previous');
const next = document.querySelector('.next');
const images = document.querySelector('.slider-carousel').children;
const totalImages = images.length;
let currentIndex = 0;
// Event Listeners to previous and next buttons
previous.addEventListener('click', () => {
previousImage()
})
next.addEventListener('click', () => {
nextImage();
})
setInterval(()=>{
nextImage();
},1000);
// Function to go to next image
function nextImage(){
images[currentIndex].classList.remove('main');
if(currentIndex == totalImages-1){
currentIndex = 0;
}
else{
currentIndex++;
}
images[currentIndex].classList.add('main');
}
// Function to go to the previous image
function previousImage(){
images[currentIndex].classList.remove('main');
if(currentIndex == 0){
currentIndex = totalImages-1;
}
else{
currentIndex--;
}
images[currentIndex].classList.add('main');
}
</script>
</body>
</html>
Output: