Introduction
In the world of web development, by offering an attractive and interactive way of luring users’ attention, sliders have started dominating lots of content showcasing purposes. Today a very unique Bouncing Image Slider would be created such that all the moving images would act as perfect sliders with the dynamic duo viz. HTML and CSS. This slider elegantly presents a series of images and also applies a pleasant bounce effect when the user interacts with it.
Requirements
Before we jump into the coding wizardry, take a minute to get yourself familiar with HTML and CSS. Merely having a basic understanding of the structuring of HTML and styling it by using CSS is all you need to have a more pleasant reading of this tutorial as we go about building this awe-inspiring image slider.
Preparing the HTML Structure
Let’s begin with the HTML structure of unique Bouncing Image Slider Using HTML & CSS. We will create a container that will hold all our images as well as a few elements required for slider functionality.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cybercript - think creative and make creative</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./style.css">
<link rel="shortcut icon" href="images/fav icon.png" type="image/x-icon">
</head>
<body>
<!-- created by - cybercript || For more visit : cybercript.in -->
<fieldset>
<label style="--_img: url('images/slider-1.jpg')">
<input type="radio" name="images" value="Fiddle Leaf">
</label>
<label style="--_img: url('images/slider-2.jpg')">
<input type="radio" name="images" value="Pink Princess">
</label>
<label style="--_img: url('images/slider-3.jpg')">
<input type="radio" name="images" value="Monstera" checked>
</label>
<label style="--_img: url('images/slider-4.jpg')">
<input type="radio" name="images" value="Pothos">
</label>
<label style="--_img: url('images/slider-5.jpg')">
<input type="radio" name="images" value="Rubber Tree">
</label>
</fieldset>
<!-- created by - cybercript || For more visit : cybercript.in -->
</body>
</html>So now let’s style our slider. We will set up the basic structure of it and add transition properties that will give our images a bouncing effect.
@import "https://unpkg.com/open-props" layer(design.system);
/* <!-- created by - cybercript || For more visit : cybercript.in --> */
@layer demo {
fieldset {
grid-template-columns:
var(--col-1, 1fr)
var(--col-2, 1fr)
var(--col-3, 1fr)
var(--col-4, 1fr)
var(--col-5, 1fr)
;
@media (prefers-reduced-motion: no-preference) {
transition: grid-template-columns 2s var(--ease-spring-5);
}
&:has(label:nth-child(1) > input:checked) {
--col-1: 5fr;
--col-2: 3fr;
}
&:has(label:nth-child(2) > input:checked) {
--col-1: 2fr;
--col-2: 5fr;
--col-3: 2fr;
}
&:has(label:nth-child(3) > input:checked) {
--col-2: 2fr;
--col-3: 5fr;
--col-4: 2fr;
}
&:has(label:nth-child(4) > input:checked) {
--col-3: 2fr;
--col-4: 5fr;
--col-5: 2fr;
}
&:has(label:nth-child(5) > input:checked) {
--col-4: 3fr;
--col-5: 5fr;
}
> label {
background-image: var(--_img);
background-position: center;
background-size: auto 125%;
}
}
}
@layer demo.support {
html {
background: var(--gradient-9);
block-size: 100%;
}
/* <!-- created by - cybercript || For more visit : cybercript.in --> */
body {
min-block-size: 100%;
display: grid;
place-content: center;
padding: var(--size-5);
gap: var(--size-5);
background: #2f2f2f;
}
fieldset {
inline-size: 80vw;
display: grid;
grid-auto-flow: column;
grid-template-rows: 50vh;
gap: var(--size-3);
border: none;
> label {
cursor: pointer;
border-radius: var(--radius-4);
&:focus-within {
outline: 1px solid green;
outline-offset: 5px;
}
> input {
opacity: 0;
}
}
}
}
/* <!-- created by - cybercript || For more visit : cybercript.in --> */Conclusion
And there you go – a Bouncing Image Slider built with HTML and CSS, and just a hint of JavaScript magic. You can modify the styles, extend them with new features, or use them in your projects to provide stylish visuals for the users.
Happy coding!
