CSS: slide animation between slides - javascript

My simple code makes the slider clickable and on click will change slides. Now there is animation between slides a little bit broken. The only element with class "content" is animated.
This animation now overlaps elements with class "content" and then slide only from left to right.
Is there any option for how to make animation on elements with class "content" like when it is sliding the current "content" will go a little bit left and new "content" will goes left too but at the same time?
Something like this animation I need to achieve.
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].classList.remove("active");
}
for (i = 0; i < dots.length; i++) {
dots[i].classList.remove("active");
}
slides[slideIndex - 1].classList.add("active");
dots[slideIndex - 1].classList.add("active");
}
* {
box-sizing: border-box;
}
body {
font-family: Verdana, sans-serif;
margin: 0;
}
/* Slideshow container */
.slideshow-container {
height: 200px;
position: relative;
background: #f1f1f1f1;
}
/* Slides */
.mySlides {
width: 100%;
position: absolute;
padding: 80px;
text-align: center;
visibility: hidden;
transition: all 0s linear;
}
.mySlides .content {
transition: all 0.2s;
transform: translateX(-50px);
}
.mySlides.active {
visibility: visible;
}
.mySlides.active .content {
transform: translateX(0px);
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -30px;
padding: 16px;
color: #888;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
position: absolute;
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;
}
/* The dot/bullet/indicator container */
.dot-container {
text-align: center;
padding: 20px;
background: #ddd;
}
/* 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;
}
/* Add a background color to the active dot/circle */
.dot.active,
.dot:hover {
background-color: #717171;
}
/* Add an italic font style to all quotes */
q {
font-style: italic;
}
/* Add a blue color to the author */
.author {
color: cornflowerblue;
}
<div class="slideshow-container">
<div class="mySlides">
<div class="content">
<q>I have not failed. I've just found 10,000 ways that won't work.</q>
<p class=" author ">- Thomas A. Edison</p>
</div>
</div>
<div class="mySlides">
<div class="content">
<q>But man is not made for defeat. A man can be destroyed but not defeated.</q>
<p class=" author ">- Thomas A. Edison</p>
</div>
</div>
<div class="mySlides">
<div class="content">
<q>I have not failed. I've just found 10,000 ways that won't work.</q>
<p class=" author ">- Thomas A. Edison</p>
</div>
</div>
<a class="prev " onclick="plusSlides(-1) ">❮</a>
<a class="next " onclick="plusSlides(1) ">❯</a>
</div>
<div class="dot-container ">
<span class="dot " onclick="currentSlide(1) "></span>
<span class="dot " onclick="currentSlide(2) "></span>
<span class="dot " onclick="currentSlide(3) "></span>
</div>

Related

CSS: slide animation in quotes slideshow

