CODEWITHSUNDEEP
javascripthtmlcssimageslider
Syed Fahad
Syed Fahad

Reputation: 11

How to add slide images in webpage

I am working on a site design and I am also a newbie in this. I want to add sliding images in my webpage using HTML and CSS only because I am not familiar with JavaScript. Please give your suggestion to add image slider. thanks in advance :)

Upvotes: 1

Views: 1579

Answers (3)

Dierig Patrick
Dierig Patrick

Reputation: 186

This is a HTML and CSS Only Slider!

 .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;
        }
<!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="http://labs.qnimate.com/slider/1.jpg" class="slider-image" />
            <img src="http://labs.qnimate.com/slider/2.jpg" class="slider-image" />
            <img src="http://labs.qnimate.com/slider/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>

Upvotes: 1

KeyBi
KeyBi

Reputation: 140

Welcome to the jungle of web development =D

The easiest and maybe the best way, to do so, is to use Bootstrap. Bootstrap, in case if you don't know, its a "grid" that holds your webpage fixed. It's good because of it responsivness and easy configurations... ah, and its free =)

Also they have a great javascript add-ons, as carousel, check it out =) http://getbootstrap.com/javascript/#carousel

If you want to do all by yourself, so the easiest way that I would suggest you, as I don't know your skills, is to load all images at once in a row nested in a DIV, something like:

Then in css you can give them all the same width and height, for example 500px width and 500px height.

Then, depending if you want it to slide up, or down, you can control it position in a div with javascript, by time or on click. The div should have the css overflow: hidden;

But, it has it problems, for example if you will make resizes and so on, so as my teacher always says, there is no need to discover the wheel if it already been discovered. =)

Hope it helps =D

Upvotes: 1

A.A Noman
A.A Noman

Reputation: 5270

You can try this. It's very simple for making a slide image

Demo

Upvotes: 0

Related Questions