I have created image slide show. The code is below
HTML
<div class="slideshow-container">
<div class="mySlides fade">
<img src="https://i.pinimg.com/originals/bf/5f/95/bf5f9539ea9fa3eee60e961b7e50c8e1.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="http://www.holifestival.org/images/holi-image-4-big.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="https://searchengineland.com/figz/wp-content/seloads/2016/03/google-photos-images-camera-ss-1920-800x450.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">
<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 */
.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}
}
JavaScript
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
It workes as per my need but when it comes to previous button and next buttons clicked it is not moving to as per previous slide or next slide.
Live Demo:https://codepen.io/RamBM/pen/ppdRGo
Could any one please let me know or rectify me where I'm going wrong.
The main issue here is that you started renaming things but did not rename them all (plusDivs/plusSlides, showDivs/showSlides).
Also, slideIndex is declared twice, you should remove the second one.
You might want to clear your timeout when manually navigating, too.
Add a var timeout at the beginning, change your setTimeout to timeout = setTimeout, and then update plusSlides:
function plusSlides(n) {
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
showSlides(slideIndex += n);
}
Edit: example corrected codepen https://codepen.io/kLabz/pen/BJmWab?editors=1010
Related
Via w3 schools, I was able to make this slideshow and add it and make it work on my webpage. Everything is running smoothly except for the locations of the buttons. Currently they are within their own div, but I'm wanting them to be on top of the image in the bottom center.
So far I have tried removing the div and adjusting the position but that isn't working for me.
Below is the code and here is a Codepen. The actual slide may not work in the example (just finding this out now while entering the snippet), but I'm just looking on how to position the 3 dots of the <span class="dot" on top of the image
Thanks in advance!
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";
}
/* SLIDESHOW */
#slideshow {
height: 400px;
width: 100%;
position: relative;
margin: auto;
overflow: hidden;
}
#slideshow img {
height: 400px;
width: 100%;
}
/* 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.4s 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);
}
/* 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;
}
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
<div id="slideshow">
<div class="mySlides fade">
<img src="https://picsum.photos/1600/400">
</div>
<div class="mySlides fade">
<img src="https://picsum.photos/1600/400">
</div>
<div class="mySlides fade">
<img src="https://picsum.photos/1600/400">
</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>
Put the dots at the bottom of the #slideshow div with a parent div with a classname of "dots". Then add this css to the "dots" div.
.dots {
width: 100px;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -50px;
}
I have two divs, one encompassing the other. The inside div contains a list of items displayed horizontally with the condition (overflow-x: hidden). I have two buttons (moveRight, and moveLeft). The user should be able to click the buttons to view the rest of the items in the list that were initially hidden. For reference, I am trying to emulate something like this: https://codepen.io/anon/pen/RjYLmr
__________________
| (viewable frame)|
| |
item_one item_two item_three item_four item_five
|_________________|
*** Next viewable frame after moveRight is pushed.
__________________
| (viewable frame)|
| |
item_one item_two item_three item_four item_five
|_________________|
But I cannot use JQuery, also it should only slide to the next frame as opposed to all the way on each click. Please help, I am a new at front-end development.
Try to create a slideshow
Here's a link to W3school.
just change images with div/span/a/ you need and then play a little with css
here is my exemple for you ;)
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";
}
* {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: red;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
display:none; /* if you dont need caption*/
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
h2 {
margin-top:80px;
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">
<div class="numbertext">1 / 3</div>
<h2>Item Item</h2>
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<h2>Item Item 22</h2>
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<h2>Item Item 33</h2>
<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>
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 used the W3Schools example on how to load a slideshow, and the animations work perfectly, but it only comes up with three dots. I have to click on one of them for the picture to show up.
var slideIndex = 0;
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";
}
* {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 {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="images/slideshow/canarywharf.jpg" style="width:100%">
<div class="text">Our headquarters in London, England.</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="images/slideshow/new_york.jpg" style="width:100%">
<div class="text">The view from our offices in New York, USA.</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="images/slideshow/frankfurt.jpg" style="width:100%">
<div class="text">Our offices in Frankfurt, Germany.</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>
https://www.w3schools.com/howto/howto_js_slideshow.asp
I think your issue is related with the loading of the javascript code because you are loading it within the head element and in this case you have to ensure that the javascript code is executed when the DOM is loaded.
To solve it you can load the javascript code before the </body> tag to ensure that the DOM is loaded before the javascript is executed
Another approach could be to use jQuery to see when the document is ready, you could do:
$( document ).ready(function() {
showSlides(slideIndex);
});
But I prefer to load the javascript code at the bottom instead of using jQuery to avoid using another library. Besides, in my opinion it has a better performance because, if the javascript code is executed at the top of the document, it will be a visual delay before the end user sees the actual page.
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>