🔒 Closed Patulong po paano gumawa ng slider sa webpage design!

[RoShanXian]

Andami ko na po napanood sa youtube paano gumawa ng slider pero ayaw gumana. Any tips po bakit ayaw gumana? Im using notepad++ at css gamit ko po.

 

[9 yr old]

<!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;
        }

Yan ba sinasabi mo paps?

 

[XxLuckyPat-cherxX]

Salamat sa info boss.

 

[RoShanXian]

<!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;
        }

Yan ba sinasabi mo paps?

May javascript po ito?

 

[RoShanXian]

Ganyan po pala. Pwede po magpatulong. Pm po sa facebook hehe

 

[9 yr old]

Ganyan po pala. Pwede po magpatulong. Pm po sa facebook hehe

Wala na ako fb eh matagal na deleted. Dito na yung bagong lungga ko hahaha
Ano pa problema paps?

 

[RoShanXian]

Wala na ako fb eh matagal na deleted. Dito na yung bagong lungga ko hahaha
Ano pa problema paps?

Ayaw po magpalit ng images po. Masyado ata malaki picture ko. Diko maadjust

 

[XxLuckyPat-cherxX]

Ang galing niyo naman.

 

[9 yr old]

Ayaw po magpalit ng images po. Masyado ata malaki picture ko. Diko maadjust

Check mo yung sources ng image make sure sakto ang directory. Baka di mahanap ng browser yung images
Ilagay mo lahat sa isang folder para madali lang mag link

 

[RoShanXian]

Ung transition ata di nag wowork po

 

[harika09]

Merong tutorial sa w3schools check mo baka makatulong sayo yung image slider nila

 

[XxLuckyPat-cherxX]

Salamat sa info.