You need to create a slideshow of 3 images with 4 buttons - First, Last, Previou
ID: 3719480 • Letter: Y
Question
You need to create a slideshow of 3 images with 4 buttons - First, Last, Previous, Next
If you are in slide2, first button will link to slide 1, next button will link to slide3, previous button will link to slide1, last button will link to slide3
If you are in slide3, first is slide1, next is slide 3, previous is slide2, last is slide 3
If you are in slide 1, first is slide 1, next is slide 2, previous is slide 1, last is slide 3
USING javascript in HTML
You are given a total of 7 images. 4 of these images are buttons: Last, First, Previous and Next.
The remaining 3 images (photos of my best friend) can be used in the slide show.(You are free to replace these with images of your choice )
Also given are 3 html files: slide1.htm, slide2.htm, slide3.htm
slide2.htm and slide3.htm are empty. You need to complete them similar to slide1.htm
slide1.htm has partial code. You need to complete it.
A screenshot of slideshow is provided (not functional)
Explanation / Answer
<body>
<div class="slidercontainer">
<div class="showSlide fade">
<img src="images/img1.jpg" />
<div class="content">Lorem ipsum dolor sit amet</div>
</div>
<div class="showSlide fade">
<img src="images/img2.jpg"/>
<div class="content">Lorem ipsum dolor sit amet</div>
</div>
<div class="showSlide fade">
<img src="images/img3.jpg"/>
<div class="content">Lorem ipsum dolor sit amet</div>
</div>
<div class="showSlide fade">
<img src="images/img4.jpg"/>
<div class="content">Lorem ipsum dolor sit amet</div>
</div>
<!-- Navigation arrows -->
<a class="left">â®</a>
<a class="right">â¯</a>
</div>
</body>
===========================================================================================
<script type="text/javascript">
var slide_index = 1;
displaySlides(slide_index);
function nextSlide(n) {
displaySlides(slide_index += n);
}
function currentSlide(n) {
displaySlides(slide_index = n);
}
function displaySlides(n) {
var i;
var slides = document.getElementsByClassName("showSlide");
if (n > slides.length) { slide_index = 1 }
if (n < 1) { slide_index = slides.length }
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slide_index - 1].style.display = "block";
}
</script>
======================================================================================
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My Slider</title>
<style type="text/css">
body {
margin: 0;
background: #e6e6e6;
}
.showSlide {
display: none
}
.showSlide img {
width: 100%;
}
.slidercontainer {
max-width: 1000px;
position: relative;
margin: auto;
}
.left, .right {
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;
}
.right {
right: 0;
border-radius: 3px 0 0 3px;
}
.left:hover, .right:hover {
background-color: rgba(115, 115, 115, 0.8);
}
.content {
color: #eff5d4;
font-size: 30px;
padding: 8px 12px;
position: absolute;
top: 10px;
width: 100%;
text-align: center;
}
.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
}
}
</style>
</head>
<body>
<div class="slidercontainer">
<div class="showSlide fade">
<img src="images/img1.jpg" />
<div class="content">Slide1 heading</div>
</div>
<div class="showSlide fade">
<img src="images/img2.jpg" />
<div class="content">Slide2 heading</div>
</div>
<div class="showSlide fade">
<img src="images/img3.jpg" />
<div class="content">Slide3 heading</div>
</div>
<div class="showSlide fade">
<img src="images/img4.jpg" />
<div class="content">Slide4 heading</div>
</div>
<!-- Navigation arrows -->
<a class="left">â®</a>
<a class="right">â¯</a>
</div>
<script type="text/javascript">
var slide_index = 1;
displaySlides(slide_index);
function nextSlide(n) {
displaySlides(slide_index += n);
}
function currentSlide(n) {
displaySlides(slide_index = n);
}
function displaySlides(n) {
var i;
var slides = document.getElementsByClassName("showSlide");
if (n > slides.length) { slide_index = 1 }
if (n < 1) { slide_index = slides.length }
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slide_index - 1].style.display = "block";
}
</script>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.