Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <title>Slider</title>
- <link rel="stylesheet" href="style.css"/>
- <link rel="stylesheet" href="fontawesome/css/font-awesome.css"/>
- <script style="text/javascript" src="javakl.js"></script>
- </head>
- <body>
- <div id="container">
- <p id="pic"></p>
- <div id="sliderdiv">
- <img src="images/Chrysanthemum.jpg" height="400px" width="900px" id="imagethmb"/>
- <div id="buttons">
- <a href="#" onclick="startslide(1)" > > </a>
- <img src="images/next.png" onclick="startslide(1)" height="70px" width="70px" class="next"\/>
- <img src="images/previous.png" onclick="startslide(-1)" height="70px" width="70px" class="previous"/>
- </div>
- <div id="caption">
- <p id="cap">caption</p>
- </div>
- </div>
- </div>
- </body>
- </html>
- Javascript Source Code
- var images = [
- "images/Chrysanthemum.jpg",
- "images/Desert.jpg",
- "images/Hydrangeas.jpg",
- "images/Jellyfish.jpg",
- "images/Koala.jpg"
- ];
- var caption = [
- "caption 1",
- "caption 2",
- "caption 3",
- "caption 4",
- "caption 5"
- ];
- var imagePos = 0;
- var imagesLenth = images.length - 1;
- function startslide(x){
- imagePos += x;
- if(imagePos > imagesLenth) {
- imagePos =0;
- }
- if(imagePos < 0) {
- imagePos = imagesLenth;
- }
- document.getElementById('imagethmb').src = images[imagePos];
- document.getElementById('cap').innerHTML = caption[imagePos];
- }
- setInterval(function startslide(){
- imagePos ++;
- if(imagePos > imagesLenth) {
- imagePos =0;
- }
- if(imagePos < 0) {
- imagePos = imagesLenth;
- }
- document.getElementById('imagethmb').src = images[imagePos];
- document.getElementById('cap').innerHTML = caption[imagePos];
- },1000);
- Css
- Source Code
- *{
- padding: 0px;
- margin: 0px;
- }
- #container {
- width:900px;
- height: auto;
- margin-left: auto;
- margin-right: auto;
- }
- #sliderdiv {
- height: 400px;
- width: 100%;
- position:relative;
- }
- #left {
- height:80px;
- width:80px;
- }
- #buttons {
- height:100px;
- width:100%;
- position:absolute;
- top:28%;
- }
- .next {
- float:right;
- line-height:100px;
- }
- .previous {
- float:left;
- vertical-align:center;
- }
- #caption {
- height:100px;
- width:100%;
- background-color:black;
- position:absolute;
- opacity:0.5;
- bottom:0;
- color:white;
- }
- // video tutorial https://www.youtube.com/watch?v=f-nUv4HPS8Q
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement