I've been searching through forums for the past few hours and can't seem to figure out why I my onclick method isn't working properly.
For context, I'm trying to get this code to output something in the console when a button is clicked.
document.getElementsByClassName("next").onclick = function test() {
console.log("hello");
}
Here are my next/previous buttons:
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
The code I'm using was referenced from w3schools, although I modified it slightly. Here's the entirety of it:
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body onload="getInformation(), showSlides()">
<!-- Slideshow container -->
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides">
<div class="numbertext">1 / 5</div>
<img src="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
style="width:100%">
<div class="text"></div>
</div>
<div class="mySlides">
<div class="numbertext">2 / 5</div>
<img src="https://images.pexels.com/photos/730896/pexels-photo-730896.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
style="width:100%">
<div class="text"></div>
</div>
<div class="mySlides">
<div class="numbertext">3 / 5</div>
<img src="https://images.pexels.com/photos/57416/cat-sweet-kitty-animals-57416.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
style="width:100%">
<div class="text"></div>
</div>
<div class="mySlides">
<div class="numbertext">4 / 5</div>
<img src="https://images.pexels.com/photos/569170/pexels-photo-569170.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
style="width:100%">
<div class="text"></div>
</div>
<div class="mySlides">
<div class="numbertext">5 / 5</div>
<img src="https://images.pexels.com/photos/271955/pexels-photo-271955.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
style="width:100%">
<div class="text"></div>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- The dots/circles -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
<span class="dot" onclick="currentSlide(5)"></span>
</div>
</body>
</html>
CSS
html {
background-color: black;
}
body {
padding-top: 50px;
}
* {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;
}
/* 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}
}
Javascript
var slideIndex = 1;
showSlides(slideIndex);
function getInformation() {
console.log(document.getElementsByClassName("prev")[0].innerHTML);
console.log(document.getElementsByClassName("next")[0].innerHTML);
}
function updateInformation() {
console.log("The current slide is: " + slideIndex);
// console.log("Value in array is: " + [slideIndex-1]);
}
document.getElementsByClassName("next") = function test() {
console.log("hello");
}
// 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";
updateInformation();
}
If anyone could help I would greatly appreciate it. Let me know if you need any more information.
The getElementsBy* methods return HTMLCollections, which can be difficult to work with - and also, they're collections, not individual elements, so you'd have to select an individual element from it first before attaching a listener to the element. Consider using querySelectorAll instead, which returns a static NodeList - unlike an HTMLCollection, it can be iterated over directly, it won't change while it's being iterated over, and it's much more flexible.
Or if you're only selecting a single element, use querySelector instead:
document.querySelector('.next').addEventListener('click', function test() {
console.log("hello");
});
Avoid inline handlers (which are as bad as eval) and onclick, which restricts you to one listener of a type per element - use addEventListener instead.
Related
So i took this code off of w3schools to try and learn how to build a carousel from scratch and adapted IT to my own project but i've run into a problem where it won't show the first slide by default when the page loads. the carousel works fine otherwise once you click on the balls(dots?) meant to control it.
DEFAULT SLIDE NOT SHOWING
here is the html, css and javascript code..
let slideInd = 1;
showSlides(slideInd);
function showSlides(input){
let slides = document.getElementsByClassName("slides");
let balls = document.getElementsByClassName("balls");
if (input > slides.length) {slideInd = 1}
if (input < 1 ) {slideInd = slides.length}
for (let i=0; i < slides.length; i++){
slides[i].style.display = "none";
}
for (i=0; i < balls.length; i++){
balls[i].className = balls[i].className.replace(" active","");
}
slides[slideInd-1].style.display = "block";
balls[slideInd-1].className += " active";
}
function currentSlide(input) {
showSlides(slideInd = input);
}
.sw-containter{
max-width: 1560px;
position: relative;
margin: auto;
}
.slides{
display: none;
}
.slides img{
max-width: 1535px;
vertical-align: middle;
}
.text{
background-color: #000000;
color: white;
font-family: 'Source Code Pro', monospace;
font-weight: 400;
text-align: center;
position: absolute;
width: 1535px;
}
.balls{
cursor: pointer;
display: inline-block;
position: relative;
height: 10px;
width: 10px;
margin: 45px 3px;
background-color: #000000;
border-radius: 50%;
transition: background-color 0.6s ease;
}
.active, .balls:hover{
background-color: #D9D9D9;
}
.fade{
animation-name: fade;
animation-duration: 1s;
}
#keyframes fade{
from{opacity: .4;}
to {opacity: 1;}
}
<div class="sw-container">
<div class="slides fade">
<img src="/assets/imgs/fifa23.jpg" style="width:100%;">
<div class="text">Released on September 30th! Buy now!</div>
</div>
<div class="slides fade">
<img src="/assets/imgs/starocean23.webp" style="width:100%">
<div class="text">Releases on Octber 27th. Preorder Now!</div>
</div>
<div class="slides fade">
<img src="/assets/imgs/GOWcontroller.jpg" style="width:100%">
<div class="text">Preorders live now!</div>
</div>
<div class="slides fade">
<img src="/assets/imgs/gothamKnights23.jpg" style="width:100%">
<div class="text">Releases on October 21st!</div>
</div>
<div class="slides fade">
<img src="/assets/imgs/plagueTale23.jpg" style="width:100%">
<div class="text">Releases on October 18th!</div>
</div>
</div>
<!--slider balls-->
<div style="text-align:center;">
<span class="balls" onclick="currentSlide(1)"></span>
<span class="balls" onclick="currentSlide(2)"></span>
<span class="balls" onclick="currentSlide(3)"></span>
<span class="balls" onclick="currentSlide(4)"></span>
<span class="balls" onclick="currentSlide(5)"></span>
</div>
Any help is greatly appreciated!
NOTE: i have a display: none; line in CSS meant to stop all the slides from showing up at once, if i remove it they stack up on the page so i don't think that's the problem.
Tried changing the loops to see if i had typed something wrong but it didn't work
If you are using an external JavaScript file then you can call the function by adding event listeners in the JavaScript file.
Otherwise, you need to create tag and write the whole javascript code. Then it will work.
let slides = document.getElementsByClassName("slides");
let balls = document.getElementsByClassName("balls");
[...balls].forEach((element, index) => {
element.addEventListener("click", () => currentSlide(index + 1))
})
let slideInd = 1;
showSlides(slideInd);
function showSlides(input){
if (input > slides.length) {slideInd = 1}
if (input < 1 ) {slideInd = slides.length}
for (let i=0; i < slides.length; i++){
slides[i].style.display = "none";
}
for (let i=0; i < balls.length; i++){
balls[i].className = balls[i].className.replace(" active","");
}
slides[slideInd-1].style.display = "block";
balls[slideInd-1].className += " active";
}
function currentSlide(input) {
showSlides(slideInd = input);
}
.sw-containter{
max-width: 1560px;
position: relative;
margin: auto;
}
.slides{
display: none;
}
.slides img{
max-width: 1535px;
vertical-align: middle;
}
.text{
background-color: #000000;
color: white;
font-family: 'Source Code Pro', monospace;
font-weight: 400;
text-align: center;
position: absolute;
width: 1535px;
}
.balls{
cursor: pointer;
display: inline-block;
position: relative;
height: 10px;
width: 10px;
margin: 45px 3px;
background-color: #000000;
border-radius: 50%;
transition: background-color 0.6s ease;
}
.active, .balls:hover{
background-color: #D9D9D9;
}
.fade{
animation-name: fade;
animation-duration: 1s;
}
#keyframes fade{
from{opacity: .4;}
to {opacity: 1;}
}
<div class="sw-container">
<div class="slides fade">
<img src="https://images.unsplash.com/photo-1472214103451-9374bd1c798e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8cGljfGVufDB8fDB8fA%3D%3D&w=1000&q=80" style="width:100%;">
<div class="text">Released on September 30th! Buy now!</div>
</div>
<div class="slides fade">
<img src="https://i.pinimg.com/736x/f7/75/7d/f7757d5977c6ade5ba352ec583fe8e40.jpg" style="width:100%">
<div class="text">Releases on Octber 27th. Preorder Now!</div>
</div>
<div class="slides fade">
<img src="https://images.pexels.com/photos/670720/pexels-photo-670720.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" style="width:100%">
<div class="text">Preorders live now!</div>
</div>
</div>
<!--slider balls-->
<div style="text-align:center;">
<span class="balls"></span>
<span class="balls"></span>
<span class="balls"></span>
</div>
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.
I'm trying to build active dots for my slider and I found some reference on w3schools but I don't understand the logic behind the function that controls the dots. Anyone can explain to me how they work into the code below?
To mention: I know how the slider works ,but i don't understand how dots works!
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";
}
* {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}
}
<!-- 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="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>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- The dots/circles -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
When one of the dots are clicked the method currentSlide is called with a corresponding parameter. The method showSlides is then called (with the same parameter) which does the following:
saves the collection of elements with class name mySlides and dot into
two variables:
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
For more info:
getElementsByClassName() Documentation
if the passed parameter is bigger or smaller than the number of slides (if for example more dots exists than slides), then the index of the slide that will be displayed is set to value in order to still display a slide
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex =slides.length}
the value of property display is set to none for each slide
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
For more info:
Style display Property Documentation
CSS display Property Documentation
class active is removed from all dots
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
value of property display is set to block for the corresponding slide
slides[slideIndex-1].style.display = "block";
class active is added to the clicked dot
dots[slideIndex-1].className += " active";
I hope this is enough :)
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 :)
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