Add bullets to slider that automatically change with the right slide - javascript

I made a slider with seven pictures and next and previous buttons. The slider works automatically and when hovering the slider the loop stops.
I've tried to add interactive bullets - now wrote in static HTML - that respond to their given picture.
The bullets should be as many as there are slides, but without having to add them myself one by one.
But I don't know how to do it. Can anyone help?
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", "");
}
if (slides.length > 0) {
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
}
$(document).ready(function() {
var interval = setInterval(function() {
var $curr = $('.mySlides:visible'),
$next = ($curr.next().length) ? $curr.next() : $('.mySlides').first();
$next.css('z-index',2).fadeIn('slow', function() {
$curr.hide().css('z-index',0);
$next.css('z-index',1);
});
}, 5000);
$('.mySlides').hover(function() {
clearInterval(interval);
}, function() {
interval = setInterval(function() {
var $curr = $('.mySlides:visible'),
$next = ($curr.next().length) ? $curr.next() : $('.mySlides').first();
$next.css('z-index',2).fadeIn('slow', function() {
$curr.hide().css('z-index',0);
$next.css('z-index',1);
});
}, 5000);
});
});
/* SLIDER*/
#containermio {
width: 100%;
margin: 0 auto;
overflow: hidden;
height: 536px;
position: relative;
}
#containermio a:hover {
color: white;
}
#containermio ul {
margin: 0px;
padding: 0px;
width: 100%;
list-style: none;
height: 100%;
position: absolute;
}
#containermio ul li {
height: 100%;
display: none;
position: relative;
}
#containermio ul li:first-child {
display: block;
}
#containermio ul li img {
width: 100%;
min-height: 100%;
}
/* FADE */
.mySlides {
-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}
}
/* SLIDE TITLE*/
.text {
margin: 0;
padding: 20px 0 0 25px;
font-size: 40px;
font-weight: 600;
color: #f7f7f7;
text-align: center;
position: absolute;
font-family: 'Montserrat', sans-serif;
}
/* ARROWS */
.prev, .next {
z-index: 99;
cursor: pointer;
position: absolute;
display: block;
top: 40%;
width: auto;
color: #fff;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
padding: 25px 25px 25px 25px;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
text-decoration: none;
}
/* DOTS */
.dotdiv {
bottom: 10px;
position: absolute;
width: 100%;
text-align: center;
z-index: 99;
}
.dot {
cursor:pointer;
height: 6px;
width: 6px;
margin: 0 2px;
background-color: #eee;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
z-index: 99;
}
.active, .dot:hover {
background-color: #717171;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="containermio">
<ul id="slidermio">
<li class="mySlides">
<div id="slide1" class="text">alicè</div>
<img src="http://digitaljournal.com/img/8/7/8/4/4/i/1/1/7/o/ulingan_kids.jpg"/>
</li>
<li class="mySlides">
<div id="slide2" class="text">halo halo</div>
<img src="http://freethoughtblogs.com/taslima/files/2012/06/22-funny2.jpg"/>
</li>
<li class="mySlides">
<div id="slide3" class="text">tilt</div>
<img src="http://kenwheeler.github.io/slick/img/fonz1.png"/>
</li>
<li class="mySlides">
<div id="slide4" class="text">artist unknown</div>
<img src="http://www.chinadaily.com.cn/china/images/2010WenUN/attachement/jpg/site1/20100921/0013729ece6b0e01d9691a.jpg"/>
</li>
<li class="mySlides">
<div id="slide5" class="text">insa</div>
<img src="http://kenwheeler.github.io/slick/img/fonz2.png"/>
</li>
<li class="mySlides">
<div id="slide6" class="text">blue lights</div>
<img src="http://kenwheeler.github.io/slick/img/fonz3.png"/>
</li>
<li class="mySlides">
<div id="slide7" class="text">outdoor festival</div>
<img src="http://kenwheeler.github.io/slick/img/fonz3.png"/>
</li>
</ul>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="dotdiv">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(+1)"></span>
<span class="dot" onclick="currentSlide(+1)"></span>
<span class="dot" onclick="currentSlide(+1)"></span>
<span class="dot" onclick="currentSlide(+1)"></span>
<span class="dot" onclick="currentSlide(+1)"></span>
<span class="dot" onclick="currentSlide(+1)"></span>
</div>
</div>
jsfiddle: https://jsfiddle.net/e9m3yupp/ (original: https://jsfiddle.net/hctxgqhx/)

I changed a lot in your code, in order to make it much more flexible and concise.
There are too many changes to explain every single one, so I used comments in the code snippet below instead, to explain what every line does.
But I will sum up the most major changes:
I put all the slides in an array. In that array, every slide is represented by an object containing a txt and an img property. The first index of the array ([0]) is used to store the slide-index.
I removed the <ul> with all the <li>s from the HTML, and replaced them with one <div>. And instead of switching elements, I change the source of the image.
This way, you don't have to add new slides to your HTML, all you have to do is add a slide-object to the slides-array in JS.
I moved the onclick handlers (for the arrows and bullets/dots) from HTML to JS. It's considered good practice to keep all JS-code outside of your HTML.
Don't pay too much attention to all the 'changes' in the CSS. Mostly, those are just me reordering and reformatting things for my own readability, but I'll admit it's an acquired taste:)
There might be however a few actual changes that are critical for proper layout/functionality, but like I said I changed so much that I don't even remember.
Unfortunately, I couldn't get the CSS fade animation (see code block below) to work with the new code. Because now there is only one element for all slides, switching the source instead of the elements, the animation doesn't fire anymore. I tried a lot of things, but with no success.
/* FADE */
.slide {-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}}
So I had to move that animation to JS, using jQuery:
$(".slide").fadeTo(0,.4,function(){$(this).fadeTo(1500,1);});
If you really want to do the animation with CSS, you could use similar code as I used to create the bullets/dots (see code snippet), to also create an <li> for every slide in the array. But that will crowd your webpage with a whole lot of elements the more slides you add... not sure which option is better.
Code Snippet:
$(document).ready(function() {
var interval;
var slides = [
1,
{txt:"alicè", img:"http://digitaljournal.com/img/8/7/8/4/4/i/1/1/7/o/ulingan_kids.jpg"},
{txt:"halo halo", img:"http://freethoughtblogs.com/taslima/files/2012/06/22-funny2.jpg"},
{txt:"tilt", img:"http://kenwheeler.github.io/slick/img/fonz1.png"},
{txt:"artist unknown", img:"http://www.chinadaily.com.cn/china/images/2010WenUN/attachement/jpg/site1/20100921/0013729ece6b0e01d9691a.jpg"},
{txt:"insa", img:"http://kenwheeler.github.io/slick/img/fonz2.png"},
{txt:"blue lights", img:"http://kenwheeler.github.io/slick/img/fonz3.png"},
{txt:"outdoor festival", img:"http://kenwheeler.github.io/slick/img/fonz3.png"}
];
/* SLIDE INTERVAL*/
function startSlideInterval(){interval = setInterval(function(){$(".next").click();},5000);} //trigger the next-button on every interval
$('.slide').hover(function(){clearInterval(interval);},startSlideInterval); //clear interval on 'hover', restart interval on 'unhover'
/* SHOW SLIDE */
function showSlide(n) {
if (n>slides.length-1) {n=1;} else if (n<1) {n=slides.length-1;} //loop around to first/last slide
$(".slide img").attr("src",slides[n].img); //change image
$(".slide div").html(slides[n].txt); //change text
$(".bullets span:nth-child("+slides[0]+")").removeClass("active"); //deactivate old bullet
$(".bullets span:nth-child("+n+")").addClass("active"); //activate new bullet
$(".slide").fadeTo(0,.4,function(){$(this).fadeTo(1500,1);}); //fade new slide
slides[0] = n; //set slide-index to new value
}
/* ARROWS */
$(".prev").click(function(){showSlide(slides[0]-1);}); //click-handler
$(".next").click(function(){showSlide(slides[0]+1);}); //click-handler
/* BULLETS */
(function(){
var bullets = "";
for (var i=1,count=slides.length; i<count; ++i) {bullets += "<span></span>"} //add a bullet for every slide in the array
$(".bullets").append(bullets); //append bullets to their container
$(".bullets span").click(function(){showSlide($(this).index()+1);}); //click-handler
})();
/* INITIALIZE */
showSlide(slides[0]); //show the first slide
startSlideInterval(); //start slide-interval
});
html {width:95%; height:90%;} /*ONLY FOR CODE SNIPPET*/
body {width:100%; height:100%;}
/* SLIDER */
#slider {position:relative; width:90%; height:80%; margin:0 auto; background-color:grey; overflow:hidden;}
#slider .slide {width:100%; height:100%; text-align:center;}
#slider .slide img {width:auto; height:100%;}
#slider .slide div {position:absolute; left:0; top:0; margin:0; padding:20px 0 0 25px; text-align:center; font-family:'Montserrat',sans-serif; font-size:40px; font-weight:600; color:#f7f7f7;}
/* ARROWS */
#slider a {
display: block;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: auto;
padding: 25px;
text-decoration: none;
font-size: 18px;
font-weight: bold;
color: #fff;
cursor: pointer;
z-index: 1;
transition: background-color 0.6s ease;
}
#slider a:hover {background-color:rgba(0,0,0,0.8);}
#slider a.prev {left:0; border-radius:0 3px 3px 0;}
#slider a.next {right:0; border-radius:3px 0 0 3px;}
/* BULLETS */
.bullets {position:absolute; bottom:10px; width:100%; text-align:center; z-index:1;}
.bullets span {
display: inline-block;
width: 6px;
height: 6px;
margin: 0 2px;
border-radius: 50%;
background-color: #eee;
cursor:pointer;
transition: background-color 0.6s ease;
}
.bullets span:hover, .bullets span.active {background-color:#717171;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="slider">
<div class="slide"><img src="" /><div></div></div>
<a class="prev">❮</a><a class="next">❯</a>
<div class="bullets"></div>
</div>
jsfiddle: https://jsfiddle.net/hctxgqhx/16/

Related

Slideshow code- displaying the first slide and extending the fade duration?

I'm a beginner at coding these more complicated sections that combine HTML, CSS and JS.
I am trying to get the slideshow to display the first slide and extend its duration displaying these slides before they randomly stop. The arrows and the dots work successfully and are shown on the webpage but, the duration of the displaying of slides isn't working and the first slide itself doesn't appear.
WEBSITE PAGE DISPLAY HERE
I have tried extending the duration but I don't know if it needs longer than that or not and I've tried altering the slideshow for statement in the JS code but decided against saving it as it altered the rest of the code.
Below is the picture link of my code which are listed // for different languages I'm using (may require zooming in):
CODE LINK HERE
The code doesn't have any error messages apart from that the dots variable isn't recognised in the JS code.
Thanks so much for your help.
//HTML
<script src="/JavaScript/slideshow.js"></script>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="/Images/CINEMASCREEN.jpg" style="width:100%;">
<div class="text">Caption One</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="/Images/cinemaFood.jpg" style="width:100%;">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="/Images/cinemakids.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>
<!-- 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}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Hide the images by default */
.mySlides {
display: hidden;
img {vertical-align: middle;}
}
.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: 200s;
animation-name: fade;
animation-duration: 200s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
//JS
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("dots");
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";
}
If you are new to JS and HTML I would recommend trying to use a plugin. Something like Slick Slider would be perfect.
A plugin will be much easier to setup and start using out of the box, it will also be a lot more responsive and functional.
Slick Slider lets you set duration, add or remove navigation dots/arrows, allows looping for the images and lets you choose between swipe and drag. Its also got great documentation and easy to follow examples.
You can learn more and get started here - https://kenwheeler.github.io/slick/
Once you get a feel for things using a plugin, you can start trying to write your own custom carousel.

