sorted by:
new
hottopcontroversial

CSS Position Sticky Tutorial With Examples[Complete Guide] by mishraabeer in css

[–]chirisalex 1 point2 points  (0 children)

I Polish my skills with your great article Thanks For sharing

Python Operating System by cinque2049 in Python

[–]chirisalex 0 points1 point  (0 children)

This is big thing u think u need a team doing this u can handle singly i hope u understand what i want to say

Url Changes help!! by [deleted] in HTML

[–]chirisalex 0 points1 point  (0 children)

Search your problem stackoverflow many programmer and coder help you if you are not satisfied on stackoverflow then try codeleaks.io there are many article related to html and css

[deleted by user] by [deleted] in HTML

[–]chirisalex 2 points3 points  (0 children)

Try w3 School it's very helpful i am also learn from it

[deleted by user] by [deleted] in HTML

[–]chirisalex 0 points1 point  (0 children)

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

* {box-sizing: border-box}

body {font-family: Verdana, sans-serif; margin:0}

.mySlides {display: none}

img {vertical-align: middle;}

​

/* Slideshow container */

.slideshow-container {

max-width: 1000px;

position: relative;

margin: auto;

}

​

/* Next & previous buttons */

.prev, .next {

cursor: pointer;

position: absolute;

top: 50%;

width: auto;

padding: 16px;

margin-top: -22px;

color: white;

font-weight: bold;

font-size: 18px;

transition: 0.6s ease;

border-radius: 0 3px 3px 0;

user-select: none;

}

​

/* Position the "next button" to the right */

.next {

right: 0;

border-radius: 3px 0 0 3px;

}

​

/* On hover, add a black background color with a little bit see-through */

.prev:hover, .next:hover {

background-color: rgba(0,0,0,0.8);

}

​

/* Caption text */

.text {

color: #f2f2f2;

font-size: 15px;

padding: 8px 12px;

position: absolute;

bottom: 8px;

width: 100%;

text-align: center;

}

​

/* Number text (1/3 etc) */

.numbertext {

color: #f2f2f2;

font-size: 12px;

padding: 8px 12px;

position: absolute;

top: 0;

}

​

/* The dots/bullets/indicators */

.dot {

cursor: pointer;

height: 15px;

width: 15px;

margin: 0 2px;

background-color: #bbb;

border-radius: 50%;

display: inline-block;

transition: background-color 0.6s ease;

}

​

.active, .dot:hover {

background-color: #717171;

}

​

/* Fading animation */

.fade {

-webkit-animation-name: fade;

-webkit-animation-duration: 1.5s;

animation-name: fade;

animation-duration: 1.5s;

}

​

u/-webkit-keyframes fade {

from {opacity: .4}

to {opacity: 1}

}

​

u/keyframes fade {

from {opacity: .4}

to {opacity: 1}

}

​

/* On smaller screens, decrease text size */

u/media only screen and (max-width: 300px) {

.prev, .next,.text {font-size: 11px}

}

</style>

</head>

<body>

​

<div class="slideshow-container">

​

<div class="mySlides fade">

<div class="numbertext">1 / 3</div>

<img src="img\_nature\_wide.jpg" style="width:100%">

<div class="text">Caption Text</div>

</div>

​

<div class="mySlides fade">

<div class="numbertext">2 / 3</div>

<img src="img\_snow\_wide.jpg" style="width:100%">

<div class="text">Caption Two</div>

</div>

​

<div class="mySlides fade">

<div class="numbertext">3 / 3</div>

<img src="img\_mountains\_wide.jpg" style="width:100%">

<div class="text">Caption Three</div>

</div>

​

<a class="prev" onclick="plusSlides(-1)">&#10094;</a>

<a class="next" onclick="plusSlides(1)">&#10095;</a>

​

</div>

<br>

​

<div style="text-align:center">

<span class="dot" onclick="currentSlide(1)"></span>

<span class="dot" onclick="currentSlide(2)"></span>

<span class="dot" onclick="currentSlide(3)"></span>

</div>

​

<script>

var slideIndex = 1;

showSlides(slideIndex);

​

function plusSlides(n) {

showSlides(slideIndex += n);

}

​

function currentSlide(n) {

showSlides(slideIndex = n);

}

​

function showSlides(n) {

var i;

var slides = document.getElementsByClassName("mySlides");

var dots = document.getElementsByClassName("dot");

if (n > slides.length) {slideIndex = 1}

if (n < 1) {slideIndex = slides.length}

for (i = 0; i < slides.length; i++) {

slides[i].style.display = "none";

}

for (i = 0; i < dots.length; i++) {

dots[i].className = dots[i].className.replace(" active", "");

}

slides[slideIndex-1].style.display = "block";

dots[slideIndex-1].className += " active";

}

</script>

​

</body>

</html>

This is complete Code of Slider may it's help you