thanks in advance for your time. I decided to tweak the automatic slideshow from W3Schools (https://www.w3schools.com/howto/howto_js_slideshow.asp) in order to get a Y-axis moving transition instead of opacity only but I broke the continuity of the slider. I would like it to automatically restart from the first image after the last image, instead of stopping completely. This is the code, I'll appreciate any help, should be easy for someone knowing what he's doing (not like me). Thank you
let slideIndex = 0;
showSlides();
function showSlides() {
let i;
let slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.opacity = "1";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none; position: absolute;}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
}
/* Fading animation */
.fade {
animation-name: fade;
animation-duration: 1s;
}
#keyframes fade {
from { opacity: .1; transform: translateY(-100%); }
to { opacity: 1; transform: translateY(0); }
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
</head>
<body>
<div class="slideshow-container">
<div class="mySlides fade">
<img src="https://htmlcolorcodes.com/assets/images/colors/bright-blue-color-solid-background-1920x1080.png" style="width:100%">
</div>
<div class="mySlides fade">
<img src="https://htmlcolorcodes.com/assets/images/colors/charcoal-color-solid-background-1920x1080.png" style="width:100%">
</div>
<div class="mySlides fade">
<img src="https://htmlcolorcodes.com/assets/images/colors/teal-color-solid-background-1920x1080.png" style="width:100%">
</div>
</div>
<br>
<script>
</script>
</body>
</html>
As the transition happens when element becomes 'display:block' (I would have made it another way, using an .active class) - I have decided to set 'display:none' for the next element so it will be shown next.
Also fixed an issue with z-index so I keep bring the current active above else.
let slideIndex = 0;
let zIndex = 0;
showSlides();
function showSlides() {
let i;
let slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.opacity = "1";
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1
}
slides[slideIndex - 1].style.display = "block";
// this is all quite patchy,
// but it works if you have more than 2 slides
slides[slideIndex - 1].style.zIndex = zIndex++;
slides[slideIndex % slides.length].style.display = "none";
setTimeout(showSlides, 1000); // Change image every 2 seconds
}
* {
box-sizing: border-box;
}
body {
font-family: Verdana, sans-serif;
}
.mySlides {
display: none;
position: absolute;
}
img {
vertical-align: middle;
}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
}
/* Fading animation */
.fade {
animation-name: fade;
animation-duration: 1s;
}
#keyframes fade {
from {
opacity: .1;
transform: translateY(-100%);
}
to {
opacity: 1;
transform: translateY(0);
}
}
img {
width: 100px;
height: 100px;
}
<body>
<div class="slideshow-container">
<div class="mySlides fade">
<img src="https://htmlcolorcodes.com/assets/images/colors/bright-blue-color-solid-background-1920x1080.png" style="width:100%">
</div>
<div class="mySlides fade">
<img src="https://htmlcolorcodes.com/assets/images/colors/charcoal-color-solid-background-1920x1080.png" style="width:100%">
</div>
<div class="mySlides fade">
<img src="https://htmlcolorcodes.com/assets/images/colors/teal-color-solid-background-1920x1080.png" style="width:100%">
</div>
</div>
Related
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Document</title>
<link href="index.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="index.js"></script>
</head>
<body>
<div class="slideshow-container">
<div class="mySlideDiv fade active">
<img src="bg.jpg">
</div>
<div class="mySlideDiv fade">
<img src="lemon.jpg">
</div>
<div class="mySlideDiv fade">
<img src="pear.webp">
</div>
<a class="prev" onclick="prevSlide()">❮</a>
<a class="next" onclick="nextSlide()">❯</a>
</div>
</body>
</html>
body{
margin: 0;
}
/* Slideshow container */
.slideshow-container {
/*max-width: 1440px;*/
position: relative;
margin: auto;
margin-left: 0%;
margin-top: 0%;
}
/* effect */
.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}
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 45%;
width: auto;
padding: 16px;
margin-top: -22px;
color: red;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* 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);
}
img{
width:100%;
height: 30%important;
}
$(document).ready(function () {
$(".mySlideDiv").not(".active").hide();
setInterval(nextSlide, 4000);
});
function prevSlide() {
$(".mySlideDiv").hide();
var allSlide = $(".mySlideDiv");
var currentIndex = 0;
$(".mySlideDiv").each(function(index,item){
if($(this).hasClass("active")) {
currentIndex = index;
}
});
var newIndex = 0;
if(currentIndex <= 0) {
newIndex = allSlide.length-1;
} else {
newIndex = currentIndex-1;
}
$(".mySlideDiv").removeClass("active");
$(".mySlideDiv").eq(newIndex).addClass("active");
$(".mySlideDiv").eq(newIndex).show();
}
function nextSlide() {
$(".mySlideDiv").hide();
var allSlide = $(".mySlideDiv");
var currentIndex = 0;
$(".mySlideDiv").each(function(index,item){
if($(this).hasClass("active")) {
currentIndex = index;
}
});
var newIndex = 0;
if(currentIndex >= allSlide.length-1) {
newIndex = 0;
} else {
newIndex = currentIndex+1;
}
$(".mySlideDiv").removeClass("active");
$(".mySlideDiv").eq(newIndex).addClass("active");
$(".mySlideDiv").eq(newIndex).show();
}
Screenshot on mobile
I want to make a responsive web application, but mobile window isn't filled with the image, and I don't know how to edit the code to make it. I assume that I have to embed the code targeted with mobile web, but I don't know how to do. I attach the image file to explain my situation. Please help.
You can try to put in the css of your container:
width:100%;
height: 100%;
And in the css of your pictures :
width:100%;
height: undefined;
// figure out your image aspect ratio
aspectRatio: 50 / 32;
Add css with media query
#media(max-width:480px) {
img {
width:100% !important;
height: 100% !important;
object-fit: cover; }
}
So here is my code. I so far have the slide show worker with said given images.
I am having the problem with Containing and Stretching the images to fit inside of my container div.
Here is the code:
Thanks in advance for any help.
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
.imgContainer {
padding-top: 80px;
background-color: rgba(0, 0, 0, 0.603);
width: 100%;
height: 575px;
}
.img1 {
max-width: 100%;
max-height: 100%;
object-fit: cover;
}
<div class="imgContainer" alt="imgContainer">
<img class="mySlides" src="https://fakeimg.pl/400x200/?text=Img 1&font=lobster" alt="imgj1">
<img class="mySlides" src="https://fakeimg.pl/400x200/?text=Img 2&font=lobster" alt="imgj1">
<img class="mySlides" src="https://fakeimg.pl/400x200/?text=Img 3&font=lobster" alt="imgj1">
</div>
You need css rule with img to 100% of your imgContainer container
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
.imgContainer {
padding-top: 80px;
background-color: rgba(0, 0, 0, 0.603);
width: 100%;
height: 575px;
}
.imgContainer img {
width:100%
}
.img1 {
max-width: 100%;
max-height: 100%;
object-fit: cover;
}
<div class="imgContainer" alt="imgContainer">
<img class="mySlides" src="https://fakeimg.pl/400x200/?text=Img 1&font=lobster" alt="imgj1">
<img class="mySlides" src="https://fakeimg.pl/400x200/?text=Img 2&font=lobster" alt="imgj1">
<img class="mySlides" src="https://fakeimg.pl/400x200/?text=Img 3&font=lobster" alt="imgj1">
</div>
In the css, you are selecting the elements by the alt attribute .imgj1, what you should do instead is, access them by their classes .mySlides. Furthermore, the snippet needs to have working images to work properly, as it is difficult to provide you with an answer.
Try wrapping the images in containing <div> element and adding width: 100% and height: 100% to both the images and the <div> element. If this does not work, then please fix the images so I can answer better.
So according to my understanding, you want the images to fill the entire parent container.
Try this:
<div class="imgContainer">
<div class="mySlides">
<img class="slideImage" src="{image_src}" alt="imgj1">
</div>
<div class="mySlides">
<img class="slideImage" src="{image_src}" alt="imgj2">
</div>
<div class="mySlides">
<img class="slideImage" src="{image_src}" alt="imgj3">
</div>
</div>
.imgContainer {
padding-top: 80px;
background-color: rgba(0, 0, 0, 0.603);
width: 100%;
height: 575px;
}
.mySlides {
width: 100%;
height: 100%;
}
.slideImage {
width: 100%;
height: 100%;
object-fit: cover;
}
.imgContainer {
padding-top: 80px;
background-color: rgba(0, 0, 0, 0.603);
width: 100%;
height: 575px;
}
vvv**************Actually Works to an extent**************vvv
.mySlides {
max-height: 100%;
max-width: 100%;
object-fit: contain;
}
^^^**************Actually Works to an extent**************^^^
So doing this does contain the image within the div.
However, using width 100%, and height 100% only gives me 100% of the size of the image that is sitting in the div. it does not stretch it across the 100% width of the screen, as the div does.
I'm looking to take any image, and completely fill the containing div with it. I know this is possible via javascript. There is just not a lot it out there that I can find.
The actual answer to this question was in the CSS properties & Javascript element Selector.
After more research the best way to do this is to change my outer containing div class to the "mySlides" tag shown in the javascript.
Additionally, add CSS rules to ".mySlides" instead of imgContainer.
The end result
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides, 4000); // Change image every 2 seconds
}
.mySlides {
overflow: hidden;
background-size:cover;
background-position: center;
width: 100%;
height: 650px;
}
<div class="imgContainer" alt="imgContainer">
<img class="mySlides" src="someimage1.jpg" >
<img class="mySlides" src="someimage2.jpg" >
<img class="mySlides" src="someimage3.jpg" >
</div>
Thanks for the english grammar help earlier, I was tired.
I am trying to integrate a slider into my application.
I am referring this w3schools sample.
But for some reason whenever the page loads the images comes for a second then disappears and when i click on arrow or dots i am getting function undefined error like below.
Uncaught ReferenceError: plusSlides is not defined
at HTMLAnchorElement.onclick (details.html:1)
Any help would be appreciated, thanks in advance...!!!
Please find my code below.
<!DOCTYPE html>
<html>
<head>
<!-- Meta -->
<meta charset="utf-8">
<title>Xylem</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Samuel Norton">
<!-- Styles -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900|Raleway:400,300,700,600,900' rel='stylesheet' type='text/css'>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script src="http://code.jquery.com/color/jquery.color-2.1.0.min.js"></script>
<style>
* {box-sizing:border-box}
.mySlides {display:none}
/* 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;
}
/* 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;
}
#-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) {
.prev, .next,.text {font-size: 11px}
}
</style>
</head>
<body class="bgColor">
<div class="container-fluid">
<div>
<div>
<div>
<div class="productContent">
<a class="nextlinkProcuct"> ← GO BACK</a>
<div class="row containerDiv">
<div class="col-md-12 pd10-top pd10-bottom">
<div class="slideshow-container">
<!-- Next and previous buttons -->
</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>
<span class="dot" onclick="currentSlide(4)"></span>
<span class="dot" onclick="currentSlide(5)"></span>
</div>
</div>
<div class="col-md-12 title">360 View</div>
<div style="width: 400px;" class="col-md-4">
<script src='https://vizor.io/static/scripts/vizor-360-embed.js' data-vizorurl='https://vizor.io/embed/anamikabadal/americanorthcarolinamorrisville'></script>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$( document ).ready(function() {
var i;
var detailsDataObj = {
"Title":"XYLEM WATER SOLUTIONS INDIA PVT LTD.",
"Description":"This page will aim to list all the high level modules and the functionality (use cases) for each module. Each module can be considered an EPIC and sub-bulleted use case as super-stories. Each Super-story will have stories that will be tracked in Jira and used for Sprint planning. This page will only list epics and super - stories.",
"sliderImage":["img1.jpg","img2.jpg","img3.jpg","img4.jpg","img5.jpg"],
"Image360":"images/testing.jpeg"
}
var titleDiv = '<div class="title col-md-12 pd10-top pd10-bottom centerText">'+ detailsDataObj.Title + '</div>'; // Create text with HTML
$(".containerDiv").append(titleDiv); // Append new elements
var pageDesc = '<div class="discription col-md-12 pd10-top pd10-bottom">'+ detailsDataObj.Description + '</div>';
$(".containerDiv").append(pageDesc); // Append new elements
var prevArrow = '<a class="prev" onclick="plusSlides(-1)">❮</a>';
var nextArrow = '<a class="next" onclick="plusSlides(1)">❯</a>';
for(i=0;i<detailsDataObj.sliderImage.length;i++){
var slideContainer = '<div class="mySlides fade">';
var img = '<img height="300" ';
img+='src="'+detailsDataObj.sliderImage[i]+'"';
img+='/>';
slideContainer+=img;
slideContainer+='</div>';
$('.slideshow-container').append(slideContainer);
}
$('.slideshow-container').append(prevArrow,nextArrow);
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>
You're trying to call functions globally from your HTML document:
onclick="plusSlides(-1)"
But those functions are defined in a closed scope inside another function:
$(document).ready(function() {
//...
function plusSlides(n) {
showSlides(slideIndex += n);
}
//...
});
Nothing defined inside that anonymous function() {} passed to the document.ready handler will be visible outside that function.
You can assign the functions to the window object instead:
$(document).ready(function() {
//...
window.plusSlides = function (n) {
showSlides(slideIndex += n);
};
//...
});
Or define the functions outside of that scope:
$(document).ready(function() {
//...
});
function plusSlides(n) {
showSlides(slideIndex += n);
}
//...
Your other functions, references to those functions, etc. may also need to be adjusted for the same reasons. Things outside a function can be accessed from inside of it, but not the other way around.
This is a classic scoping issue.
plusSlides is defined inside the $.ready(function) which has it's own scope and is not accessible at window level. Easy fix for you is to rewrite it like so:
window.plusSlides = function(n) {
showSlides(slideIndex += n)
}
So plusSlides is now a function accessible at window scope, however, the content of the function also is a closure with access to the scope from the
$.ready(function).
I have to make a slideshow that has to work both automatic and manual.
For the manual part I have two buttons: next and previous that allows me to see the photos without having to wait a certain period of time between images.
When I don't click on the buttons, the slideshow goes automatic and the images change after six seconds (for example).
My problem is that, after I click on the previous/ next button, the images start to appear faster or they appear more than one on the screen.
Here is the code I am working with:
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("hidden");
if (n===undefined){n= ++slideIndex;}
if (n > slides.length) {slideIndex = 1;}
if (n < 1) {slideIndex = slides.length}
$(slides[slideIndex-1]).fadeIn(2000);
slides[slideIndex-1].style.display = "block";
$(slides[slideIndex-1]).delay(3000);
$(slides[slideIndex-1]).fadeOut(1000);
setTimeout(showSlides, 6000);
}
.hidden {
display: none;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<meta charset="utf-8">
<title>jQuery</title>
<link rel="stylesheet" href="lab5.css" media="screen" title="no title">
</head>
<body>
<h1 class="titlu">Goodies</h1>
<div align="center">
<button class="button" onclick="plusSlides(-1)" >Previous</button>
<button class="button" onclick="plusSlides(1)" >Next</button>
</div>
<div class="hidden">
<h4 class="num" > 1 / 5 </h4>
<img src="http://placehold.it/150x150?text=1">
</div>
<div class="hidden">
<h4 class="num"> 2 / 5 </h4>
<img src="http://placehold.it/150x150?text=2">
</div>
<div class="hidden">
<h4 class="num"> 3 / 5 </h4>
<img src="http://placehold.it/150x150?text=3">
</div>
<div class="hidden">
<h4 class="num"> 4 / 5 </h4>
<img src="http://placehold.it/150x150?text=4">
</div>
<div class="hidden">
<h4 class="num"> 5 / 5 </h4>
<img src="http://placehold.it/150x150?text=5">
</div>
</body>
</html>
Is there a way I can make the slideshow return to its "speed" of showing the images every six seconds after I click on previous/next?
Also, how can I prevent it from showing more than one image at a time?
Here's working code for an auto and manual slideshow with the timer as suggested by Scott.
It works with the html and css from this how to which the questioner based his code on.
https://www.w3schools.com/howto/howto_js_slideshow.asp
var slideIndex = 1;
var timer = null;
showSlides(slideIndex);
function plusSlides(n) {
clearTimeout(timer);
showSlides(slideIndex += n);
}
function currentSlide(n) {
clearTimeout(timer);
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n==undefined){n = ++slideIndex}
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";
timer = setTimeout(showSlides, 5000);
}
What's happening is that you are causing multiple timers to be started, which causes your callback function to run more often than it should.
You need to make sure that you capture the integer that is returned from your timer:
var timer = null; // Do this in a scope that is accessible to all your relevant functions
...then:
timer = setTimeout(showSlides, 6000);
So that you can cancel the timer where appropriate:
clearTimeout(timer);
You will want to clear your timer upon the clicking of the button, which will stop the automatic one from running and then you can start a new one, leaving you with only one running timer.
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.mySlides {display:none;}
</style>
<body>
<h2 class="w3-center">Manual Slideshow</h2>
<div class="w3-content w3-display-container">
<img class="mySlides" src="img_snowtops.jpg" style="width:100%">
<img class="mySlides" src="img_lights.jpg" style="width:100%">
<img class="mySlides" src="img_mountains.jpg" style="width:100%">
<img class="mySlides" src="img_forest.jpg" style="width:100%">
<button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">❮</button>
<button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">❯</button>
</div>
**SCRIPT CODES**
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
</script>
</body>
</html>
**//CSS CODES**
/* Slideshow container */
.slideshow-container {
height:500px;
position: relative;
margin: auto;
with:800px;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev, .next {
background-color:gold;
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 20px;
color: black;
font-weight: bold;
font-size: 24px;
transition: 0.6s ease;
border-radius: 7 7px 7px 7;
}
/* 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);
color:white;
}
/* Caption text */
.text {
color:lime;
font-size: 22px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color:lime;
font-size: 22px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #000000;
border-radius: 50%;
display: inline-block;
transition: background-color 0.2s ease;
}
.active, .dot:hover {
background-color: #ff0101;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 0.2s;
animation-name: fade;
animation-duration: 6.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
I have a web page with a slideshow. The slideshow has three pictures. I would like to have a button on the page which enables users to switch between this slideshow and another with five different pictures. How would I program this button with JavaScript and where would I add the second slideshow in the HTML?
Current HTML:
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="img1.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="img2.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="img3.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</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>
<button>Switch Slideshow</button>
Current CSS:
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* 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: 13px;
width: 13px;
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;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
Current JavaScript:
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";
}
Many thanks in advance!
Well, you need to first be able to create your slideshow dynamically. Only then will you be able to swap in-and-out different slides. I tried not to refactor your existing code. Also, I did not use jQuery (which I would use personally). Just generate the markup for each slide and set it on the slides div. I had to create an inner div so that the buttons do not get overridden.
var slideshowIndex = 1;
var slideIndex = 1;
var slideshows = [
[
'http://placehold.it/500x300/f00/0ff?text=Foo',
'http://placehold.it/500x300/0f0/f0f?text=Bar',
'http://placehold.it/500x300/00f/ff0?text=Baz'
], [
'http://placehold.it/500x300/f70/07f?text=Fizz',
'http://placehold.it/500x300/0f7/f07?text=Buzz',
'http://placehold.it/500x300/70f/7f0?text=Bang'
]
];
var buttonTextArr = [ 'Show Images', 'Show Pages' ];
function createSlides(slides) {
return slides.map(function(slide, index) {
return [
'<div class="mySlides fade">',
'<div class="numbertext">' + (index + 1) + ' / ' + slides.length + '</div>',
'<img src="' + slide + '">',
'<div class="text">Caption #' + (index + 1) + '</div>',
'</div>'
].join('');
}).join('');
}
function createDots(slides) {
return slides.map(function(slide, index) {
return '<span class="dot" onclick="currentSlide(' + (index + 1) + ')"></span>'
}).join('');
}
function loadSlideshow(slides) {
document.getElementsByClassName('slideshow-slides')[0].innerHTML = createSlides(slides);
document.getElementsByClassName('dots')[0].innerHTML = createDots(slides);
}
function loadNextSlideshow() {
slideshowIndex = (slideshowIndex + 1) % 2;
loadSlideshow(slideshows[slideshowIndex]);
slideIndex = 1; // Reset index
showSlides(slideIndex);
document.getElementsByClassName('switch')[0].innerHTML = buttonTextArr[slideshowIndex];
}
loadNextSlideshow(); // Load the slideshow
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";
}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
text-shadow: 0.05em 0.05em 0.25em #000;
}
/* 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: 13px;
width: 13px;
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;
}
#-webkit-keyframes fade {
from { opacity: 0.4 }
to { opacity: 1 }
}
#keyframes fade {
from { opacity: 0.4 }
to { opacity: 1 }
}
<div class="slideshow-container">
<div class="slideshow-slides"></div>
<a class="prev" onClick="plusSlides(-1)">❮</a>
<a class="next" onClick="plusSlides(1)">❯</a>
</div>
<br />
<div class="dots" style="text-align:center"></div>
<button class="switch" onClick="loadNextSlideshow()">Switch Slideshow</button>
Created plunker here. Please refer below link.
https://plnkr.co/edit/xso6MfwOxQJ4PlDpW90y?p=preview
HTML
<div class="slideshow-container">
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</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>
<button>Switch Slideshow</button>
JavaScript:
var slideShowIndex = 1;
var slideShows= [
[
{
'image': 'img1.jpg',
'caption': 'Caption Text'
},
{
'image': 'img1.jpg',
'caption': 'Caption Text'
},
{
'image': 'img1.jpg',
'caption': 'Caption Text'
}
],
[
{
'image': 'img1.jpg',
'caption': 'Caption Text'
},
{
'image': 'img1.jpg',
'caption': 'Caption Text'
},
{
'image': 'img1.jpg',
'caption': 'Caption Text'
},
{
'image': 'img1.jpg',
'caption': 'Caption Text'
},
{
'image': 'img1.jpg',
'caption': 'Caption Text'
}
]
]
buildSlideShow();
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";
}
function buildSlideShow(){
var slideText = '';
var slides = document.getElementsByClassName("slideshow-container");
var slidesToRender = slideShows[slideShowIndex-1];
slidesToRender.forEach(function(value,index){
slideText += '<div class="mySlides fade"><div class="numbertext">'+ index+1+ '/'+slidesToRender.length + '</div><img src="'+value.image+'" style="width:100%"><div class="text">'+value.caption+'</div></div>';
});
slides[0].innerHtml = slideText;
}
hope this works for you.