Merge pull request #44 from mzubair21/pr2

Added Slider in JS
gdscmuet · Oct 22, 2021 · 6aed409 · 6aed409
2 parents 57c2688 + fbe0916
commit 6aed409
Show file tree

Hide file tree

Showing 6 changed files with 89 additions and 0 deletions.
diff --git a/Projects/Slider/1.jpeg b/Projects/Slider/1.jpeg
diff --git a/Projects/Slider/2.jpeg b/Projects/Slider/2.jpeg
diff --git a/Projects/Slider/3.jpeg b/Projects/Slider/3.jpeg
diff --git a/Projects/Slider/4.jpeg b/Projects/Slider/4.jpeg
diff --git a/Projects/Slider/index.html b/Projects/Slider/index.html
@@ -0,0 +1,54 @@
+<html>
+
+<head>
+<link rel="stylesheet" type="text/css" href="style.css">
+</head>
+<body>
+<div class="container2">
+<img class="img" src="2.jpeg">
+<img class="img" src="3.jpeg">
+<img class="img" src="4.jpeg">
+<button id="btn" onclick="btn(-1)"  class="l">&#10094;</button>
+<button id="btn" onclick="btn(1)" class="r">&#10095;</button>
+</div>
+<script>
+var index=0;
+
+slide(index);
+function slide(image)
+{var all=document.getElementsByClassName("img");
+ var i;  
+ if(image>=all.length)
+    {index=0;}
+ if(image<0)
+     {index=all.length-1}
+
+ for(i=0;i<all.length;i++)
+    {
+        all[i].style.display="none";
+      }
+
+    all[index].style.display="block";
+ }
+
+ function auto(){
+     setTimeout(auto,5000);   ///set miliseconds here.
+
+     //forward
+     index=index+1;
+     slide(index);
+     ///
+ }    
+auto();
+
+function btn(n){
+
+   index=index+n;
+    slide(index);
+
+    }
+
+</script>  
+
+</body>
+</html>
diff --git a/Projects/Slider/style.css b/Projects/Slider/style.css
@@ -0,0 +1,35 @@
+.container2{
+    width: 60%;
+    height: 60%;
+   border: 3px solid black;
+    position:relative;
+    top:18%;
+    margin: 0% auto 100px auto;
+    top:300;
+
+}
+.container2>img{
+    width:100%;
+    height:100%;
+    position: absolute;
+    box-shadow: 0px 0px 25px 2px black;
+
+}
+#btn{
+    position: absolute;
+    top:50%;
+    background-color: rgba(255,255,255,0.1);
+    color:white;
+    border:none;
+    height: 8%;
+    width:30px;
+}
+#btn:hover{
+   opacity: 1;
+background-color: black;
+}
+#btn.r{
+position: relative;
+float:right;  
+}
+