I have a simple carousel using JavaScript, html and CSS with three images.
When 'prev' and 'next' buttons are clicked manually, the carousel will cycle continually, so when the visitor reaches the third image and clicks/taps 'next' it goes back to image 1.
How can I make this cycling happen automatically on page load?
Here is the code on codepen.io
And this is the same code below. I have substituted the images with coloured divs:
let 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) {
let i;
if (document.querySelector(".carousel")) {
let slideshowPage = document.querySelector(".carousel");
if (slideshowPage.classList.contains("carousel")) {
let slides = slideshowPage.querySelectorAll(".mySlides");
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";
}
}
}
.carousel {
min-height: 200px;
background-color: #e6e6e6;
position: relative;
}
.mySlides {
display: none;
height: /*auto;*/ 200px; /* size for this demo only */
width: /*auto;*/ 350px; /* size for this demo only */
padding: 1rem 3.5rem;
background-color: #0c991f;
margin: 0 auto;
}
.mySlides.two {
background-color: #e08a12;
}
.mySlides.three {
background-color: #135dd6;
}
.slideshow-container {
position: relative;
margin: 0 auto;
}
.carousel .prev,
.carousel .next{
background-color: rgba(0,0,0,0.2);
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: #000000;
font-weight: bold;
font-size: 1.25rem;
transition: 0.6s ease;
border: none;
user-select: none;
left: 0;
}
.carousel .next{
left: unset;
right: 0;
border-radius: 3px 0 0 3px;
}
.carousel .prev:hover,
.carousel .prev:focus,
.carousel .next:hover,
.carousel .next:focus{
background-color: rgba(0,0,0,0.4);
color: #fff;
}
.carousel .fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade,
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
<div class="carousel">
<div class="slideshow-container">
<div class="mySlides one">This div represents image 1</div>
<div class="mySlides two">This div represents image 2</div>
<div class="mySlides three">This div represents image 3</div>
</div>
<div class="direction prev" tabindex="0" onclick="plusSlides(-1)" role="button">❮</div>
<div class="direction next" tabindex="0" onclick="plusSlides(1)" role="button">❯</div>
</div>
Add setInterval to the script like,
setInterval(function() {
plusSlides(1)
}, 2000);
You can change the interval as per your need.
Modified Snippet:
let 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) {
let i;
if (document.querySelector(".carousel")) {
let slideshowPage = document.querySelector(".carousel");
if (slideshowPage.classList.contains("carousel")) {
let slides = slideshowPage.querySelectorAll(".mySlides");
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";
}
}
}
setInterval(function() {
plusSlides(1)
}, 2000);
.carousel {
min-height: 200px;
background-color: #e6e6e6;
position: relative;
}
.mySlides {
display: none;
height: /*auto;*/ 200px; /* size for this demo only */
width: /*auto;*/ 350px; /* size for this demo only */
padding: 1rem 3.5rem;
background-color: #0c991f;
margin: 0 auto;
}
.mySlides.two {
background-color: #e08a12;
}
.mySlides.three {
background-color: #135dd6;
}
.slideshow-container {
position: relative;
margin: 0 auto;
}
.carousel .prev,
.carousel .next{
background-color: rgba(0,0,0,0.2);
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: #000000;
font-weight: bold;
font-size: 1.25rem;
transition: 0.6s ease;
border: none;
user-select: none;
left: 0;
}
.carousel .next{
left: unset;
right: 0;
border-radius: 3px 0 0 3px;
}
.carousel .prev:hover,
.carousel .prev:focus,
.carousel .next:hover,
.carousel .next:focus{
background-color: rgba(0,0,0,0.4);
color: #fff;
}
.carousel .fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade,
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
<div class="carousel">
<div class="slideshow-container">
<div class="mySlides one">This div represents image 1</div>
<div class="mySlides two">This div represents image 2</div>
<div class="mySlides three">This div represents image 3</div>
</div>
<div class="direction prev" tabindex="0" onclick="plusSlides(-1)" role="button">❮</div>
<div class="direction next" tabindex="0" onclick="plusSlides(1)" role="button">❯</div>
</div>
Related
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>
I have a failure message in my console. It says:
script.js:151 Uncaught TypeError: Cannot read property 'className' of undefined
at showSlides (script.js:151)
at script.js:126
Its about a Slider I got from W3 School (Link)
I changed a bit the Code from W3 and it shows me that Message in the Console. Also if i click on one arrow in the slider this will show in the Console:
Uncaught TypeError: dots[(slideIndex - 1)] is undefined
showSlides http://127.0.0.1:57616/js/script.js:151
<anonymous> http://127.0.0.1:57616/js/script.js:126
script.js:151:5
I feel like I'm missing something or forgot about something to change in the JavaScript. Unfortunately I'm not that good in coding in JS.. So I hope somebody could help me with the problem! Thanks a lot!
HTML
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<img src="/img/szene2-werkzeuge.png" style="width:100%">
<p class="caption-text">Werkzeuge</p>
</div>
<div class="mySlides fade">
<img src="/img/szene2-feuer.png" style="width:100%">
<p class="caption-text">Feuer</p>
</div>
<div class="mySlides fade">
<img src="/img/szene2-ziege.png" style="width:100%">
<p class="caption-text">Nutztiere</p>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
CSS
.slideshow-container {
z-index: 20;
max-width: 400px;
position: absolute;
margin: auto;
top: 45%;
left: 45%;
background-image: url(/img/szene2-slider-BG.png);
background-repeat: no-repeat;
background-origin: padding-box;
background-position: center;
background-size: 100%; }
/* 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: 50%;
user-select: none;
background-color: #c7113c;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 50%;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: #333333;
}
.caption-text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: -10px;
width: 100%;
text-align: center;
}
/* 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}
}
and JS:
// 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";
}
There are no element found with var dots = document.getElementsByClassName("dot");
when try dots[slideIndex-1].className += " active";
it gives error Cannot read property 'className' of undefined
may be you messing some element of dot class in html
I added some div of dot class in html now it working fine
// 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");
//console.log(slides);
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";
}
// console.log(slides);
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
//console.log(slides);
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
.slideshow-container {
z-index: 20;
max-width: 400px;
position: absolute;
margin: auto;
top: 45%;
left: 45%;
background-image: url(/img/szene2-slider-BG.png);
background-repeat: no-repeat;
background-origin: padding-box;
background-position: center;
background-size: 100%; }
/* 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: 50%;
user-select: none;
background-color: #c7113c;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 50%;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: #333333;
}
.caption-text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: -10px;
width: 100%;
text-align: center;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 150px;
width: 150px;
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="/img/szene2-werkzeuge.png" style="width:100%">
<p class="caption-text">Werkzeuge</p>
</div>
<div class="mySlides fade">
<img src="/img/szene2-feuer.png" style="width:100%">
<p class="caption-text">Feuer</p>
</div>
<div class="mySlides fade">
<img src="/img/szene2-ziege.png" style="width:100%">
<p class="caption-text">Nutztiere</p>
</div>
<div class="dot"> </div>
<div class="dot"> </div>
<div class="dot"> </div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
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/
I am trying to create an overlay over an image such that the overlay should fade-in over 0.25sec when that image is in view, then fade-out after 3 seconds. On a hover event, the overlay should fade-in again, then fade-out when the cursor is no longer hovering. How do I achieve the aforementioned? I have the following:
.img-container {
position: relative;
}
.img-container img {
display: block;
width: 100%;
}
.overlay {
position: absolute;
top: 50;
left: 0;
right: 0;
bottom: 0;
width: 30%;
text-align: center;
opacity: 0;
transition: opacity 0.25s; /* fade-in over s time */
/* background: black; */
/* color: white; */
/*display: flex;
align-items: center;
justify-content: center;*/
font-size: 1em;
background-color: rgba(0,0,0,0); /* Black background with opacity */
}
.img-container:hover .overlay {
opacity: 1;
}
.image {
display: block;
width: 100%;
height: auto;
}
I would also want to achieve the same thing for a slideshow:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing:border-box}
body {font-family: Verdana,sans-serif;margin:0}
.mySlides {display:none}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor:pointer;
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
</style>
</head>
<body>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="img_nature_wide.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="img_fjords_wide.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="img_mountains_wide.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>
</body>
</html>
You can play with transition:
.container {
width: 200px;
height: 200px;
border: 1px solid red;
transition: background-color 3s;
background-color: green;
}
.container:hover {
background-color: yellow;
transition: background-color 0.25s;
}
<div class="container"></div>
I have the following slider, but when i load the page it does not show the first image. I have to click the button to load the image. How can I do it to show the first image by default? Here is my javascript:
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
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>
Here is my html:
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="view8.png" style="width:100%">
<div class="title">David Lee CEO of Hing Wa Lee Group</div>
<div class="text">David Lee has turned the Hing Wa Lee Group Into one of the largest luxury watch retailers in the US</div>
<!--------BUTTON-------->
<div id="hovers">
<a href="#" class="buttonslider">
<span class="contentbutslider"> Read More</span>
</a></div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="view9.png" style="width:100%">
<div class="title">One on One Business Lessons</div>
<div class="text">Gain Access To Weekly World Entrepreneurs and their stories to success.</div>
<!--------BUTTON-------->
<div id="hovers">
<a href="#" class="buttonslider">
<span class="contentbutslider"> Read More</span>
</a></div>
</div>
Here is my CSS:
* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
max-width: 1600px;
height:438px;
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: 28px;
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 title and text */
.title {
color: #f2f2f2;
font-size: 58px;
padding: 18px 22px;
position: absolute;
bottom: 158px;
width: 100%;
text-align: center;
}
.text {
color: #f2f2f2;
font-size: 28px;
padding: 18px 22px;
position: absolute;
bottom: 78px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor:pointer;
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
Can you help me with that. Also, when I go from slide to slide it becomes faster and faster and I would like to keep the same speed?
Can anybody help? Thank you
Modified all the code, check it again please:
<script>
var slideIndex = 0;
function plusSlides(n) {
slideIndex += n;
showSlides();
}
function currentSlide(n) {
slideIndex = n;
showSlides();
}
function showSlides() {
var slides = document.getElementsByClassName("mySlides");
for (var i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex> slides.length) {slideIndex = 0}
slides[slideIndex].style.display = "block";
}
setTimeout(showSlides, 2000); // Change image every 2 seconds
</script>