Image Slider
An image slider in CSS is a dynamic component that displays a sequence of images in a slideshow format. It utilizes CSS for layout, styling, and animations, typically combined with JavaScript for interactivity. Key features include transitions between images, navigation controls (such as next and previous buttons), and often responsive design to adapt to different screen sizes. This versatile UI element enhances user experience by showcasing multiple images in a compact, engaging manner within web pages.
Example of Image Slider
<![CDATA[
<html>
<head>
<style>
.mySlides {display: none}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container
{
max-width: 600px;
max-height: 300px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev, .next
{
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next
{
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover
{
background-color: rgba(0,0,0,0.8);
}
/* The dots/bullets/indicators */
.dot
{
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover
{
background-color: #717171;
}
/* Fading animation */
.fade
{
-webkit-animation-name: none;
-webkit-animation-duration: 1.5s;
animation-name: none;
animation-duration: 1.5s;
}
@-webkit-keyframes none
{
from {opacity: .4}
to {opacity: 1}
}
@keyframes none
{
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px)
{
.prev, .next,.text {font-size: 11px}
}
</style>
</head>
<body>
<div class="slideshow-container">
<div class="mySlides fade">
<img src="imgs/picgalll1.webp" width="600px" height="300px">
</div>
<div class="mySlides fade">
<img src="imgs/picgalll2.webp" width="600px" height="300px">
</div>
<div class="mySlides fade">
<img src="imgs/picgalll3.webp" width="600px" height="300px">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n)
{
showSlides(slideIndex += n);
}
function currentSlide(n)
{
showSlides(slideIndex = n);
}
function showSlides(n)
{
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++)
{
slides[i].style.display = "none";
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>
</body>
</html>
]]>
OUTPUT:
In this example, HTML and CSS code creates an image slideshow. It uses CSS for styling, including buttons for navigation, dots for slide indicators, and responsive adjustments. JavaScript is employed to handle slide transitions and dot activation. Images are displayed in a container with fading transitions between slides, enhancing user interaction and visual appeal on webpages.
Auto Image Slider
<![CDATA[
<html>
<head>
<style>
.mySlides {display: none}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container
{
max-width: 600px;
max-height: 300px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev, .next
{
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next
{
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover
{
background-color: rgba(0,0,0,0.8);
}
/* The dots/bullets/indicators */
.dot
{
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover
{
background-color: #717171;
}
/* Fading animation */
.fade
{
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade
{
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade
{
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px)
{
.prev, .next,.text {font-size: 11px}
}
</style>
</head>
<body>
<div class="slideshow-container">
<div class="mySlides fade">
<img src="imgs/picgalll1.webp" width="600px" height="300px">
</div>
<div class="mySlides fade">
<img src="imgs/picgalll1.webp" width="600px" height="300px">
</div>
<div class="mySlides fade">
<img src="imgs/picgalll1.webp" width="600px" height="300px">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n)
{
showSlides(slideIndex += n);
}
function currentSlide(n)
{
showSlides(slideIndex = n);
}
function showSlides(n)
{
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++)
{
slides[i].style.display = "none";
}
slideIndex++;
if(slideIndex > slides.length)
{
slideIndex = 1
}
for (i = 0; i < dots.length; i++)
{
dots[i].className = dots[i].className.replace("active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 2000);
}
</script>
</body>
</html>
]]>
Conclusion :
In conclusion, CSS image sliders provide a visually appealing and interactive way to showcase content on webpages. They enhance user experience by allowing seamless transitions between images or information, improving engagement and navigation. Lightweight and customizable with CSS, these sliders offer efficient loading times and responsive design, adapting well to various screen sizes and devices. Overall, CSS image sliders are a versatile tool for creating dynamic and engaging web content.
SHARE
