- Joined
- Jul 6, 2016
- Posts
- 984
- Reaction
- 1,425
- Points
- 544
Andami ko na po napanood sa YøùTùbé paano gumawa ng slider pero ayaw gumana. Any tips po bakit ayaw gumana? Im using notepad++ at css gamit ko po.
<!doctype html>
<html>
<head>
<title>QNimate Slider</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="slider-holder">
<span id="slider-image-1"></span>
<span id="slider-image-2"></span>
<span id="slider-image-3"></span>
<div class="image-holder">
<img src="1.jpg" class="slider-image" />
<img src="2.jpg" class="slider-image" />
<img src="3.jpg" class="slider-image" />
</div>
<div class="button-holder">
<a href="#slider-image-1" class="slider-change"></a>
<a href="#slider-image-2" class="slider-change"></a>
<a href="#slider-image-3" class="slider-change"></a>
</div>
</div>
</body>
</html>
.slider-holder
{
width: 800px;
height: 400px;
background-color: yellow;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
text-align: center;
overflow: hidden;
}
.image-holder
{
width: 2400px;
background-color: red;
height: 400px;
clear: both;
position: relative;
-webkit-transition: left 2s;
-moz-transition: left 2s;
-o-transition: left 2s;
transition: left 2s;
}
.slider-image
{
float: left;
margin: 0px;
padding: 0px;
position: relative;
}
#slider-image-1:target ~ .image-holder
{
left: 0px;
}
#slider-image-2:target ~ .image-holder
{
left: -800px;
}
#slider-image-3:target ~ .image-holder
{
left: -1600px;
}
.button-holder
{
position: relative;
top: -20px;
}
.slider-change
{
display: inline-block;
height: 10px;
width: 10px;
border-radius: 5px;
background-color: brown;
}
May javascript po ito?HTML:<!doctype html> <html> <head> <title>QNimate Slider</title> <link href="style.css" type="text/css" rel="stylesheet"> </head> <body> <div class="slider-holder"> <span id="slider-image-1"></span> <span id="slider-image-2"></span> <span id="slider-image-3"></span> <div class="image-holder"> <img src="1.jpg" class="slider-image" /> <img src="2.jpg" class="slider-image" /> <img src="3.jpg" class="slider-image" /> </div> <div class="button-holder"> <a href="#slider-image-1" class="slider-change"></a> <a href="#slider-image-2" class="slider-change"></a> <a href="#slider-image-3" class="slider-change"></a> </div> </div> </body> </html>
Yan ba sinasabi mo paps?HTML:.slider-holder { width: 800px; height: 400px; background-color: yellow; margin-left: auto; margin-right: auto; margin-top: 0px; text-align: center; overflow: hidden; } .image-holder { width: 2400px; background-color: red; height: 400px; clear: both; position: relative; -webkit-transition: left 2s; -moz-transition: left 2s; -o-transition: left 2s; transition: left 2s; } .slider-image { float: left; margin: 0px; padding: 0px; position: relative; } #slider-image-1:target ~ .image-holder { left: 0px; } #slider-image-2:target ~ .image-holder { left: -800px; } #slider-image-3:target ~ .image-holder { left: -1600px; } .button-holder { position: relative; top: -20px; } .slider-change { display: inline-block; height: 10px; width: 10px; border-radius: 5px; background-color: brown; }
Wala na ako fb eh matagal na deleted. Dito na yung bagong lungga ko hahahaGanyan po pala. Pwede po magpatulong. Pm po sa facebook hehe
Ayaw po magpalit ng images po. Masyado ata malaki picture ko. Diko maadjustWala na ako fb eh matagal na deleted. Dito na yung bagong lungga ko hahaha
Ano pa problema paps?
Check mo yung sources ng image make sure sakto ang directory. Baka di mahanap ng browser yung imagesAyaw po magpalit ng images po. Masyado ata malaki picture ko. Diko maadjust