I have a simple code that is changing on click slides.
I'm trying to make animation on an element with class "content" which may look like this animation.
I tried it in this code where it does not look good.
Is there any option for how to make animation on an element with class "content" like is in link which I sent above?
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].classList.remove("active");
}
for (i = 0; i < dots.length; i++) {
dots[i].classList.remove("active");
}
slides[slideIndex - 1].classList.add("active");
dots[slideIndex - 1].classList.add("active");
}
* {
box-sizing: border-box;
}
body {
font-family: Verdana, sans-serif;
margin: 0;
}
/* Slideshow container */
.slideshow-container {
height: 200px;
position: relative;
background: #f1f1f1f1;
}
/* Slides */
.mySlides {
width: 100%;
position: absolute;
padding: 80px;
text-align: center;
visibility: hidden;
transition: all 0s linear;
}
.mySlides .content {
transition: all 0.2s;
transform: translateX(-50px);
}
.mySlides.active {
visibility: visible;
}
.mySlides.active .content {
transform: translateX(0px);
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -30px;
padding: 16px;
color: #888;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
position: absolute;
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;
}
/* The dot/bullet/indicator container */
.dot-container {
text-align: center;
padding: 20px;
background: #ddd;
}
/* 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;
}
/* Add a background color to the active dot/circle */
.dot.active,
.dot:hover {
background-color: #717171;
}
/* Add an italic font style to all quotes */
q {
font-style: italic;
}
/* Add a blue color to the author */
.author {
color: cornflowerblue;
}
<div class="slideshow-container">
<div class="mySlides">
<div class="content">
<q>I have not failed. I've just found 10,000 ways that won't work.</q>
<p class=" author ">- Thomas A. Edison</p>
</div>
</div>
<div class="mySlides">
<div class="content">
<q>But man is not made for defeat. A man can be destroyed but not defeated.</q>
<p class=" author ">- Thomas A. Edison</p>
</div>
</div>
<div class="mySlides">
<div class="content">
<q>I have not failed. I've just found 10,000 ways that won't work.</q>
<p class=" author ">- Thomas A. Edison</p>
</div>
</div>
<a class="prev " onclick="plusSlides(-1) ">❮</a>
<a class="next " onclick="plusSlides(1) ">❯</a>
</div>
<div class="dot-container ">
<span class="dot " onclick="currentSlide(1) "></span>
<span class="dot " onclick="currentSlide(2) "></span>
<span class="dot " onclick="currentSlide(3) "></span>
</div>

How to add second .r2 animation class to this mySlides div before it show next or previous Slides

Here is a Quotes slider that show next or previous quote slides with fadeInUp animation that is comes from ".r1" animation class, Okay
But Now i want that when i click on next or previous button the quotes must be not only display none but also disappear with ".r2" fadeOutUp animation class.
In simple term, When i click on next or previous button the current quote slide must be disappear with .r2 animation and then parallel to it the next quote must be appear with .r1 class animation.
How it will be possible ?
Thanks in advance. Love You to Helping buddy :)
see my all codes here:
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";
}
<style>
/* animation Classes start */
.r1 {
animation: fadeInUp 1000ms both
}
#keyframes fadeInUp {
from {
opacity: 0;
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.r2 {
animation: fadeOutUp 1000ms both
}
#keyframes fadeOutUp {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(0, -100%, 0);
}
}
/* animation Classes End */
</style>
<style>
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
/* Slideshow container */
.slideshow-container {
position: relative;
background: #f1f1f1f1;
}
/* Slides */
.mySlides {
display: none;
padding: 80px;
text-align: center;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -30px;
padding: 16px;
color: #888;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
position: absolute;
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;
}
/* The dot/bullet/indicator container */
.dot-container {
text-align: center;
padding: 20px;
background: #ddd;
}
/* 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;
}
/* Add a background color to the active dot/circle */
.active, .dot:hover {
background-color: #717171;
}
/* Add an italic font style to all quotes */
q {font-style: italic;}
/* Add a blue color to the author */
.author {color: cornflowerblue;}
</style>
</head>
<body>
<div class="slideshow-container">
<div class="mySlides r1">
<q>I love you the more in that I believe you had liked me for my own sake and for nothing else</q>
<p class="author">- John Keats</p>
</div>
<div class="mySlides r1">
<q>But man is not made for defeat. A man can be destroyed but not defeated.</q>
<p class="author">- Ernest Hemingway</p>
</div>
<div class="mySlides r1">
<q>I have not failed. I've just found 10,000 ways that won't work.</q>
<p class="author">- Thomas A. Edison</p>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<div class="dot-container">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
i want that, When i click on next or previous button the current quote slide must be disappear with .r2 animation and then parallel to it the next quote must be appear with .r1 class animation.
Thanks in advance. Love You to Helping buddy :)
In order to execute an animation after the first one you can use the animationend event. Your code now is:
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++) {
if (slides[i].style.display == 'block') {
slides[i].className = slides[i].className.replace("r1", "r2");
}
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
if (document.querySelectorAll('.mySlides.r2').length == 0) {
// first slide to fade....
slides[slideIndex-1].style.display = "block";
}
dots[slideIndex-1].className += " active";
}
document.querySelectorAll('.mySlides').forEach(function(ele) {
ele.addEventListener('animationend', function(e) {
var prevEle = document.querySelector('.mySlides.r2');
if (prevEle != null) {
prevEle.style.display = 'none';
prevEle.classList.remove("r2");
prevEle.classList.add("r1");
var slides = document.getElementsByClassName("mySlides");
slides[slideIndex - 1].style.display = "block";
}
})
})
/* animation Classes start */
.r1 {
animation: fadeInUp 1000ms both
}
#keyframes fadeInUp {
from {
opacity: 0;
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.r2 {
animation: fadeOutUp 1000ms both
}
#keyframes fadeOutUp {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(0, -100%, 0);
}
}
/* animation Classes End */
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
/* Slideshow container */
.slideshow-container {
position: relative;
background: #f1f1f1f1;
}
/* Slides */
.mySlides {
display: none;
padding: 80px;
text-align: center;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -30px;
padding: 16px;
color: #888;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
position: absolute;
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;
}
/* The dot/bullet/indicator container */
.dot-container {
text-align: center;
padding: 20px;
background: #ddd;
}
/* 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;
}
/* Add a background color to the active dot/circle */
.active, .dot:hover {
background-color: #717171;
}
/* Add an italic font style to all quotes */
q {font-style: italic;}
/* Add a blue color to the author */
.author {color: cornflowerblue;}
<div class="slideshow-container">
<div class="mySlides r1">
<q>I love you the more in that I believe you had liked me for my own sake and for nothing else</q>
<p class="author">- John Keats</p>
</div>
<div class="mySlides r1">
<q>But man is not made for defeat. A man can be destroyed but not defeated.</q>
<p class="author">- Ernest Hemingway</p>
</div>
<div class="mySlides r1">
<q>I have not failed. I've just found 10,000 ways that won't work.</q>
<p class="author">- Thomas A. Edison</p>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<div class="dot-container">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
Without animationend event:
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++) {
if (slides[i].style.display == 'block') {
slides[i].className = slides[i].className.replace("r1", "r2");
}
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
if (document.querySelectorAll('.mySlides.r2').length == 0) {
// first slide to fade....
slides[slideIndex-1].style.display = "block";
}
dots[slideIndex-1].className += " active";
setTimeout(function() {
var prevEle = document.querySelector('.mySlides.r2');
if (prevEle != null) {
prevEle.style.display = 'none';
prevEle.classList.remove("r2");
prevEle.classList.add("r1");
var slides = document.getElementsByClassName("mySlides");
slides[slideIndex - 1].style.display = "block";
}
}, 200);
}
/* animation Classes start */
.r1 {
animation: fadeInUp 1000ms both
}
#keyframes fadeInUp {
from {
opacity: 0;
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.r2 {
animation: fadeOutUp 1000ms both
}
#keyframes fadeOutUp {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(0, -100%, 0);
}
}
/* animation Classes End */
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
/* Slideshow container */
.slideshow-container {
position: relative;
background: #f1f1f1f1;
}
/* Slides */
.mySlides {
display: none;
padding: 80px;
text-align: center;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -30px;
padding: 16px;
color: #888;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
position: absolute;
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;
}
/* The dot/bullet/indicator container */
.dot-container {
text-align: center;
padding: 20px;
background: #ddd;
}
/* 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;
}
/* Add a background color to the active dot/circle */
.active, .dot:hover {
background-color: #717171;
}
/* Add an italic font style to all quotes */
q {font-style: italic;}
/* Add a blue color to the author */
.author {color: cornflowerblue;}
<div class="slideshow-container">
<div class="mySlides r1">
<q>I love you the more in that I believe you had liked me for my own sake and for nothing else</q>
<p class="author">- John Keats</p>
</div>
<div class="mySlides r1">
<q>But man is not made for defeat. A man can be destroyed but not defeated.</q>
<p class="author">- Ernest Hemingway</p>
</div>
<div class="mySlides r1">
<q>I have not failed. I've just found 10,000 ways that won't work.</q>
<p class="author">- Thomas A. Edison</p>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<div class="dot-container">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>

