How to Create Slide Show with HTML and CSS
How to Create Slide Show with HTML and CSS
How to Create an Image
Slider or Slideshow
Image Slider or Image Carousel is a way to display
multiple website images. Fancy pictures can attract a lot of visitors to the
website.
Usually, image sliders are created with the help of
JavaScript, but with the release of CSS3, this can also be done by using pure
CSS3. In this article, we will learn how the slideshow effect can be created
keeping the minimum code of CSS, and in the second part of the article, we will
consider the ways of making image sliders with JavaScript. So, let’s come to
their discussion below.
Creating Image Sliders
Using Only CSS3¶
Probably, you have seen heavy sliders based on
JavaScript. Such sliders make the webpage slower and also fail if the user has
disabled the interpretation of JavaScript in the browser. Not using these
sliders is one solution to this problem, but how would you implement a slider
without JavaScript? Let's see a proper slider working without JavaScript.
<!DOCTYPE html>
<html>
<head>
<title>Slideshow
Images</title>
<style>
.slider {
width: 500px;
height: 300px;
background-color:
yellow;
margin-left: auto;
margin-right:
auto;
margin-top: 0px;
text-align:
center;
overflow: hidden;
}
.image-container {
width: 1500px;
background-color:
pink;
height: 300px;
clear: both;
position:
relative;
-webkit-transition: left 2s;
-moz-transition:
left 2s;
-o-transition:
left 2s;
transition: left
2s;
}
.slide {
float: left;
margin: 0px;
padding: 0px;
position:
relative;
}
#slide-1:target ~
.image-container {
left: 0px;
}
#slide-2:target ~
.image-container {
left: -500px;
}
#slide-3:target ~
.image-container {
left: -1000px;
}
.buttons {
position:
relative;
top: -20px;
}
.buttons a {
display:
inline-block;
height: 15px;
width: 15px;
border-radius:
50px;
background-color:
lightgreen;
}
</style>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Image
Slider</title>
<style>
body {
margin: 10px auto;
text-align:
center;
}
.content {
max-width: 800px;
text-align: left;
margin: auto;
}
.simple-ss {
width: 800px;
height: 250px;
background-color:
#eeeeee;
margin: auto;
background-image:
url("https://imgur.com/download/OtK7XDW");
animation-name:
slide;
animation-duration: 10s;
animation-direction: normal;
animation-timing-function: ease;
animation-iteration-count:
infinite;
}
@keyframes slide {
0% {
background-position: 0 0;
}
16.66% {
background-position: 0 0;
}
33.32% {
background-position: -800px 0;
}
49.98% {
background-position: -800px 0;
}
66.64% {
background-position: -1600px 0;
}
83.30% {
background-position: -1600px 0;
}
100% {
background-position: 0 0;
}
}
</style>
</head>
<body>
This is a
proof-of-concept for a slideshow that does not use any Javascript. It doesn't
have pages or left/right buttons etc.
</body>
</html>
Example of making background images act like sliders:
<!DOCTYPE html>
<html>
<head>
<title>Image
Slider</title>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family:
"Helvetica", sans-serif;
}
img {
max-width: 100%;
}
.slider-container
{
height: 100%;
width: 100%;
position:
relative;
overflow: hidden;
text-align:
center;
}
.menu {
position:
absolute;
left: 0;
z-index: 900;
width: 100%;
bottom: 0;
}
.menu label {
cursor: pointer;
display:
inline-block;
width: 16px;
height: 16px;
background: #fff;
border-radius:
50px;
margin: 0 0.2em
1em;
}
.menu label:hover,
.menu label:focus
{
background:
#1c87c9;
}
.slide {
width: 100%;
height: 100%;
position:
absolute;
top: 0;
left: 100%;
z-index: 10;
padding: 8em 1em
0;
background-size:
cover;
background-position: 50% 50%;
transition: left
0s 0.75s;
}
[id^="slide"]:checked
+ .slide {
left: 0;
z-index: 100;
transition: left
0.65s ease-out;
}
.slide-1 {
background-image:
url("/uploads/media/default/0001/03/5bfad15a7fd24d448a48605baf52655a5bbe5a71.jpeg");
}
.slide-2 {
background-image:
url("/uploads/media/default/0001/03/66cf5094908491e69d8187bcf934050a4800b37f.jpeg");
}
.slide-3 {
background-image:
url("/uploads/media/default/0001/03/b87b29b6ca67b64b76651037dc16f5a46e73b42a.jpeg");
}
</style>
</head>
<body>
<input
id="slide-dot-1" type="radio" name="slides"
checked>
<input
id="slide-dot-2" type="radio"
name="slides">
<input
id="slide-dot-3" type="radio"
name="slides">
</body>
</html>
Creating Slides with
Jumping Links¶
A slider usually has a little UI to jump to a particular
slide, so let's also do that semantically, with anchor links jumping to the
correct slide.
Create your jumping links using the anchor tag. Add a bit
of styling and get some buttons.
To make sure that you will get a smooth sliding effect on
both desktop and mobile, add the scroll-behavior property with its
"smooth" value. Then, use the :target pseudo-class for something
special to the "active" slide. Clicking on one of the slide navigation
buttons changes the URL to the # hash, and that's when :target comes into
effect.
<!DOCTYPE html>
<html>
<head>
<title>Image
Slider</title>
<style>
* {
box-sizing:
border-box;
}
.slider {
width: 300px;
text-align:
center;
overflow: hidden;
}
.slides {
display: flex;
overflow-x: auto;
scroll-snap-type:
x mandatory;
scroll-behavior:
smooth;
-webkit-overflow-scrolling: touch;
}
.slides::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.slides::-webkit-scrollbar-thumb
{
background: #666;
border-radius:
10px;
}
.slides::-webkit-scrollbar-track {
background:
transparent;
}
.slides > div {
scroll-snap-align:
start;
flex-shrink: 0;
width: 300px;
height: 300px;
margin-right:
50px;
border-radius:
10px;
background: #eee;
transform-origin:
center center;
transform:
scale(1);
transition:
transform 0.5s;
position:
relative;
display: flex;
justify-content:
center;
align-items:
center;
font-size: 100px;
}
.slider > a {
display:
inline-flex;
width: 1.5rem;
height: 1.5rem;
background: white;
text-decoration:
none;
align-items:
center;
justify-content:
center;
border-radius:
50%;
margin: 0 0 0.5rem
0;
position:
relative;
}
.slider >
a:active {
top: 1px;
color: #1c87c9;
}
.slider >
a:focus {
background: #eee;
}
/* Don't need
button navigation */
@supports
(scroll-snap-type) {
.slider > a {
display: none;
}
}
html,
body {
height: 100%;
overflow: hidden;
}
body {
display: flex;
align-items:
center;
justify-content:
center;
background:
linear-gradient(to right, #1c87c9, #ffcc00);
font-family: 'Ropa
Sans', sans-serif;
}
</style>
</head>
<body>
1
2
3
4
5
1
2
3
4
5
</body>
</html>
No comments: