Develop Reference

Problems adding new sliders with javascript in the same page

I'm trying to add a new slider to a site (and 3º one... I already have 2), but when I try to add another, it doesn't work. I'm using javascript, but I don't know how to put the numbers (1,0) (1,1) etc. I have tried several options, but I can't get the correct one.
HTML:
1º slider
<div class="slideshow-container" onclick="plusSlides(1, 0)">
<div class="mySlides1">
<div class="numbertext">1/11</div>
<img src="IMG/Femeni-no/femenino-00.jpg" style="width:100%">
<div class="text-femenino">Femeni-NO</div>
</div>
2º slider
<div class="slideshow-container" onclick="plusSlides(1, 1)">
<div class="mySlides2">
<div class="numbertext">1/6</div>
<img src="IMG/Parasito/01.jpg" style="width:100%">
<div class="text-parasito">Parásito</div>
</div>
JS:
var slideIndex = [1,1];
/* Class the members of each slideshow group with different CSS classes */
var slideId = ["mySlides1", "mySlides2"]
showSlides(1, 0);
showSlides(1, 1);
function plusSlides(n, no) {
showSlides(slideIndex[no] += n, no);
}
function showSlides(n, no) {
var i;
var x = document.getElementsByClassName(slideId[no]);
if (n > x.length) {slideIndex[no] = 1}
if (n < 1) {slideIndex[no] = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex[no]-1].style.display = "block";
}// JavaScript Document
//disclaimer// I'm a begginer in coding and web design, willing to learn!

be aware of that
var slideIndex = [1,1]; !
in a glance i think array size limit could cause trouble.

How to solve "slider's all images display "in Angularjs But in HTML slider works properly

When I am using HTML, then image slider works properly but when I am using AngularJS then my image slider displays all image. After display all images when I clicking next button then my slider work properly. I was checking slider length then it shows me one slider but I have 4 images, and when I click the next button then it shows 4 slider length. Please help me!!! thanks in advance
HTML code
<div class="container" ng-init="image()">
<div class="row">
<div class="col-md-12" ng-repeat="img in images">
<div class="mySlides">
<div class="numbertext">{{img.id}}</div>
<img class="size-i" ng-src="{{img.oe_images}}" style="width:100%;">
</div>
</div>
<div class="row">
<div class="col-md-12">
<a class="prev" style="font-size:36px;" onclick="plusSlides(-1)">❮</a>
<a class="next" style="font-size:36px;" onclick="plusSlides(1)">❯</a>
<div class="row paddi">
<div class="column" ng-repeat="img in images">
<img class="demo cursor border-demo" ng-src="{{img.oe_images}}" style="width:100%;" data="{{img.id}}" ng-click="currentSlide(img.id)" alt="{{img.oe_images}}">
</div>
</div>
</div>
</div>
</div>
</div>
//Javascript code for image slider
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
console.log(n);
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
console.log(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>
//Controller.js file 'use strict'; var app = angular.module('myApp', []); app.controller('indexCtrl', function($scope,$http) { $scope.image = function(){ $http.get(baseURL+'pptAllImages').then(successCallback, errorCallback); function successCallback(response){
$scope.images=response.data; console.log($scope.images); } function errorCallback(error){ console.log(error); } }; });
[In the picture showing all images display after click next button it works properly][1]
[1]: https://i.stack.imgur.com/6zz7k.png
Everything is good in HTML code but this problem comes when I am using AngularJS. I am using automatic slider then it's work properly in AngularJS but I want to onclick slider. I also used other onclick slider but in every onclick slider comes same problem. All data I am fetching from database but problem comes only in AngularJS. Please help me.

You would need to move the javascript functions into the controller and bind them to the scope.
$scope.showSlides(){}
Also make sure you bootstrap the app with
ng-app="myApp"
Example of working angular image slider...
http://jsfiddle.net/HoffZ/t8BaZ/

Multiple Slideshows not working (javascript)

Introduction
I have 2 simple slideshows on a single page. Only one works. Please help.
I did research on how to develop a simple sideshow and it worked at first
But then i added another slideshow and it went out of wacko
My Code
//slideshow-pokeballs.js
var images = ["https://img.rankedboost.com/wp-content/uploads/2016/07/PokeBall.png", "https://img.rankedboost.com/wp-content/uploads/2016/07/Great-Ball.png", "https://img.rankedboost.com/wp-content/uploads/2016/07/Ultra-Ball.png", "https://img.rankedboost.com/wp-content/uploads/2016/07/Master-Ball.png"];
var imageNumber = 0;
var imageLength = images.length - 1;
function changeBall(x) {
imageNumber += x;
document.getElementById("pokeballs").src = images[imageNumber];
return false;
}
//slideshow-pokemon.js
var imageNumber = 0;
var imageLength = images.length - 1;
var images = ["https://vignette.wikia.nocookie.net/pokemon/images/2/21/001Bulbasaur.png/revision/latest/scale-to-width-down/200?cb=20140328190757", "https://vignette.wikia.nocookie.net/pokemon/images/7/73/004Charmander.png/revision/latest/scale-to-width-down/200?cb=20140724195345", "https://vignette.wikia.nocookie.net/pokemon/images/3/39/007Squirtle.png/revision/latest/scale-to-width-down/200?cb=20140328191525"];
function changeMon(x) {
imageNumber += x;
document.getElementById("pokemon").src = images[imageNumber];
return false;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<body>
<div>
<img src="https://img.rankedboost.com/wp-content/uploads/2016/07/PokeBall.png" id="pokeballs" />
<br>
Previous Slide
Next Slide
<script src="js/slideshow-pokeballs.js"></script>
</div>
<br>
<div>
<img src="https://vignette.wikia.nocookie.net/pokemon/images/2/21/001Bulbasaur.png/revision/latest/scale-to-width-down/200?cb=20140328190757" id="pokemon" />
<br>
Previous Slide
Next Slide
<script src="js/slideshow-pokemon.js"></script>
</div>
</body>
What i would like
1)I would like to know how to make both slideshows work on the same page and possibly add more slideshows to the page.
2)I hope that the solution i have is a simple change, i don't want to go off-course with the original idea that i had here.

Here an example with two slide show in the same page. In this example the time is 2 second foreach slide and they use the same function. In my code i created img folder and put into folder 3 images (img1.jpg,img2.jpg and img3.jpg). I added tag to underline the first block and second block of slides. You can copy and paste this code to try. I tryed the code in firfox and chrome and it works.
before trying the code as it is written, you have to create the folder img and call the images img1.jpg and so on...
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Slides show in the same page -->
<style>
.mySlides1 {display:none;}
.mySlides2 {display:none;}
</style>
<body>
<h2>first block slides</h2>
<div style="max-width:400px">
<img class="mySlides1" src="img\img1.jpg" style="width:100%">
<img class="mySlides1" src="img\img2.jpg" style="width:100%">
<img class="mySlides1" src="img\img3.jpg" style="width:100%">
</div>
<h2>second block slides</h2>
<div style="max-width:400px">
<img class="mySlides2" src="img\img3.jpg" style="width:100%">
<img class="mySlides2" src="img\img1.jpg" style="width:100%">
<img class="mySlides2" src="img\img2.jpg" style="width:100%">
</div>
<script>
var slideIndexX = 0;
var slideIndexY = 0;
carousel();
function carousel() {
var i;
var j;
var x = document.getElementsByClassName("mySlides1");
var y=document.getElementsByClassName("mySlides2");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
slideIndexX++;
if (slideIndexX > x.length) {slideIndexX = 1}
x[slideIndexX-1].style.display = "block";
for (j = 0; j < y.length; j++) {
y[j].style.display = "none";
}
slideIndexY++;
if (slideIndexY > y.length) {slideIndexY = 1}
y[slideIndexY-1].style.display = "block";
setTimeout(carousel, 2000);
}
</script>
</body>
</html>
Hope this helps.

I have a css navigation bar with three items. I want to make each link show its own content without overlapping the other one