Shadow Root getElementsByClassName

I am using LitElement to create custom Web Components. I am fairly new at it and decided to try making image slideshow. I used W3Schools slideshow as reference
while modifying it to work as LitElement.
The problem is, that when I am trying to use document.getElementByClassName I am not getting anything. I am familiar with this issue since I am working with Shadow DOM so I changed it to this.shadowRoot.getElementsByClassName. Unfortunately, I get told that what I am trying to use is not a function. How Do I get elements by class name when I am working with LitElement and shadow dom? In case you want to see how my component looks like, here is the code:
import { LitElement, html} from '#polymer/lit-element';
class ImageGalleryElement extends LitElement {
static get properties() { return {
slideIndex: { type: Number },
}};
constructor(){
super();
this.slideIndex=1;
this.showSlides(this.slideIndex);
}
// Next/previous controls
plusSlides(n) {
this.showSlides(this.slideIndex += n);
}
// Thumbnail image controls
currentSlide(n) {
this.showSlides(this.slideIndex = n);
}
showSlides(n) {
var i;
console.dir(this.shadowRoot);
var slides = this.shadowRoot.getElementsByClassName("mySlides");
console.dir(slides);
var dots = this.shadowRoot.getElementsByClassName("dot");
if (n > slides.length) {this.slideIndex = 1}
if (n < 1) {this.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[this.slideIndex-1].style.display = "block";
dots[this.slideIndex-1].className += " active";
}
render(){
return html`
<style>
* {box-sizing:border-box}
/* Slideshow container */
.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}
}
</style>
<!-- Slideshow container -->
<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/img-snow-wide" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="../../img/img-nature-wide" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="../../img/img-mountains-wide" style="width:100%">
<div class="text">Caption Three</div>
</div>
<!-- Next and previous buttons -->
<a class="prev" #click="${this.plusSlides(-1)}" >❮</a>
<a class="next" #click="${this.plusSlides(1)}">❯</a>
</div>
<br>
<!-- The dots/circles -->
<div style="text-align:center">
<span class="dot" #click="${this.currentSlide(1)}"></span>
<span class="dot" #click="${this.currentSlide(2)}"></span>
<span class="dot" #click="${this.currentSlide(3)}"></span>
</div>
`;
}
}
// Register the element with the browser
customElements.define('image-gallery-element', ImageGalleryElement);
The getElementsByClassName() method works only on a HTML Document or element.
The shadowRoot is a Document Fragment by inheritance, not a Document nor a HTML element.
Instead you should use querySelectorAll().
It's the same behavior for:
getElementsByTagName()
getElementsByClassName()
Note 1
getElementById() is not available on (in memory) nodes created with document.createElement
Test Selector Methods: https://jsfiddle.net/WebComponents/9yrtn8vb/
Note 2
Be aware slotted content is not moved to shadowDOM, it remains in ligthDOM
When you move Elements from lightDOM (in main DOM) to shadowRoot,
the Live Nodelist will be emptied
let pieces = document.getElementsByTagName("[TAGNAME here]");
console.warn(tags);// lists all tags
this.shadowRoot.append(...this.children);
console.warn(tags);// empty
LitElement also offers its own convenient decorators to access nodes: #query, #queryAll, and #queryAsync decorators
But for sure I understand if you want to stay vanilla :)