Slide section based on the anchor link

I need to create a view that can be slided based on the anchor link clicked.
Here is the sample image on how it is supposed to look.
When clicked on appropriate link it is slided left and displays the specific text associated with it.
It also has back button to take back to the previous view.
Here is the sample fiddle to play with - https://jsfiddle.net/0agfjh5t/5/
<div class="slider-view">
<div class="first-slide">
FIRST VIEW
SECOND VIEW
THIRD VIEW
</div>
<div class="second-slide">
<div id="first">
This should be displayed slided to view when 'FIRST VIEW' anchor is linked
</div>
<div id="second">
This should be displayed slided to view when 'SECOND VIEW' anchor is linked
</div>
<div id="third">
This should be displayed slided to view when 'THIRD VIEW' anchor is linked
</div>
</div>
<a>Go back to FIRST SLIDE</a>
</div>
this is not exact solution which you want but it should give you the idea regarding how you can achive a Slideshow / Carousel effect using vanilla JS and CSS. here is a fiddle as well
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";
}
.slider-view {
.first-slide {
background: lightgrey;
a {
display: block;
color: green;
font-weight: bold;
}
}
.second-slide {
> div {
display: none;
}
}
}
* { 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;
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}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
<div class="slider-view">
<div class="first-slide">
<- Back
<span class='dot'></span>FIRST VIEW
<span class='dot'></span>SECOND VIEW
<span class='dot'></span>THIRD VIEW
</div>
<div class="second-slide slideshow-container">
<div id="first" class="mySlides fade">
This should be displayed 'FIRST VIEW' anchor is linked
</div>
<div id="second" class=" mySlides fade">
This should be displayed 'SECOND VIEW' anchor is linked
</div>
<div id="third" class=" mySlides fade">
This should be displayed 'THIRD VIEW' anchor is linked
</div>
</div>
</div>

First image of slideshow does not load

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>

Javascript - CSS Slideshow not displaying default image

I am having an issue with CSS slideshow I've implemented into my current passion-project, in which there is no default image being displayed upon load of the web-page. Upon navigation/dot press, images are successfully displayed, but I can't seem to figure out the small code snippet (presumably missing from the Javascript function) that would display the first image on page load. I've attempted to simply add the "active" class to the desired image, but this only makes the 'dot' button appear active with no corresponding image being displayed. Appreciate any assistance
Here's the code:
var slideIndex = 1;
function plusSlides(n) {
'use strict';
showSlides(slideIndex += n);
}
function currentSlide(n) {
'use strict';
showSlides(slideIndex = n);
}
function showSlides(n) {
'use strict';
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";
}
* {
box-sizing: border-box
}
body {
font-family: Verdana, sans-serif;
margin: 0
}
.mySlides {
display: none
}
/* Slideshow container */
.slideshow-container {
max-width: 400px;
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 see-through background */
.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;
}
/* */
.transition {
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,
.transition:hover {
background-color: #222;
}
/* 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="homePage">
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 2</div>
<img src="graphics/logo.jpg" style="width:100%">
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 2</div>
<img src="graphics/1.jpg" style="width:100%">
<div class="text"></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="transition" onclick="currentSlide(1)"></span>
<span class="transition" onclick="currentSlide(2)"></span>
<br>
</div>
You can give another class to the first image in the slider
<div class="mySlides fade block ">
<div class="numbertext">1 / 2</div>
<img src="#" style="width:100%">
<div class="text"></div>
</div>
Then you give it a display:block
.block {
display:block;
}
Example : https://jsfiddle.net/1ueun1L1/2/

Categories