To begin, I know this is a very basic question. However, I am not well taught in Javascript and I focus on design in general. On my website right now once you click on an arrow it takes you forwards or backwards within a collection of images. I would like for this function to also apply to the captions I created below the images. Once you click the arrow to move through the images, it should move through the captions below simultaneously. I almost achieved this by creating another function for the captions that would fire on click for the same arrows, this however, did not work. I would appreciate some help. Below is a bit of the javascript. I will also link the live website. Note that within the code is an index for dots which displayed the location among the slides, I however abandoned this idea.
var sliderIndex = 1;
function setSlider(){
showSliders(sliderIndex);
}
//slider image index
function plusSlider(n) {
showSliders(sliderIndex += n);
}
//dot index
function currentSlider(n) {
showSliders(sliderIndex = n);
}
function showSliders(n) {
var i;
var slides = document.getElementsByClassName("manualslider");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {sliderIndex = 1}
if (n < 1) {sliderIndex = 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[sliderIndex-1].style.display = "block";
dots[sliderIndex-1].className += " active";
}
//Manual Slide
setSlider();
Website
Thank you and sorry if this is basic.
Edit: the class name for the captions is manualsliderb
Related
I have slider with right left click button and its sliding fine but not smooth sliding and I would like to auto slide my banner images with 4-5 sec duration, I have not found any tutorial how to make it auto slide, please check my script.
<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>
I understand there are two questions:
How can I make it smoother?
That'd have to do with choosing a 'transitionable' CSS property instead of display, such as transform. See example: https://codepen.io/d88naimi/pen/YzzOQPB
Auto sliding could be achieved by setting an interval at which you'd run the active slide setting function. See: https://www.w3schools.com/jsref/met_win_setinterval.asp
Hope it helps. Enjoy the process.
I am very new in JavaScript. I have multiple sliders on a single screen. You can see by going on this link: http://iliachtida.sportpolis.gr/play-unit/#
I am running a slider when click on the current product, but my slider behavior goes wrong when I click on the arrow.
When I click on the arrow only one product image is displayed, all the other images are not displayed.
I want to run different sliders for different products. Suppose I have four products on this screen and every product has four images. I want to run first product images on first product arrow click, second product images on second product arrow click, etc. I hope you understand.
I have tried many code, but it does not work for me.
This is my code:
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("size-full");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++)
{
//alret(slideIndex);
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";
}
I'm trying to add manual control to an auto slider: https://jsfiddle.net/t8ap0gvz/ The auto play works but the manual controls (prev/next & dots) don't function. What am I doing wrong?
var slideIndex = 0;
var slides = document.getElementsByClassName("mySlides");
showSlides();
function showSlides() {
var i;
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, 5000); // Change image every 5 seconds
}
function currentSlide(no) {
var i;
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex = no;
slides[no-1].style.display = "block";
}
function plusSlides(n) {
var newslideIndex = slideIndex + n;
if(newslideIndex < 4 && newslideIndex > 0){
currentSlide(newslideIndex);
}
}
In the answer above,he said about the DOM to load, in JSfiddle in the option of the javascript change the order in where the javascript is write. For functions in onclick is better put after all the html, by default JSfiddle put in windows.onload so only change the order in No wrap - bottom of and this will work.
In LOAD TYPE select that option
In a real code HTML the script tag will be in the end of your HTML body. In a script tag.
I think it's loading the functions before the html. When I move the call of showSlides() to like below it works:
// Await DOM to be loaded
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', () => {
showSlides();
});
} else {
showSlides();
}
My slideshow consists of 8 images but only one is displayed. I figure out it is something to do with slides.length but i just don't know how exactly to alter it. My js code is as below.
window.addEventListener('DOMContentLoaded',init,false);
function init(){
'use strict';
var slideIndex = 1;
showSlides(slideIndex);
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
console.log(slides.length);
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", "");
}
console.log(slides,slides.length,slideIndex-1,slides[0]);
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
}
Some problems I've noticed:
You only run this code once, so the slides won't get updated.
You never increase or decrease slideIndex
What you can do:
Run this on a timer to update every few seconds or on a button click
Increase the slideIndex each time to allow the slide to change.
If you are still having trouble, please give us a bit more information. Good luck
been fighting to get a solution, sorry took a while but i came up with something to increase/decrease the slideshows? I however can't resize the images(they appear too big on the slideshow)! I also can't have the first image displayed! The images on appear onclick. here is the new js code.
window.addEventListener('DOMContentLoaded',init,false);
function init(){
'use strict';
var slideIndex = 0; //first img
var prev=document.querySelector('[class="prev"]'); //get arrow
var next=document.getElementsByClassName('next')[0]; //get arrow
/*invoke function with clicl on arrow*/
next.addEventListener('click',
function(){showSlides(slideIndex)});
function showSlides() {
//console.log(slideIndex);
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
//console.log(slides.length);
if (slideIndex > slides.length) {slideIndex = 1} //wenn ende erreicht, dann von vorn
else slideIndex++;
//console.log(slideIndex);
slides[slideIndex-1].style.display = "none";
slides[slideIndex].style.display="block";
dots[slideIndex].className += " active";
}
}
window.onload = function () {
var slideShow = function () {
var i;
var slides = document.querySelectorAll(".slides");
for (i = 0; i < slides.length; i++) {
slides[i].setAttribute("style","display:none");
}
count++;
if (count > slides.length) { count = 1; }
slides[count-1].setAttribute("style","display:block");
setTimeout(slideShow, 3600);
}
var count = 0;
slideShow();
}
window.onload = function () {
/* ...then execute the content of the referenced FN */
'use strict';
function showData() {
var info = document.getElementById('info');
var selctedImg = this;
var html = '<b>Alle Informationen des Bildes:</b>';
html += '<ul>';
html += '<li><b>src-Attribut:</b><br>' + selctedImg.src + '</li>';
html += '<li><b>alt-Attribut:</b><br>' + selctedImg.alt + '</li>';
html += '<li><b>title-Attribut:</b><br>' + selctedImg.title + '</li>';
html += '<li><b>id-Attribut:</b><br>' + selctedImg.id + '</li>';
html += '</ul>';
info.innerHTML = html;
}
var img = document.getElementById('images').getElementsByTagName('img');
console.log(img);
/* Bind the event handlers.
After this code block an information [ev] or [event] can be seen at the img element in the input sector of the browser */
for (var index = 0; index < img.length; index++) {
img[index].onmouseover = showData;
}
I've been following a slideshow tutorial on w3schools to learn how to create my own.
This is the link to the tutorial's code. What I am referring to is this code however.
<script>
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
}
</script>
I wanted to make multiple slideshows for a single page so I made it so this section of the code would take a parameter and then I could just insert my list of images. But when I changed the code to this...
var images = document.getElementsByClassName("mySlides");
var imageNum = document.getElementsByClassName("dot");
showSlides(images, imageNum);
function showSlides(slides, dots) {
var i;
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);
}
Complete code available via this link.
It gives me the error property of length undefined, even though .length can be used on a HTML Collection.
Why does it seem that this function cannot accept a HTML Collection as a parameter?
Edit: After looking at feedback and noticing that I made it harder for people to help me, I made a codesandbox link with my issue. I included the solution as a comment, so people can see before and after. I also included the entire function above.
Thank you for your feedback so I can make questions more clear and sorry about the trouble!
It's because of that line at the end of the function
setTimeout(showSlides, 2000); // Change image every 2 seconds
it call showSlides without any arguments
To add argument to call you can do :
setTimeout(() => { showSlides(slides, dots) }, 2000);
// call from an anonymous function
// or
setTimeout(showSlides, 2000, slides, dots);
// use additional params of setTimeout
Here's the doc for setTimeout