How to create auto slide images by javascript?

I'm trying to make autoslide images. I've searched but haven't found a solution that can help me.
I have var slideImages to keep all the images and set setInterval but my images still don't move.
Maybe there is something that I'm missing. Some advice would be much appreciated, thank you.
Please take a look at my code (When i posted my code here i don't know why my images didn't show just only one image)
// slideshow
let slideImages = document.getElementsByClassName("slide");
let i = 0;
function showImages() {
for (i = 0; i < slideImages.length; i++) {
slideImages[0].style.display = 'block';
}
};
function slideshow() {
if (i < slideImages.length - 1) {
i++;
}
else {
i = 0;
}
}
setInterval(slideshow(), 2000);
/*slideshow*/
#slide1 {
background-image: url(https://preview.ibb.co/mV3TR7/1.jpg);
}
#slide2 {
background-image: url(https://preview.ibb.co/bSCBeS/2.jpg);
}
#slide3 {
background-image: url(https://preview.ibb.co/kgG9Yn/3.jpg);
}
#slideshow {
position: relative;
max-width: 800px;
margin: 0 auto;
}
.slide {
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
width: 800px;
height: 400px;
margin: 0 auto;
max-width: 100%;
z-index: 1;
}
.slidecontent {
position: absolute;
color: white;
top: 50%;
left: 50%;
transform: translate3d(-50%,-50%,0);
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="index2.css" />
</head>
<body>
<div id="slideshow">
<div id="slide1" class="slide">
<span class="slidecontent">SlideImage1</span>
</div>
<div id="slide2" class="slide">
<span class="slidecontent">SlideImage2</span>
</div>
<div id="slide3" class="slide">
<span class="slidecontent">SlideImage3</span>
</div>
</div>
<script src="jquery.js"></script>
<script src="index2.js"></script>
</body>
</html>
Here's the Demo
let is EcmaScript6, i change using var.
Html
// Nothing change...
Js
// slideshow
var slideImages = document.getElementsByClassName("slide");
var counter = 0; //set index for timer
var duration = 2000; //set duration
//Hide each slide at first
function hideAllImages() {
for (var i = 0; i < slideImages.length; i = i + 1) {
/* console.log(slideImages[i]); */
slideImages[i].style.opacity = 0;
}
}
function slideshow() {
hideAllImages();
/* go to next slide */
counter = counter + 1;
/* reset to first slide when looping */
if (counter > slideImages.length - 1) {
counter = 0;
}
console.log(counter);
/* show the current slide */
slideImages[counter].style.opacity = 1;
}
setInterval(function() {
slideshow();
}, duration);
Css
/*slideshow*/
#slide1 {
background-image: url(https://preview.ibb.co/mV3TR7/1.jpg);
}
#slide2 {
background-image: url(https://preview.ibb.co/bSCBeS/2.jpg);
}
#slide3 {
background-image: url(https://preview.ibb.co/kgG9Yn/3.jpg);
}
#slideshow {
position: relative;
max-width: 800px;
margin: 0 auto;
}
.slide {
position: absolute;
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
width: 800px;
height: 400px;
margin: 0 auto;
max-width: 100%;
transition: opacity 300ms;
z-index: 1;
}
.slidecontent {
position: absolute;
color: white;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
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
}
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* 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 {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
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) {
.text {font-size: 11px}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Automatic Slideshow</h2>
<p>Change image every 2 seconds:</p>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="https://preview.ibb.co/mV3TR7/1.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="https://preview.ibb.co/bSCBeS/2.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="https://preview.ibb.co/kgG9Yn/3.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
</div>
<br>
<div style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</body>
</html>
You can refer the following link for the solution.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_auto
You can use javascript, but I would suggest using bootstrap to do this. I suffered while trying to make this work on my website and I would highly suggest using bootstrap because of its ease of use and if something goes wrong with it, it is a lot easier to fix. I recommend the w3schools article that was mentioned in the comments. https://www.w3schools.com/bootstrap/bootstrap_carousel.asp . If you do continue to want to use JS I wish you all the best :)

How to change active stage when i click on next button

I am trying to create slider with step and I am unable to find good solution with this and I have tried to modify many sliders like owl carousel and swipe slider but this didn't work.
jQuery(".step1").click(function() {
jQuery('.steps .stp .active').removeClass('active');
jQuery('.hot-section-right .active').removeClass('active');
jQuery('.step1 .stepp').addClass('active');
jQuery('.step-one').addClass('active');
});
jQuery(".step2").click(function() {
jQuery('.steps .stp .active').removeClass('active');
jQuery('.hot-section-right .active').removeClass('active');
jQuery('.step2 .stepp').addClass('active');
jQuery('.step-two').addClass('active');
});
jQuery(".step3").click(function() {
jQuery('.steps .stp .active').removeClass('active');
jQuery('.hot-section-right .active').removeClass('active');
jQuery('.step3 .stepp').addClass('active');
jQuery('.step-three').addClass('active');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="steps">
<div class="step1 stp"> <span class="stepp active">STEP 1</span></div>
<div class="step2 stp"> <span class="stepp">STEP 2</span></div>
<div class="step3 stp"> <span class="stepp">STEP 3</span></div>
</div>
<div class="hot-section-right">
<div class="step-one active"><img src="img/xstep-1.png"></div>
<div class="step-two"><img src="img/xstep-2.png"></div>
<div class="step-three"><img src="img/xstep-2.png"></div>
</div>
I've made a starter code for you. I think from this on you could style it and make it look better. I've also played a little bit with the code and created an autoplay function.I hope this will help you:
$(document).on('click', '.stepp', function() {
$('.active_btn').removeClass('active_btn');
$(this).addClass('active_btn');
var id = $(this).attr('id');
id = id.replace('step', '');
$('.active_img').removeClass('active_img');
$('#img' + id).addClass('active_img');
currentSlide = id - 1;
});
$(document).on('click', '.img', function() {
$('.active_img').removeClass('active_img');
$(this).addClass('active_img');
var id = $(this).attr('id');
id = id.replace('img', '');
$('.active_btn').removeClass('active_btn');
$('#step' + id).addClass('active_btn');
currentSlide = id - 1;
});
var currentSlide = 0; //start index
var totalElements = $(".img").length; //total number of slides
function autoplay() {
$(".img").eq(currentSlide).click();
currentSlide++;
if (currentSlide == totalElements) {
currentSlide = 0; //resetting the index when the end is reached
}
}
//call autoplay using setInterval every 1s
setInterval(autoplay, 1000);
body{
background: #F4F4F5;
}
.steps{
margin-bottom: 10px;
border: 1px solid #adadad;
border-radius: 20px;
max-width: 300px;
width: 100%;
text-align: center;
padding: 5px 5px;
box-sizing: border-box;
}
.img{
opacity: 0.6;
-webkit-transition: all 350ms;
-moz-transition: all 350ms;
-o-transition: all 350ms;
transition: all 350ms;
max-width: 100px;
display: table-cell;
vertical-align: middle;
}
.img img{
cursor: pointer;
max-width: 100%;
width: 100%;
height: auto;
}
.stp{
display: inline-block;
cursor: pointer;
}
.stepp{
-webkit-transition: all 350ms;
-moz-transition: all 350ms;
-o-transition: all 350ms;
transition: all 350ms;
padding: 5px 10px;
border-radius: 20px;
display: block;
}
.active_btn{
background: #fff;
box-shadow: 2px 2px 10px #000;
}
.active_img{
opacity: 1;
max-width: 140px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="steps">
<div class="stp"> <span id='step1' class="stepp active_btn">STEP 1</span></div>
<div class="stp"> <span id='step2' class="stepp">STEP 2</span></div>
<div class="stp"> <span id='step3' class="stepp">STEP 3</span></div>
</div>
<div class="hot-section-right">
<div id='img1' class="img active_img"><img src="http://cdn.craftsy.com/upload/1816128/project/119986/list_1891_119986_PaulsLandscapes_6.jpg"></div>
<div id='img2' class="img"><img src="http://cdn.craftsy.com/upload/1816128/project/119986/list_1891_119986_PaulsLandscapes_6.jpg"></div>
<div id='img3' class="img"><img src="http://cdn.craftsy.com/upload/1816128/project/119986/list_1891_119986_PaulsLandscapes_6.jpg"></div>
</div>

Disabling/hiding slideshow arrows on first/last slides

I am using a slideshow based on w3school's sample. I'd like to disable or hide the previous arrow on the first slide and next arrow on the last slide.
I believe I need to edit this JavaScript to include an if else clause (if first slide, hide .prev button, else show), but the problem is my lack of understanding. I have a basic understanding of JavaScript, but going deep into the math side (n or i values) is confusing me, and I haven't yet learned jQuery.
function plusSlides(n) {
showSlides(slideIndex += n);
}
Can anyone help me with the code, and also explain what the code would mean in layman's terms?
For easy reference, the code pulled straight from the example 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++) {
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 container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* 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="img1.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="img2.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="img3.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>
I'm not quite sure what part of the code you need an explanation for. In general terms it's just adding or substracting from the slide index, adjusting the index when it "overflows" or "underflows" and hiding the slides with a different index.
If you don't want to show first and last arrows you can just add code like
var prevArrow = document.getElementsByClassName('prev');
var nextArrow = document.getElementsByClassName('next');
prevArrow[0].style.display = "block";
nextArrow[0].style.display = "block";
if (slideIndex === 1) prevArrow[0].style.display = "none";
if (slideIndex === slides.length) nextArrow[0].style.display = "none";
That code just "hides" the "prev arrow when you're in the first slide and the "next" arrow when you're in the last", you can test it in the w3school page and it works. I hope that helps
There's a lot of room for optimization

Categories