Scribd
Upload
19 views4 pages

Slideshow

The document contains code for a slideshow gallery with 6 images that can be navigated through with next and previous buttons. Thumbnail images are also displayed that when clicked will change the current slide.

Uploaded by

cheocana03
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
19 views4 pages

Slideshow

The document contains code for a slideshow gallery with 6 images that can be navigated through with next and previous buttons. Thumbnail images are also displayed that when clicked will change the current slide.

Uploaded by

cheocana03
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

<!

DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial;
margin: 0;
}

* {
box-sizing: border-box;
}

img {
vertical-align: middle;
}

/* Position the image container (needed to position the left and right arrows) */
.container {
position: relative;
}

/* Hide the images by default */


.mySlides {
display: none;
}

/* Add a pointer when hovering over the thumbnail images */


.cursor {
cursor: pointer;
}

/* Next & previous buttons */


.prev,
.next {
cursor: pointer;
position: absolute;
top: 40%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-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);
}

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


.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}

/* Container for image text */


.caption-container {
text-align: center;
background-color: #222;
padding: 2px 16px;
color: white;
}

.row:after {
content: "";
display: table;
clear: both;
}

/* Six columns side by side */


.column {
float: left;
width: 16.66%;
}

/* Add a transparency effect for thumnbail images */


.demo {
opacity: 0.6;
}

.active,
.demo:hover {
opacity: 1;
}
</style>
<body>

<h2 style="text-align:center">Slideshow Gallery</h2>

<div class="container">
<div class="mySlides">
<div class="numbertext">1 / 6</div>
<img src="img_woods_wide.jpg" style="width:100%">
</div>

<div class="mySlides">
<div class="numbertext">2 / 6</div>
<img src="img_5terre_wide.jpg" style="width:100%">
</div>

<div class="mySlides">
<div class="numbertext">3 / 6</div>
<img src="img_mountains_wide.jpg" style="width:100%">
</div>

<div class="mySlides">
<div class="numbertext">4 / 6</div>
<img src="img_lights_wide.jpg" style="width:100%">
</div>

<div class="mySlides">
<div class="numbertext">5 / 6</div>
<img src="img_nature_wide.jpg" style="width:100%">
</div>

<div class="mySlides">
<div class="numbertext">6 / 6</div>
<img src="img_snow_wide.jpg" style="width:100%">
</div>

<a class="prev" onclick="plusSlides(-1)">❮</a>


<a class="next" onclick="plusSlides(1)">❯</a>

<div class="caption-container">
<p id="caption"></p>
</div>

<div class="row">
<div class="column">
<img class="demo cursor" src="img_woods.jpg" style="width:100%"
onclick="currentSlide(1)" alt="The Woods">
</div>
<div class="column">
<img class="demo cursor" src="img_5terre.jpg" style="width:100%"
onclick="currentSlide(2)" alt="Cinque Terre">
</div>
<div class="column">
<img class="demo cursor" src="img_mountains.jpg" style="width:100%"
onclick="currentSlide(3)" alt="Mountains and fjords">
</div>
<div class="column">
<img class="demo cursor" src="img_lights.jpg" style="width:100%"
onclick="currentSlide(4)" alt="Northern Lights">
</div>
<div class="column">
<img class="demo cursor" src="img_nature.jpg" style="width:100%"
onclick="currentSlide(5)" alt="Nature and sunrise">
</div>
<div class="column">
<img class="demo cursor" src="img_snow.jpg" style="width:100%"
onclick="currentSlide(6)" alt="Snowy Mountains">
</div>
</div>
</div>

<script>
let slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}

function showSlides(n) {
let i;
let slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("demo");
let captionText = document.getElementById("caption");
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";
captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>

</body>
</html>

You might also like