Here is what I have so far, which works fine, but doesn't disappear once another link is activated.
function skillsFunction () {
var x = document.getElementById("mySkills");
if (x.style.display == "none"){
x.style.display = "block"; {}
} else {
x.style.display = "none";
}
}
let openTab = (event, tabNumber) => {
const tabContent = document.getElementsByClassName("tabContent");
for(let tab of tabContent) {
tab.style.display = "none";
}
document.getElementById(tabNumber).style.display = "block";
}
<div class="tabs">
<span class="tab" onclick="openTab(event,1)">Projects</span>
<span class="tab" onclick="openTab(event,2)">Skills</span>
<span class="tab" onclick="openTab(event,3)">Courses</span>
</div>
<div class="mySkills" id="2"></div>
<div class="myCourses" id="3"></div>
<!--START OF PROJECTS WRAPPER-->
<div class="projectsWrapper" id="1">
This is my first time using JavaScript.

Alrighty, first off it is typically not good practice to use HTML onclick="" to handle clicks, so we would rather use JS to attach an event listener.
In the HTML, add the class of tabContent, which was missing, an id to each tab, and add "div" + tabId to each body content (Ids can be whatever you want just keep them the same). Also add display:none to initially start the content closed (probably choose one to start open and leave that without display:none) (And of course change the layout/whatever to fit the rest of your HTML):
Then, in the JS initialize tabs and tabContent, and for each tab add a click event listener which hides every tabContent then displays the one that matches the tabId.
const tabs = document.getElementsByClassName("tab");
const tabContent = document.getElementsByClassName("tabContent");
for(var i = 0; i < tabs.length; i++) {
tabs[i].addEventListener("click", function(event) {
for(var i = 0; i < tabContent.length; i++) {
tabContent[i].style.display = "none";
}
var tabId = event.target.id;
document.getElementById("div" + tabId).style.display = "block";
});
}
<span id="PROJECTS" class="tab">Projects</span>
<span id="SKILLS" class="tab">Skills</span>
<span id="COURSES" class="tab">Courses</span>
<div class="mySkills tabContent" id="divSKILLS" style="display:none">
Skills
</div>
<div class="myCourses tabContent" id="divCOURSES" style="display:none">
Courses
</div>
<div class="projectsWrapper tabContent" id="divPROJECTS" style="display:none">
Projects
</div>
Let me know how it goes!
JsFiddle

JavaScript carousel using array and for-loop: Why does slideIndex get "stuck" after first loop?

I'm trying to create a javascript carousel of scrolling images without jQuery, using an array and a for-loop.
At the end of the 4-object array of images, the "next button" returns to array[slideIndex=0].
Similarly, when you hit the "previous button" on the first object in the array, it returns the last object in the array.
This function seems to almost work with the code I have right now. However, it only works once. After skipping backwards or forwards to the last or first object in the array, it doesn't continue to scroll in the intended direction.
Can you please tell me why the slideIndex doesn't continue to loop with the plusDivs() function after the first skip?
let slides_array = document.getElementsByClassName("mySlides");
let slideIndex = 0;
showDivs(slideIndex);
function plusDivs(n) {
slideIndex += n;
showDivs(slideIndex);
}
function showDivs(slideIndex) {
let i;
if (slideIndex > (slides_array.length - 1)) {
slideIndex = 0;
};
if (slideIndex < 0) {
slideIndex = (slides_array.length - 1);
};
for (i=0; i<(slides_array.length); i++) {
slides_array[i].style.display = "none";
}
slides_array[slideIndex].style.display = "block";
}
<section class = "Slideshow">
<div id="slide1" class="mySlides">
<img src="http://cdn3-www.dogtime.com/assets/uploads/gallery/goldador-dog-breed-pictures/puppy-1.jpg">
</div>
<div id="slide2" class="mySlides">
<img src="https://www.cesarsway.com/sites/newcesarsway/files/styles/large_article_preview/public/Shake-shiver-and-tremble-Why-dogs-do-it.jpg?itok=yvOUgQeL">
</div>
<div id="slide3" class="mySlides">
<img src="https://i.kinja-img.com/gawker-media/image/upload/s--kx3d-Wgg--/c_scale,fl_progressive,q_80,w_800/ol9ceoqxidudap8owlwn.jpg">
</div>
<div id="slide4" class="mySlides">
<img src="http://cdn1-www.dogtime.com/assets/uploads/gallery/korean-jindo-dog-breed-pictures/puppy-1_680-453.jpg">
</div>
</section>
<!-- Slideshow Buttons -->
<button class="button" onclick="plusDivs(-1)"> ❮ </button>
<button class="button" onclick="plusDivs(+1)"> ❯ </button>
Pardon (and please correct) me if I'm not using the correct technical terms -- I'm trying to describe my current issue as best as I can, but maybe this isn't the best way to describe the problem. Please advise.

