How to add slide images in webpage
Question
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 :)
3 answers
solution1
1 2017-03-22 08:01:49
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
solution2
1 2017-03-22 08:49:52
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>
solution3
0 2017-03-22 08:01:44
You can try this. It's very simple for making a slide image
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.