What's new
By:

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

Status
Not open for further replies.
R

RoShanXian

Elite
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.
 
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>
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?
 
epcraft93 said:
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>
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?
Click to expand...
May javascript po ito?
 
Status
Not open for further replies.

Similar threads

About this Thread

  • 11
    Replies
  • 759
    Views
  • 4
    Participants
Last reply from:
XxLuckyPat-cherxX

New Topics

Trending Topics

Online now

Members online
1,059
Guests online
1,916
Total visitors
2,975

Forum statistics

Threads
2,292,493
Posts
29,077,478
Members
1,209,383
Latest member
Yahoo11
Back
Top