As you have a global variable slideIndex, you should not pass it as a function argument, as that creates a local variable with the same name, but any reassignment to it will not affect the global variable.
let slides_array = document.getElementsByClassName("mySlides");
let slideIndex = 0;
showDivs(slideIndex);
function plusDivs(n) {
slideIndex += n;
showDivs(); /// <----
}
function showDivs() { /// <----
let i;
if (slideIndex > (slides_array.length - 1)) {
slideIndex = 0;
};
if (slideIndex < 0) {
slideIndex = (slides_array.length - 1);
};
for (i=0; i<(slides_array.length); i++) {
slides_array[i].style.display = "none";
}
slides_array[slideIndex].style.display = "block";
}
<section class = "Slideshow">
<div id="slide1" class="mySlides">
<img src="http://cdn3-www.dogtime.com/assets/uploads/gallery/goldador-dog-breed-pictures/puppy-1.jpg">
</div>
<div id="slide2" class="mySlides">
<img src="https://www.cesarsway.com/sites/newcesarsway/files/styles/large_article_preview/public/Shake-shiver-and-tremble-Why-dogs-do-it.jpg?itok=yvOUgQeL">
</div>
<div id="slide3" class="mySlides">
<img src="https://i.kinja-img.com/gawker-media/image/upload/s--kx3d-Wgg--/c_scale,fl_progressive,q_80,w_800/ol9ceoqxidudap8owlwn.jpg">
</div>
<div id="slide4" class="mySlides">
<img src="http://cdn1-www.dogtime.com/assets/uploads/gallery/korean-jindo-dog-breed-pictures/puppy-1_680-453.jpg">
</div>
</section>
<!-- Slideshow Buttons -->
<button class="button" onclick="plusDivs(-1)"> ❮ </button>
<button class="button" onclick="plusDivs(+1)"> ❯ </button>
Alternatively, you could pass it as argument, but then make sure you do the modification to the global variable (outside of the function to which you pass the argument).

The scope problem mentioned by Duj and Trincot is the key problem here. Moving the reset of slideIndex out of showDivs solves that.
A way of creating more self explanatory code is to change plusDivs into two functions, one which increments (plusDivs), and one which decrements (minusDivs). You can then update slideIndex from within those.
(These two functions use ternary operators to update slideIndex, which are pretty cool, and simple to implement).
let slides_array = document.getElementsByClassName("mySlides");
let slideIndex = 0;
showDivs(slideIndex);
function plusDivs() {
slideIndex = slideIndex === slides_array.length - 1 ? 0 : slideIndex + 1;
showDivs(slideIndex);
}
function minusDivs() {
slideIndex = slideIndex === 0 ? slides_array.length - 1 : slideIndex - 1;
showDivs(slideIndex);
}
function showDivs(slideIndex) {
for (i = 0; i < slides_array.length; i++) {
slides_array[i].style.display = "none";
}
slides_array[slideIndex].style.display = "block";
}
You can then update the HTML like this:
<!-- Slideshow Buttons -->
<button class="button" onclick="minusDivs()"> ❮ </button>
<button class="button" onclick="plusDivs()"> ❯ </button>