I have a slideshow with script identical to, How to make slideshow auto-play? , but can't seem to make mine work. Any suggestions to what it is? This slideshow does have a parent element, could that be the cause, or maybe css?
My links as requested: I'm positive that it's the correct file path, as my controls still work.
<!--get jquery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!--project slideshow scripts-->
<script src="profile-javascript/project-slideshow.js">
</script>
<script src="profile-javascript/project-slideshow2.js">
</script>
HTML:
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";
}
setInterval(function() {
plusSlides(1);
}, 1000);
/*courosel section starts*/
.slideshow-container {
max-width: 1000px;
height: 7.5em;
position: relative;
margin: 7.5px auto;
}
.mySlides,
.mySlides2 {
display: none;
}
.project-text {
color: ;
display: flex;
position: ;
width: 100%;
justify-content: center;
align-items: center;
font-family: 'Inknut Antiqua', serif;
}
.slideshow-img {
width: 17.4rem;
height: 10.5rem;
border-radius: 5px;
box-shadow: 2.5px 2.5px 2px rgba(0, 0, 0, 0.7);
-webkit-transition: display 1s;
transition: 1s;
}
.slide-hover-p {
display: none;
}
.slideshow-img:hover+.slide-hover-p {
display: block;
}
.fade-car {
-moz-animation-name: fade-car;
-webkit-animation-name: fade-car;
-moz-animation-duration: 2.5s;
-webkit-animation-duration: 2.5s;
}
.project-text a,
a:visited,
{}
.previous,
.nexxt {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: ;
font-weight: bold;
font-size: 28px;
transition: 0.85s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.nexxt {
right: 0;
border-radius: 3px 0 0 3px;
}
.previous:hover,
.nexxt:hover {
cursor: pointer;
}
#p-others:hover,
#n-others:hover {
background-color: white;
color: #00004d;
}
#p-coding:hover,
#n-coding:hover {
background-color: #00004d;
color: white;
}
/*courosel media queries*/
#-webkit-keyframes fade-car {
from {
opacity: 0.4
}
to {
opacity: 1
}
}
#keyframes fade-car {
from {
opacity: 0.4
}
to {
opacity: 1
}
}
#media only screen and (max-width: 300px) {
.previous,
.nexxt,
.text {
font-size: 11px
}
}
<!--slider starts-->
<div class="slideshow-container">
<div class="mySlides fade-car">
<div class="project-text">
<img src="images/colorado_view2.jpg" class="slideshow-img img-fluid" alt="global6" />
<p class="slide-hover-p"><i>(My Profile Webpage)</i></p>
</div>
</div>
<div class="mySlides fade-car">
<div class="project-text">
<img src="images/global (35).jpg" class="slideshow-img img-fluid" alt="global6" />
<p class="slide-hover-p"><i>(My Profile Webpage)</i></p>
</div>
</div>
<div class="mySlides fade-car">
<div class="project-text">
<img src="images/global (35).jpg" class="slideshow-img img-fluid" alt="global6" />
<p class="slide-hover-p"><i>(My Profile Webpage)</i></p>
</div>
</div>
<a id="p-others" class="previous" onclick="plusSlides(-1)">❮</a>
<a id="n-others" class="nexxt" onclick="plusSlides(1)">❯</a>
</div>
<!--slideshow ends-->
Got it to work with the help of #RachelGallen by adding the missing elements with the "dot" class. Thanks! Also, sorry, I'm a noob with stackoverflow editing. I don't know why the code is showing like that.
<span class="dot" onclick="currentSlide(1)"></span> <span class="dot" onclick="currentSlide(2)"></span> <span class="dot" onclick="currentSlide(3)"></span>
Related
Hi I am using the basic W3 slideshow layout but It is not very good for the mobile version of my site.
I searched very hard to find a solution to this but it's always download some plug-in to make it work or something that doesn't respond very well to swipes
$('.slider').on('touchstart', function(event) {
const xClick = event.originalEvent.touches[0].pageX;
$(this).one('touchmove', function(event) {
const xMove = event.originalEvent.touches[0].pageX;
const sensitivityInPx = 5;
if (Math.floor(xClick - xMove) > sensitivityInPx) {
$(this).slider('next');
}
else if (Math.floor(xClick - xMove) < -sensitivityInPx) {
$(this).slider('prev');
}
});
$(this).on('touchend', function() {
$(this).off('touchmove');
});
});
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("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";
}
* {
box-sizing: border-box
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.mySlides {
display: none
}
img {
vertical-align: middle;
}
/* Slideshow container */
.slideshow-container {
padding: 10px;
max-width: 1000px;
position: relative;
margin: auto;
-webkit-overflow-scrolling: touch;
}
/* 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;
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);
}
/* 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 {
animation-name: fade;
animation-duration: 1.5s;
}
#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
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slider" class="slideshow-container">
<!-- images -->
<div class="mySlides fade">
<!-- <div class="numbertext">1 / 3</div> -->
<img src="http://upload.wikimedia.org/wikipedia/commons/7/73/Lion_waiting_in_Namibia.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<img src="http://upload.wikimedia.org/wikipedia/commons/7/73/Lion_waiting_in_Namibia.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="http://upload.wikimedia.org/wikipedia/commons/7/73/Lion_waiting_in_Namibia.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="http://upload.wikimedia.org/wikipedia/commons/7/73/Lion_waiting_in_Namibia.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<!-- dots-->
<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>
</div>
Even though this is not pure Js and it is a different approach
I found that flickity.js and css is good for mobile and it's just 2 ajax calls like jquery
https://flickity.metafizzy.co/api.html
<script src="//cdnjs.cloudflare.com/ajax/libs/flickity/1.0.0/flickity.pkgd.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/flickity/1.0.0/flickity.css">
HTML
<div class="carousel">
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
</div>
CSS
/* external css: flickity.css */
* { box-sizing: border-box; }
body { font-family: sans-serif; }
.carousel {
background: #FAFAFA;
}
.carousel-cell {
width: 28%;
height: 200px;
margin-right: 10px;
background: #8C8;
border-radius: 5px;
counter-increment: carousel-cell;
}
/* cell number */
.carousel-cell:before {
display: block;
text-align: center;
content: counter(carousel-cell);
line-height: 200px;
font-size: 80px;
color: white;
}
.button {
font-size: 22px;
}
.button-group {
margin-bottom: 20px;
}
Js
// external js: flickity.pkgd.js
var flkty = new Flickity( '.carousel', {
groupCells: true
});
var buttonGroup = document.querySelector('.button-group');
var buttons = buttonGroup.querySelectorAll('.button');
buttons = fizzyUIUtils.makeArray( buttons );
buttonGroup.addEventListener( 'click', function( event ) {
// filter for button clicks
if ( !matchesSelector( event.target, '.button' ) ) {
return;
}
var index = buttons.indexOf( event.target );
flkty.selectCell( index );
});
Like i wrote in the comments, you have two typos: $(this).one('touchmove and .slider, which has to be $(this).on('touchmove and #slider.
But the main problem is your function slider(), which isn't defined. But you can use the function plusSlides(), that you are already using for the next and prev buttons.
Furthermore the touchmove event is firing very often until the touchend event is fired. Therefor the function plusSlides() is called multiple times. To fix this, stop the touchmove event listener when the function plusSlides() is called.
Working example:
$('#slider').on('touchstart', function(event) {
const xClick = event.originalEvent.touches[0].pageX;
$(this).on('touchmove', function(event) {
const xMove = event.originalEvent.touches[0].pageX;
const sensitivityInPx = 5;
if (Math.floor(xClick - xMove) > sensitivityInPx) {
plusSlides(1);
$(this).off('touchmove');
}
else if (Math.floor(xClick - xMove) < -sensitivityInPx) {
plusSlides(-1);
$(this).off('touchmove');
}
});
});
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("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";
}
* {
box-sizing: border-box
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.mySlides {
display: none
}
img {
vertical-align: middle;
}
/* Slideshow container */
.slideshow-container {
padding: 10px;
max-width: 1000px;
position: relative;
margin: auto;
-webkit-overflow-scrolling: touch;
}
/* 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;
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);
}
/* 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 {
animation-name: fade;
animation-duration: 1.5s;
}
#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
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slider" class="slideshow-container">
<!-- images -->
<div class="mySlides fade">
<!-- <div class="numbertext">1 / 3</div> -->
<img src="http://upload.wikimedia.org/wikipedia/commons/7/73/Lion_waiting_in_Namibia.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<img src="http://upload.wikimedia.org/wikipedia/commons/7/73/Lion_waiting_in_Namibia.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="http://upload.wikimedia.org/wikipedia/commons/7/73/Lion_waiting_in_Namibia.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="http://upload.wikimedia.org/wikipedia/commons/7/73/Lion_waiting_in_Namibia.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<!-- dots-->
<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>
</div>
When I refresh or start my website, the first image isn't shown. Also on my mobile device I see all the images of my image slide. When I scroll through my image slider, everything works great. How can I fix that my first image is shown, and on a mobile device I see only one image and not all 3. I have also a navbar, maybe the css of that part doesn't go well with the css of the image slider.
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
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";
}
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, 5000); // Change image every 2 seconds
}
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* 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;
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);
}
/* 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
}
}
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<!--<img src="images/logo-groot.png" style="width:100%">-->
<img src="https://images.unsplash.com/photo-1470104240373-bc1812eddc9f?ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDF8NnNNVmpUTFNrZVF8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" style="width:100%">
<div class="text">Nieuw!</div>
</div>
<div class="mySlides fade">
<!--<img src="images/vpersie.jpg" style="width:100%">-->
<img src="https://images.unsplash.com/photo-1431440869543-efaf3388c585?ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDJ8NnNNVmpUTFNrZVF8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" style="width: 100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<!--<img src="images/logo-klein.png" style="width:100%">-->
<img src="https://images.unsplash.com/photo-1611337473718-a2959f0004f8?ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDIyfDZzTVZqVExTa2VRfHxlbnwwfHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" style="width:100%">
<div class="text">Caption Three</div>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- The dots/circles -->
<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>
I am building a real estate website and I am wanting to have an image slideshow with photos of the property on the site. I'm using HTML, CSS, and JavaScript to do this.
Everything seems to be working fine, except I have a problem with opacity. My images are shown for a split second before the opacity goes to 0. I've inspected the slideshow in my Chrome devtools and that is how I know it's an opacity problem. Please let me know if you guys can find what's wrong in my code! I appreciate it!
HTML code
<!-- SLIDESHOW -->
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="img/main.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="img/malibu.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="img/test-img.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- The dots/circles -->
<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>
CSS
* {
box-sizing: border-box
}
body {
font-family: Verdana,
sans-serif; margin:0
}
.mySlides {
display: none
}
img {
vertical-align: middle;
}
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
.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;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.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;
}
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: 0}
to {opacity: 1}
}
#keyframes fade {
from {opacity: 0}
to {opacity: 1}
}
#media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
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";
}
Try to set animation-duration: 0s
Just add this code below your JS code.
var autoslideIndex = 0;
autoSlides();
function autoSlides() {
var i;
var slides= document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
autoslideIndex++;
if (autoslideIndex > slides.length) {autoslideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[autoslideIndex-1].style.display = "block";
dots[autoslideIndex-1].className += " active";
setTimeout(autoSlides, 2000); // Change image every 2 seconds
}
I've just started with CSS and JavaScript, and I tried to make an image slider by looking into w3schools. The slider works, but the first image always comes empty only with the navigation bars being visible.but once I click the next button, it works fine.I'm not understanding what to change with this. Here's the code.
'use strict';
var slideIndex = 1;
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
//alert('showslides('+ n +')\nslideIndex='+slideIndex);
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";
setTimeout(showSlides, 5000); // Change image every 5 seconds
}
* {
box-sizing: border-box;
}
body {
font-family: Verdana, sans-serif;
margin: 0
}
.mySlides {
display: none;
}
img {
vertical-align: middle;
}
/* 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
}
}
<body>
<?php
include './p1.php';
// put your code here
?>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="pics/bali2.jpg" height="400px" width="800px">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="pics/brazil1.jpg" height="400px" width="800px">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="pics/germany.jpg" height="400px" width="800px">
<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>
</body>
The slider works, but the first image always comes empty only with the navigation bars being visible
Just because of you apply css this mySlides on your, so your all div not visble. When you are click on next or previous or slider so particular container are showing.
So you need to apply the style="display: block;" on your first div.
DEMO
var slideIndex = 1,
interval;
function stopAndStart() {
if (interval) {
clearInterval(interval)
}
interval = setInterval(showSlides, 5000); // Change image every 5 seconds;
}
function plusSlides(n) {
showSlides(slideIndex += n);
stopAndStart()
}
function currentSlide(n) {
showSlides(slideIndex = n);
stopAndStart()
}
function showSlides(n) {
var i,
slides = document.getElementsByClassName("mySlides"),
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";
}
stopAndStart();
body {
font-family: Verdana, sans-serif;
margin: 0
}
.mySlides {
display: none;
text-align: center;
}
img {
vertical-align: middle;
}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
background: burlywood;
}
/* 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
}
}
<div class="slideshow-container">
<div class="mySlides fade" style="display: block;">
<div class="numbertext">1 / 3</div>
<img src="https://dummyimage.com/400x400/555985/fff&text=1">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="https://dummyimage.com/400x400/555985/fff&text=2">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="https://dummyimage.com/400x400/555985/fff&text=3">
<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 active" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
I would like to combine auto sliding and optional manual sliding. Like the slider would automatically change photos but there will be a chance to manually switch it(prev/next button or small dots).
I have not found any tutorial how to make it, but I´ve found a tutorial how to make either automatic or manual.
This is the manual slider
* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
.mySlides {
display: none;
}
/* 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 {display: block;}
to {margin: 0;}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<div style="width:100%;background-color: yellow;height:50px;"> </div>
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<div style="width:100%;background-color: black;height: 50px; "> </div>
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<div style="width:100%;background-color: blue;height: 50px;"> </div>
<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>
<script type="text/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";
}
</script>
and the automatic one has only change in js code
* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
.mySlides {
display: none;
}
/* 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 {display: block;}
to {margin: 0;}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<div style="width:100%;background-color: yellow;height: 50px;"> </div>
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<div style="width:100%;background-color: black;height:50px; "> </div>
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<div style="width:100%;background-color: blue; height: 50px;"> </div>
<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>
</section>
</article>
<script type="text/javascript">
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
}
</script>
Added function plusSlides() and now slideIndex updates correctly in currentSlide()
Replace your javascript code with this:
var slideIndex = 0;
var slides = document.getElementsByClassName("mySlides");
showSlides();
function showSlides() {
var i;
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, 5000); // Change image every 5 seconds
}
function currentSlide(no) {
var i;
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex = no;
slides[no-1].style.display = "block";
}
function plusSlides(n) {
var newslideIndex = slideIndex + n;
if(newslideIndex < 4 && newslideIndex > 0){
currentSlide(newslideIndex);
}
}
* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
.mySlides {
display: none;
}
/* 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 {display: block;}
to {margin: 0;}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<div style="width:100%;background-color: yellow;height:50px;"> </div>
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<div style="width:100%;background-color: black;height: 50px; "> </div>
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<div style="width:100%;background-color: blue;height: 50px;"> </div>
<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>
<script type="text/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";
}
</script>
enter image description here
I had an issue with the dots not becoming active and added a timer variable to allow for setTimeout and clearTimeout when using the buttons. Should work a little smoother.
var slideIndex = 0;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
var myTimer;
showSlides();
function showSlides() {
var i;
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
dots[i].className = dots[i].className.replace(" active", "");
}
slideIndex++;
if (slideIndex> slides.length) {slideIndex = 1}
dots[slideIndex-1].className += " active";
slides[slideIndex-1].style.display = "block";
myTimer = setTimeout(showSlides, 5000); // Change image every 5 seconds
}
function currentSlide(no) {
var i;
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
dots[i].className = dots[i].className.replace(" active", "");
}
slideIndex = no;
slides[no-1].style.display = "block";
dots[no-1].className += " active";
clearTimeout(myTimer);
myTimer = setTimeout(showSlides, 5000);
}
function plusSlides(n) {
var newslideIndex = slideIndex + n;
if(newslideIndex < 4 && newslideIndex > 0){
currentSlide(newslideIndex);
}
}