Image Slider | HTML CSS Only!!

preview_player
Показать описание
🔻Image Slider by only click on image with ONLY html & css🔻

If you enjoyed the video please leave a
**
👍 LIKE 👍 & ♥️ Subscribe ♥️ the channel for more video like this.
**

and comment down below any question you have 👍

you can also share this video with your friend by this link :
  1. Byte Masters
  2. html
  3. css
  4. js
  5. design
  6. frontend
Рекомендации по теме
HTML and CSS 0:07:41

HTML and CSS Project Tutorial: Pure CSS Image Slider

Image Slider - 0:23:15

Image Slider - With Auto-play & Manual Navigation Buttons - Using CSS, HTML & Javascript

How to create 0:15:36

How to create an Image Slider in HTML CSS and JavaScript Step by Step | Creative JS Coder.

Create A Slider 0:25:01

Create A Slider Crazy Effects Using HTML CSS And Javascript

Simple HTML & 0:08:37

Simple HTML & CSS Image Slider - No jQuery or JavaScript

Pure CSS Image 0:07:39

Pure CSS Image Slider Using Only HTML & CSS

Create Crazy 3D 0:14:07

Create Crazy 3D Image Slider Effects Using CSS Only

Responsive Image Slider 0:15:44

Responsive Image Slider | With Manual Button & Auto-play - HTML CSS Javascript

How To Make 0:07:37

How To Make a Image Slider With HTML & CSS | Easy Tutorial (2022)

Auto Image Slideshow 0:05:56

Auto Image Slideshow | HTML & CSS Tutorial | With Source Code

Pure CSS Image 0:05:43

Pure CSS Image Slider | Slideshow for Website | HTML CSS Carousel Tutorial

Fully Responsive Animated 0:17:56

Fully Responsive Animated Image Slider Carousel using HTML CSS and JavaScript

How to make 0:15:51

How to make Image Slider with HTML snd CSS | Image Slide on Click

Image Slider - 0:18:38

Image Slider - With Auto-play & Manual Navigation Buttons - Using CSS, HTML & Javascript

Play and Pause 0:13:24

Play and Pause in Infinite Slider with CSS Only

Auto Image Slideshow 0:07:03

Auto Image Slideshow using HTML and CSS

How To Make 0:11:55

How To Make Image Slider Using HTML CSS JavaScript

jQuery Image Slider 0:12:37

jQuery Image Slider for Beginners: HTML and CSS Included | HTML CSS JS only

How To Create 0:18:43

How To Create Responsive Image Slider In HTML CSS & Javascript

How To Make 0:25:57

How To Make Image Slider Using HTML CSS and JavaScript

Image Slider html 0:11:15

Image Slider html and css With Auto play & Manual Navigation Button | owl carousel

How to Create 0:14:12

How to Create Image Slider in HTML, CSS & JS - Step by Step | JavaScript Projects

Create A Draggable 0:27:30

Create A Draggable Image Slider in HTML CSS & JavaScript | Mobile Friendly Slider in JavaScript

Create Responsive Image 0:25:25

Create Responsive Image Slider in HTML CSS and JavaScript | Image Slider HTML CSS & JavaScript

Комментарии
Автор

This is what I copied from the video, in case anyone needs the code:
(I added only three photos, you get the point.)

<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slider Sandbox</title>
<style>
body{
display: flex;
align-items: center;
width: 100%;
height: 100vh;
background-color: black;
overflow: hidden;
}

.slide-container {
width: 100%;
height:85vh;
display: flex;
align-items: center;
overflow: hidden;
background-color: rgb(110, 110, 250);
}

.image-slider{
width: 100%;
height: 600px;
position: absolute;
left: 0;
display: flex;
justify-content: center;
align-items: center;
transition: 1s;
}

.slides-div {
display: flex;
align-items: center;
justify-content: center;
margin: 0 30px;
}

.img{
position: relative;
width: 240px;
height: 370px;
transition: 0.5s;
}

