<div class="mySlides fade">
<img src="https://media.giphy.com/media/9JpsWBPgRtBDOYE6QB/source.gif" style="width:100%; height: 100%; border-radius: 0; ">
</div>
<div class="mySlides fade">
<img src="https://media2.giphy.com/media/fRGq1cnopavJ7mKDYn/giphy.webp" style="width:100%; height: 100%; border-radius: 0; ">
</div>
<div class="mySlides fade">
<img src="https://media1.giphy.com/media/lPRrCc9lQsOPa2qZiw/giphy.webp" style="width:100%; height: 100%; border-radius: 0; ">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(+1)">❯</a>
</div>
<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;
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, 2500);
}
</script>
This is my slider image with button and auto slide. I got this code from w3schools and edited.Some of the codes are not good but the main problem is when I add Bootstrap4 CDN it is not working and some of the divs(class "container") are getting smaller. How can I solve this.
Overwrite this bootstrap CSS
.fade:not(.show) { opacity: 1; }
Full Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<style>
.fade:not(.show){
opacity: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="mySlides fade">
<img src="https://media.giphy.com/media/9JpsWBPgRtBDOYE6QB/source.gif" style="width:100%; height: 100%; border-radius: 0 ">
</div>
<div class="mySlides fade">
<img src="https://media2.giphy.com/media/fRGq1cnopavJ7mKDYn/giphy.webp" style="width:100%; height: 100%; border-radius: 0 ">
</div>
<div class="mySlides fade">
<img src="https://media1.giphy.com/media/lPRrCc9lQsOPa2qZiw/giphy.webp" style="width:100%; height: 100%; border-radius: 0 ">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(+1)">❯</a>
</div>
<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;
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, 2500);
}
</script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</body>
</html>
Related
I want to run 3 slideshows on one page, I tried copying the code but it wasn't successful. I'm using a W3 slideshow. Also, I want to make the Next & previous buttons like in this: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow Please help me
Here is the code:
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";
}
.mySlides {display:none;}
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-content w3-display-container">
<img class="mySlides" src="https://www.w3schools.com/w3css/img_snowtops.jpg" style="width:100%">
<img class="mySlides" src="https://www.w3schools.com/w3css/img_lights.jpg" style="width:100%">
<img class="mySlides" src="https://www.w3schools.com/w3css/img_mountains.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>
</body>
</html>
I cant able to call the functions when I link it through different javascript file
I wanna call this to my HTML how should I do this I tried adding script file but it doesn't work
<html>
<head>
<link href="home.css" rel="stylesheet" type="text/css">
<script type="application/javascript" src="jj.js"></script>
</script>
</head>
<body>
<div class="container" id="showSlides()">
<div class="image-sliderfade fade">
<img src="img1.png" style="width:100%">
</div>
<div class="image-sliderfade fade">
<img src="img2.png" style="width:100%">
</div>
<div class="image-sliderfade fade">
<img src="img3.png" style="width:100%">
</div>
<div class="dotcontainer">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
<body>
<head>
now this is my .js file
function showSlides() {
var i;
var slides = document.getElementsByClassName("image-sliderfade");
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, 4000);
}
<html>
<head>
<link href="home.css" rel="stylesheet" type="text/css">
</head>
<body onload="showSlides()">
<div class="image-sliderfade fade">
<img src="img1.png" style="width:100%">
</div>
<div class="image-sliderfade fade">
<img src="img2.png" style="width:100%">
</div>
<div class="image-sliderfade fade">
<img src="img3.png" style="width:100%">
</div>
<div class="dotcontainer">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
<script type="application/javascript">
function showSlides() { var i;
var slides = document.getElementsByClassName("image-sliderfade");
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, 4000);
}
</script>
</body>
</html>
You can change your second code-snippet to also execute the funtion when the page is loaded, like:
<link href="home.css" rel="stylesheet" type="text/css">
<script type="application/javascript" src="jj.js"></script>
<script>
window.onload = function () {
showSlides();
}
</script>
You can build a self executing function like this :
(function() {
var i;
var slides = document.getElementsByClassName("image-sliderfade");
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, 4000);
})();
I did not test your function if it works, I only copy and paste it in my answer.
If you are using jQuery then you can call it when the document is loaded:
jQuery(document).ready(function(){
Your function call here.....
});
You've included the file. However you never execute the function all your code is in.
This is likely the cause.
Try the following:
on line 1 of jj.js (before the function) write console.log('this is jj.js'); and run the page. In your console (web inspector) you should see the message "this is jj.js" which means the script tag is doing it's thing.
Then remove the console log (you don't need it) and either make sure your code isn't inside the function (so simply remove it) or invoke the function by doing something like:
showSlides(); function showSlides() { console.log('Init function')}
Change your reference to
<script type="text/javascript" src="jj.js"></script>
Call your showSlides() inside anywhere your script jj.js.
e.g
function showSlides(){
//Function body goes here
}
showSlides();
But best is to call it onload either javascript's window.onload or jquery's $(document).ready(function(){ showSlides()})
<link href="home.css" rel="stylesheet" type="text/css">
<script type="application/javascript" src="jj.js"></script>
You can use either jQuery or pure javascript for this i.e
// use dom elements
<script>
document.addEventListener('DOMContentLoaded', function() {
showSlides()
}, false);
</script>
DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
// use below function
<script>
(function () {
showSlides()
})();
</script>
It’s an Immediately-Invoked Function Expression. It executes immediately after it’s creation.
// jQuery function
<script>
$(function() {
showSlides()
});
</script>
// use window event
<script>
window.onload = function() {
showSlides()
};
</script>
it is fired when the entire page loads, including its content (images, CSS, scripts, etc.)
<script>
$(document).ready( function () {
showSlides()
})
</script>
It is fired when the DOM is ready which can be prior to images and other external content is loaded.
Add one of above function in your jj script
https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_fading
Using the link above, you can see an example of an animated fading slideshow that I am trying to implement into my website. However, when I copy the exact code and use it for me, it displays the images stacked on top of one another as one image, and just fades it in and out to the same image (made up of all of the images).
Any idea why this is happening or another source where I can get an animated slideshow from? The only other thing to take into account is that in the styles file, everything referring to 'webkit' is underlined in red. I am running in chrome though so I don't think that is the issue.
Here is the code:
<!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">
<body>
<div class="w3-content w3-section" style="max-width:500px">
<p>The w3-animate-fading class animates an element in and out (takes about 10 seconds).</p>
<img class="mySlides w3-animate-fading" src="../../assets/img/img_rr_01.jpg" style="width:100%" alt="image1">
<img class="mySlides w3-animate-fading" src="../../assets/img/img_rr_02.jpg" style="width:100%" alt="image2">
<img class="mySlides w3-animate-fading" src="../../assets/img/img_rr_03.jpg" style="width:100%" alt="image3">
<img class="mySlides w3-animate-fading" src="../../assets/img/img_rr_04.jpg" style="width:100%" alt="image4">
</div>
<script>
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 9000);
}
</script>
</body>
</html>
This is exactly the code on the website, and I downloaded the images they use, so why is it that I can't get it to work?
<!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">
<body>
<div class="w3-content w3-section" style="max-width:500px">
<p>The w3-animate-fading class animates an element in and out (takes about 10 seconds).</p>
<img class="mySlides w3-animate-fading" src="img_rr_01.jpg" style="width:100%" alt="image1">
<img class="mySlides w3-animate-fading" src="img_rr_02.jpg" style="width:100%" alt="image2">
<img class="mySlides w3-animate-fading" src="img_rr_03.jpg" style="width:100%" alt="image3">
<img class="mySlides w3-animate-fading" src="img_rr_04.jpg" style="width:100%" alt="image4">
</div>
<script>
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 9000);
}
</script>
</body>
</html>
Here its working correctly. It may me something else that would be causing some problem.
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 ten 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:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>xPeke</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="icon" href="images/favicon-16x16.png" sizes="16x16" type="image/png">
</head>
<body>
<!-- PROGRAM BAR -->
<div id="program" class="topbar">
<b style="color:black;">Program:</b> Luni-Vineri: 9:00-22:00 Sambata: 9:00–20:00 Duminica: Inchis
<div class="topbar2">
Login <span> / </span> Register
</div>
</div>
<br>
<div class="slideshow-container">
<div class="wall">
<img class="mySlides" src="images/logo1.png" alt="Logo1" width="1500" height="300">
<img class="mySlides" src="images/logo2.png" alt="Logo2" width="1500" height="300">
<img class="mySlides" src="images/logo3.png" alt="Logo3" width="1500" height="300">
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a><br>
</div></div>
<form>
<img class="generalone" src="images/logo.png" alt="Logo" width="180" height="45">
<input class="search" type="text" name="search" placeholder="Search..">
</form>
<div class="generaltwo">
<img class="socialmedia" src="images/facebook.png" alt="Facebook">
<img class="socialmedia" src="images/youtube.png" alt="Youtube">
<img class="socialmedia" src="images/reddit.png" alt="Reddit">
</div>
<script>
var slideIndex = 1;
var timer = null;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
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";
}
slides[slideIndex-1].style.display = "block";
timer = setTimeout(showSlides, 10000);
}
// clear Timeout(timer);
</script>
</body>
</html>
I'm trying to create a slider for my html page,
I found this slider in css/javascript, everything is working properly, but how can I make the slide sliding automatically too instead of sliding only when the user press the arrows ?
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > x.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = x.length
}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" w3-white", "");
}
x[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " w3-white";
setTimeout(2000); // Change image every 2 seconds
}
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<style>
.mySlides {
display: none
}
.w3-left,
.w3-right,
.w3-badge {
cursor: pointer
}
.w3-badge {
height: 13px;
width: 13px;
padding: 0
}
</style>
<body>
<div class="w3-container">
<h2>Slideshow Indicators</h2>
<p>An example of using buttons to indicate how many slides there are in the slideshow, and which slide the user is currently viewing.</p>
</div>
<div class="w3-content w3-display-container" style="max-width:800px">
<img class="mySlides" src="img_nature_wide.jpg" style="width:100%">
<img class="mySlides" src="img_fjords_wide.jpg" style="width:100%">
<img class="mySlides" src="img_mountains_wide.jpg" style="width:100%">
<div class="w3-center w3-section w3-large w3-text-white w3-display-bottomleft" style="width:100%">
<div class="w3-left w3-padding-left w3-hover-text-khaki" onclick="plusDivs(-1)">❮</div>
<div class="w3-right w3-padding-right w3-hover-text-khaki" onclick="plusDivs(1)">❯</div>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span>
</div>
</div>
<script>
</script>
</body>
</html>
Hi here i just implemented the logic to slide the images frequently..
try this
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<style>
.mySlides {display:none}
.w3-left, .w3-right, .w3-badge {cursor:pointer}
.w3-badge {height:13px;width:13px;padding:0}
</style>
<body>
<div class="w3-container">
<h2>Slideshow Indicators</h2>
<p>An example of using buttons to indicate how many slides there are in the slideshow, and which slide the user is currently viewing.</p>
</div>
<div class="w3-content w3-display-container" style="max-width:800px">
<img class="mySlides" alt="sample test1" src="mfdg2.jpg" style="width:100%">
<img class="mySlides" alt="sample test2" src="img2.jpg" style="width:100%">
<img class="mySlides" alt="sample test3" src="img1.jpg" style="width:100%">
</div>
<script>
showDivs(1);
function plusDivs(n) {
n=n+1;
showDivs(n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {n = 1}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[n-1].style.display = "block";
setTimeout(function() { //calls click event after a certain time
plusDivs(n);
}, 2000);
}
</script>
</body>
</html>
Its working for me..
In your case setInterval() should be global.
setInterval(function(){
slideIndex = slideIndex +1;
showDivs(slideIndex)
}, 2000);
https://jsfiddle.net/g9a2ez4s/
use setInterval
setInterval(function(){
document.getElementsByClassName("w3-left").click();
}, 800);