css slider

<!--automatic slidshow-->

<!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;}
.mySlides {display: none;}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* 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 {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}
</style>
</head>
<body>

<h2>Automatic Slideshow</h2>
<p>Change image every 2 seconds:</p>

<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>

</div>
<br>

<div style="text-align:center">
  <span class="dot"></span> 
  <span class="dot"></span> 
  <span class="dot"></span> 
</div>

<script>
var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}    
  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";
  setTimeout(showSlides, 2000); // Change image every 2 seconds
}
</script>

</body>
</html>

View another examples Add Own solution

4.22

I.C. Rivero 95 points

                                    &lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;title&gt;W3.CSS&lt;/title&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://www.w3schools.com/w3css/4/w3.css&quot;&gt;
&lt;style&gt;
.mySlides {display:none;}
&lt;/style&gt;
&lt;body&gt;

&lt;h2 class=&quot;w3-center&quot;&gt;Manual Slideshow&lt;/h2&gt;

&lt;div class=&quot;w3-content w3-display-container&quot;&gt;
  &lt;img class=&quot;mySlides&quot; src=&quot;img_snowtops.jpg&quot; style=&quot;width:100%&quot;&gt;
  &lt;img class=&quot;mySlides&quot; src=&quot;img_lights.jpg&quot; style=&quot;width:100%&quot;&gt;
  &lt;img class=&quot;mySlides&quot; src=&quot;img_mountains.jpg&quot; style=&quot;width:100%&quot;&gt;
  &lt;img class=&quot;mySlides&quot; src=&quot;img_forest.jpg&quot; style=&quot;width:100%&quot;&gt;

  &lt;button class=&quot;w3-button w3-black w3-display-left&quot; onclick=&quot;plusDivs(-1)&quot;&gt;&amp;#10094;&lt;/button&gt;
  &lt;button class=&quot;w3-button w3-black w3-display-right&quot; onclick=&quot;plusDivs(1)&quot;&gt;&amp;#10095;&lt;/button&gt;
&lt;/div&gt;

&lt;script&gt;
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName(&quot;mySlides&quot;);
  if (n &gt; x.length) {slideIndex = 1}
  if (n &lt; 1) {slideIndex = x.length}
  for (i = 0; i &lt; x.length; i++) {
    x[i].style.display = &quot;none&quot;;  
  }
  x[slideIndex-1].style.display = &quot;block&quot;;  
}
&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;

Thank you! 9

4.22 (9 Votes)

Juan P 90 points

                                    best slide show in html,css whit position

Thank you! 5

4 (5 Votes)

Felicia L. Jones 100 points

                                    
&lt;input className=&quot;newpost-rating-slider&quot; type=&quot;range&quot; name=&quot;rangeInput&quot; 
min=&quot;0&quot; max=&quot;5&quot; onChange={handleSliderRating} /&gt;

&lt;span className=&quot;slider-rating-field&quot;&gt;0/5&lt;/span&gt;



const handleSliderRating = () =&gt; {

        var curVal = document.querySelector('.newpost-rating-slider').value;
        var sliderRatingEle = document.querySelector('.slider-rating-field');

        sliderRatingEle.textContent =   curVal.toString() + &quot;/5&quot;;
    
    }

Thank you! 5

4 (5 Votes)

Are there any code examples left?

Find Add Code snippet

New code examples in category CSS

CSS 2022-03-27 22:50:16 make text bigger html5
CSS 2022-03-27 21:40:08 move list item to left css
CSS 2022-03-27 21:35:05 reduce image size css
CSS 2022-03-27 21:30:21 css image background center horizontally in div
CSS 2022-03-27 21:05:02 css button styles
CSS 2022-03-27 18:50:09 compass font awesome
CSS 2022-03-27 18:50:06 modal in materialize css
CSS 2022-03-27 17:55:12 box round corner css
CSS 2022-03-27 17:45:12 jquery add css
CSS 2022-03-27 17:45:01 css image fit in div with aspect ratio

Create a Free Account

Unlock the power of data and AI by diving into Python, ChatGPT, SQL, Power BI, and beyond.

Develop soft skills on BrainApps

Complete the IQ Test

Relative searches

css slider

Welcome Back!

Create a Free Account