.button {
position: absolute;
width: 240px;
height: 370px;
transition: 0.5s;
background-color: rgba(67, 67, 151, 0.2);
}

#slider-span1:target ~ .image-slider #img1,
#slider-span1:target ~.image-slider #button-1{
width:380px;
height: 585px;
background-color: transparent;
}
#slider-span2:target ~ .image-slider #img2,
#slider-span2:target ~.image-slider #button-2{
width:380px;
height: 585px;
background-color: transparent;
}
#slider-span3:target ~ .image-slider #img3,
#slider-span3:target ~.image-slider #button-3{
width:380px;
height: 585px;
background-color: transparent;
}

#slider-span1:target ~.image-slider{
left:20%;
}
#slider-span2:target ~.image-slider{
left:0%;
}
#slider-span3:target ~.image-slider{
left:-20%;
}
</style>
</head>
<body>
<div class="slide-container">
<span class="slider-span" id="slider-span1"></span>
<span class="slider-span" id="slider-span2"></span>
<span class="slider-span" id="slider-span3"></span>

<div class="image-slider">
<div class="slides-div" id="slide-1">
<img src="images/headset.jpg" alt="" class="img" id="img1">
<a href="#slider-span1" class="button" id="button-1"></a>
</div>
<div class="slides-div" id="slide-2">
<img src="images/headset.jpg" alt="" class="img" id="img2">
<a href="#slider-span2" class="button" id="button-2"></a>
</div>
<div class="slides-div" id="slide-3">
<img src="images/headset.jpg" alt="" class="img" id="img3">
<a href="#slider-span3" class="button" id="button-3"></a>
</div>
</div>
</div>
</body>
</html>

swun
Автор

Maybe you already know, but for the next time with this symbol ($) you can put a number for each item (1, 2, 3...). For example .item-$*7 will create 7 div and their classes will have consecutive numbers
And thanks for the video.

JesusDavid-bhrg
Автор

This amazing! I just have one question, how would you set this up vertically? Like the photos would be stacking up on top of each other rather than besides each other?

mddivm
Автор

Nice. How can I add some descriptions for every picture at their bottom?

danielmalyuta
Автор

i have another <div> above the slide show and its not working togethe how can i run all of it at the same time and the same page

وفاء-ثي
Автор

¿Hay alguna manera de hacerlo infinito sin js? que al llegar al final se reinicie y lo contrario

wilkerpachecoperez
Автор

Can you share source code please? Can't find where the issue is...

studywith-grace
Автор

How would I do the image positioning if I had 15 images?

Fkamynk
Автор

Can you help me?
If I want to make a version with 30 pictures, how do I need to change the percentage between the all of them in the *image position? (When I try, some of the pictures disappear, because they move too much or too little)

20% or 25% changes don't work anymore.

tuomosalomaa
Автор

it can't be dynamic
How can i do with so much data??

kyawkokooo
Автор

How to make it work on drag as it work here ?!

awsradwan
Автор

My screen jumps down so that the images clip halfway through the top of the screen. How can I fix this?

beryl.pretorius
Автор

J’ai utilisé ce code, qui fonctionne super bien, mais j’aimerai rendre les images cliquables sauf qu’il y a déjà un <a> href “”</a>, si qqn peut m’aider je suis preneur

legrandetlaffreux
Автор

how can i add 11 0r 10 images?
please help

linsmolantony
Автор

chắc mình làm sai chỗ nào rồi nó khum chạy huhu

thungangothi
Автор

Where is your Code bro ? Please share it :v

chanh
Автор

bro i need the source code can you help?

harmanarora
Автор

i need source code emergancy pleaseeee

enooo
Автор

no sirve, pura perdida de tiempo. no se ve bien el codigo...

JustoLux
Автор

Yoooo there are like 15 comments and 18 of those comments are asking for the source code and this dude just ignores them lol ahhaha clown #sourceCode?

dryhail