Hiding slideshow on click

Hiding slideshow on click - javascript

I'm trying to hide a slideshow when a X button is clicked, but it is not working. I'm not sure if it has anything to do with the "id" or "class", but I've tried everything already and it is not hiding what I want it to. (can't use Jquery, this is for a little school project). I usually can hide everything using that button and function, but I can't make it work with the slideshow.
<div id="slideshow-container">
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<button id="exit" onclick="hideSlides(this, 'slideshow-container')">
<img id="exit" src="image/exit.png">
</button>
<div class="mySlides fade">
<img src="image/remar1.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="image/remar2.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="image/remar3.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="image/remar4.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="image/remar5.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="image/remar6.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="image/remar7.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="image/remar8.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="image/casa1.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="image/casa2.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="image/casa3.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="image/casa4.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="image/casa5.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="image/casa6.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="image/casa7.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="image/jose1.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="image/jose2.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="image/jose3.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="image/jose4.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="image/jose5.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="image/jose6.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="image/jose7.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="image/jose8.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="image/jose9.jpg" style="width:100%">
</div>
</div>
//javascript
function hideSlides(){
var slides =
document.getElementsByClassName("mySlides").style.display="none"
}
//css
.mySlides {
display: none;
visibility: visible;
}
img {vertical-align: middle;}
#slideshow-container {
max-width: 1000px;
height: 200px;
left: 10px;
position: relative;
margin: auto;
bottom: 1932px;
visibility: hidden;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: black;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}

document.getElementsByClassName returns a HTMLCollection. So with your current HTML design, you have to iterate over all the selected elements and apply the style you want.
With ES6, you may use Array.from which builds arrays from array-like objects.
You can find the documentation of Array.from here
So you can change your function like this:
function hideSlides(){
var slides = document.getElementsByClassName("mySlides");
Array.prototype.forEach.call(slides, function(el) {
el.style.display = 'none';
});
}

is hideSlides() the function called when you click x? Try declaring the variable, then adding the style:
function hideSlides(){
var slides = document.getElementsByClassName("mySlides")
slides.style.display="none"
}
And in case you want to get rid of the empty space where it was, you will need to change the visibility as well.

Related

javascript slider error while using multiple slides in html

i have a javascript slider in my html website, the code is like below:
let slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides() {
let i;
let slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1
}
slides[slideIndex - 1].style.display = "block";
setTimeout(showSlides, 2000);
}
<div class="col-lg-6 col-md-10 slideshow-container">
<div class="mySlides fades">
<div class="numbertext">1 / 2</div>
<img src="fb1.jpg" alt="Image">
</div>
<div class="mySlides fades">
<div class="numbertext">2 / 2</div>
<img src="fb2.jpg">
</div>
</div>
this is working fine, now i have added another slider in the same page:
<div class="col-lg-6 col-md-10 slideshow-container">
<div class="mySlides fades">
<div class="numbertext">1 / 2</div>
<img src="auto1.jpg" alt="Image">
</div>
<div class="mySlides fades">
<div class="numbertext">2 / 2</div>
<img src="auto2.jpg">
</div>
</div>
now the issue is its kind of colliding, i think because both has same javascript code, both the slide is calculating total images in both the slides and blank images are coming in both, can anyone please tell me how to fix this, thanks in advance

First: You call the function showSlides() with a param (slideIndex) that isn't necessary, because the function uses the global declared var.
I recommend, to add or remove a class (for example .active) instead of styling with js. The advantage is, that you can get the index in the function via that class instead of using the global var for that:
const active_slide = document.querySelector('.active');
let slideIndex = [...active_slide.parentNode.children].indexOf(active_slide) + 1;
With that in use you can loop through the slideshow-containers without getting trouble with the slideIndex.
Working example:
(i removed the functions plusSlides() and currentSlide(), because they aren't used in that example and at least plusSlides() needs another functionality than showSlides())
showSlides();
function showSlides() {
const containers = document.querySelectorAll('.slideshow-container');
for (let i = 0; i < containers.length; i++) {
const slides = containers[i].getElementsByClassName("mySlides");
const active_slide = containers[i].querySelector('.active');
let slideIndex = [...active_slide.parentNode.children].indexOf(active_slide) + 1;
active_slide.classList.remove('active');
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1
}
slides[slideIndex - 1].classList.add('active');
}
setTimeout(showSlides, 2000);
}
.mySlides {
display: none;
}
.mySlides.active {
display: block;
}
<div class="col-lg-6 col-md-10 slideshow-container">
<div class="mySlides fades active">
<div class="numbertext">1 / 2</div>
<img src="fb1.jpg" alt="Image 1">
</div>
<div class="mySlides fades">
<div class="numbertext">2 / 2</div>
<img src="fb2.jpg" alt="Image 2">
</div>
</div>
<div class="col-lg-6 col-md-10 slideshow-container">
<div class="mySlides fades">
<div class="numbertext">1 / 2</div>
<img src="auto1.jpg" alt="Image 3">
</div>
<div class="mySlides fades active">
<div class="numbertext">2 / 2</div>
<img src="auto2.jpg" alt="Image 4">
</div>
</div>
Example with more sliders and slides:
showSlides();
function showSlides() {
const containers = document.querySelectorAll('.slideshow-container');
for (let i = 0; i < containers.length; i++) {
const slides = containers[i].getElementsByClassName("mySlides");
const active_slide = containers[i].querySelector('.active');
let slideIndex = [...active_slide.parentNode.children].indexOf(active_slide) + 1;
active_slide.classList.remove('active');
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1
}
slides[slideIndex - 1].classList.add('active');
}
setTimeout(showSlides, 2000);
}
.mySlides {
display: none;
}
.mySlides.active {
display: block;
}
<div class="col-lg-6 col-md-10 slideshow-container">
<div class="mySlides fades active">
<div class="numbertext">1 / 1</div>
<img src="test1.jpg" alt="Image 0">
</div>
</div>
<div class="col-lg-6 col-md-10 slideshow-container">
<div class="mySlides fades active">
<div class="numbertext">1 / 2</div>
<img src="fb1.jpg" alt="Image 1">
</div>
<div class="mySlides fades">
<div class="numbertext">2 / 2</div>
<img src="fb2.jpg" alt="Image 2">
</div>
</div>
<div class="col-lg-6 col-md-10 slideshow-container">
<div class="mySlides fades">
<div class="numbertext">1 / 3</div>
<img src="auto1.jpg" alt="Image 3">
</div>
<div class="mySlides fades active">
<div class="numbertext">2 / 3</div>
<img src="auto2.jpg" alt="Image 4">
</div>
<div class="mySlides fades">
<div class="numbertext">3 / 3</div>
<img src="auto3.jpg" alt="Image 5">
</div>
</div>
<div class="col-lg-6 col-md-10 slideshow-container">
<div class="mySlides fades">
<div class="numbertext">1 / 4</div>
<img src="house1.jpg" alt="Image 6">
</div>
<div class="mySlides fades">
<div class="numbertext">2 / 4</div>
<img src="house2.jpg" alt="Image 7">
</div>
<div class="mySlides fades active">
<div class="numbertext">3 / 4</div>
<img src="house3.jpg" alt="Image 8">
</div>
<div class="mySlides fades">
<div class="numbertext">4 / 4</div>
<img src="house4.jpg" alt="Image 9">
</div>
</div>

how to toggle one div at the time

On my portfolio website, I have a full-width column of projects, where Ii wish that upon clicking the title the project display /.content slidetoggles downwards. Upon clicking any other project the former active project slides up and closes, whereas the new project displays. What is thee best way of targetting individual projects on click?
I have tried several things, from assigning a parent to the Title-Line-01, to straight-forward toggle jQuery, to assigning a different code to every single project I've read. through several articles here on Stack Overflow. But I still have not achieved the result I want. In the code below upon clicking any title - every projects displays.
$(document).ready(function(){
$(".content").hide();
$(".Title-line-01").click(function(){
$(this).find('.content').toggle();
});
});
* {box-sizing: border-box}
.mySlides1, .mySlides2, .mySlides3, .mySlides4, .mySlides5, .mySlides6, .mySlides7, .mySlides8, .mySlides9, .mySlides10,
img {vertical-align: middle;}
#font-face {
font-family: 'lirmaregular';
src: url('lirma-webfont.woff2') format('woff2'),
url('lirma-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/* Information line in the top */
.Headline{
display: flex;
flex-direction: row;
flex-direction: wrap;
font-family:'Helvetica Neue';
}
.Headline_1{
flex:1;
Align: center;
}
.Headline_2{
flex:1;
text-align: center;
}
.Headline_3{
flex:1;
text-align: center;
}
.Headline_4{
flex:1;
position: center;
text-align: right;
}
/* Project and year */
.Title-line{
display: flex;
flex-direction: row
}
.Title-line-01{
flex:1;
font-family:'lirmaregular';
font-size: 25px;
}
.Title-line-02{
flex:1;
}
.Title-line-03{
flex:1;
}
.Title-line-04{
flex:1;
font-family:'lirmaregular';
text-align: right;
font-size: 25px;
}
/* Specific projectnames */
.ProjectName-01{
flex:1;
font-family:'lirmaregular';
font-size: 25px;
}
/* Slideshow container */
.slideshow-container {
max-width: 500px;
position: relative;
margin: auto;
}
.content{
display: flex;
flex-direction: row;
flex-direction: wrap;
}
/* Specific contents */
.content-01{
display: flex;
flex-direction: row;
flex-direction: wrap;
}
.Flexbox_1{
flex:1;
font-family:'Helvetica Neue';
font-size: 20px;
}
.Flexbox_2{
flex:1;
}
.Flexbox_3{
flex:1;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a grey background color */
.prev:hover, .next:hover {
background-color: #f1f1f1;
color: black;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="Headline">
<div class="Headline_1">
Carina Thornval
</div>
<div class="Headline_2">
mail#cthornval.com
</div>
<div class="Headline_3">
+4571580488
</div>
<div class="Headline_4">
Curriculum vitae available upon request
</div>
</div>
<div class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>Region H</p>
</class>
<div class="Title-line-02">
</class>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2021</p>
</div>
</div>
<div class="content">
<div class=Flexbox_1>
<p>
School Project <br>
Strategic design proposal
<br> <br>
The Health and innovation unit of the Capital Region of
<br> <br>
<br> <br>
<a href="link"> Click here
</a>
</p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides1">
<img src="Images/01_REG H/Instagram - landscape copy.mov" type="video/mp4" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 0)">❮</a>
<a class="next" onclick="plusSlides(1, 0)">❯</a>
</div>
</div>
</div>
<div class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>CIFF</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2020</p>
</div>
</div>
<div class="content">
<div class=Flexbox_1>
<p>
School Project
<br>
Strategic design
<br> <br>
We were presented with the challenge of rethinking CIFF´s business model as the organisation was facing mounting challenges,
as they were prohibited from throwing their annual fashion fair at Bella Center, because of the outbreak of the coronavirus.
Therefor we proposed a new format for their trade fair: A digital platform, where brands and buyers can engage online through payingf a monthly subscription.
Moreover brands are invited to rent a physical "stage”/pavillion from where they can livestream content,
through for example throwing events or having a showroom. The content produced will then reciprocally be distributed on the online platform.
The stage is a modular and mobile architectural entity,
which can be placed all over the country and where the interior can be adapted to suit the needs of the brand renting the stage.
<br> <br>
This project was a collaboration with Fie Eleonora Mortensen, Gustavo Garcia og Laura Winter-Poulsen.
<br> <br>
<a href="">
Images and video
</a>
</p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_01 copy.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_02 copy.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_03 copy.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_04 copy.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_05 copy.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_06 copy.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_07 copy.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_07 copy.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 1)">❮</a>
<a class="next" onclick="plusSlides(1, 1)">❯</a>
</div>
</div>
</div>
</div>
<div class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>Sofia Bordoni</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2020</p>
</div>
</div>
<div class="content">
<div class=Flexbox_1>
<p>
Webpage design and development
</p>
<br>
<br>
<a href="">
click here
</a>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides3">
<img src="Images/03_Sofia Bordoni/SofiaBord.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 2)">❮</a>
<a class="next" onclick="plusSlides(1, 2)">❯</a>
</div>
</div>
</div>
</div>
<div class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>Lirma Type</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2020</p>
</div>
</div>
<div class="content">
<div class=Flexbox_1>
<p>
Typedesign
</p>
<br>
<br>
<a href="">
Click here
</a>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides4">
<img src="Images/04_Lirma/type_new copy.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 3)">❮</a>
<a class="next" onclick="plusSlides(1, 3)">❯</a>
</div>
</div>
</div>
</div>
<div class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>Wer Baut Der Stadt</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2018</p>
</div>
</div>
<div class="content">
<div class=Flexbox_1>
<p>
Identity and Font developed for the lecture series on architecture conducted by No Image in Berlin.
</p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides5">
<img src="Images/05_WER BAUT 2018/Wer_baut copy.png" style="width:100%">
</div>
<div class="mySlides5">
<img src="Images/05_WER BAUT 2018/Poster_Wer_baut.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 4)">❮</a>
<a class="next" onclick="plusSlides(1, 4)">❯</a>
</div>
</div>
</div>
</div>
<div class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>CAFX</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2018</p>
</div>
</div>
<div class="content">
<div class=Flexbox_1>
<p>
Identity Design for Copenhagen Architecture Festival
<br>
2018
</p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides6">
<img src="Images/06_CAFX/Wer_baut_red_poster.png" style="width:100%">
</div>
<div class="mySlides6">
<img src="Images/06_CAFX/Wer_baut_green_poster.png" style="width:100%">
</div>
<div class="mySlides6">
<img src="Images/06_CAFX/Wer_baut_blue_poster.png" style="width:100%">
</div>
<div class="mySlides6">
<img src="Images/06_CAFX/IMG_0546 (1)_Cafx_7-kopi.png" style="width:100%">
</div>
<div class="mySlides6">
<img src="Images/06_CAFX/IMG_0546 (1)_Cafx_8-kopi.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 5)">❮</a>
<a class="next" onclick="plusSlides(1, 5)">❯</a>
</div>
</div>
</div>
</div>
<div class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>Contagious Tales</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2017</p>
</div>
</div>
<div class="content">
<div class=Flexbox_1>
<p>
Graduation project, editorial design.
</p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides7">
<img src="Images/07_Contagious Tales/Contagious_tales_01 copy.png" style="width:100%">
</div>
<div class="mySlides7">
<img src="Images/07_Contagious Tales/Contagious_tales_02 copy.png" style="width:100%">
</div>
<div class="mySlides7">
<img src="Images/07_Contagious Tales/Contagious_tales_3 copy.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 6)">❮</a>
<a class="next" onclick="plusSlides(1, 6)">❯</a>
</div>
</div>
</div>
</div>
<div class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>FOAM X HYDRA</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2017</p>
</div>
</div>
<div class="content">
<div class=Flexbox_1>
<p>
Design of exhibition cahier in connection to the exhibition FOAM X HYDRA
<p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides8">
<img src="Images/08_FOAM/FoamXHydra_01.png" style="width:100%">
</div>
<div class="mySlides8">
<img src="Images/08_FOAM/FoamXHydra_02.png" style="width:100%">
</div>
<div class="mySlides8">
<img src="Images/08_FOAM/FoamXHydra_3.png" style="width:100%">
</div>
<div class="mySlides8">
<img src="Images/08_FOAM/FoamXHydra_04.png" style="width:100%">
</div>
<div class="mySlides8">
<img src="Images/08_FOAM/FoamXHydra_05.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 7)">❮</a>
<a class="next" onclick="plusSlides(1, 7)">❯</a>
</div>
</div>
</div>
</div>
<div class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>Money Publication</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2017</p>
</div>
</div>
<div class="content">
<div class=Flexbox_1>
<p>
Publication design with text by Christopher Deutschmann and Paul Larfague
</p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides9">
<img src="Images/09_Money Publication/_97A0746-kopi 2_6 copy.png" style="width:100%">
</div>
<div class="mySlides9">
<img src="Images/09_Money Publication/_97A0746-kopi 2_1 copy.png" style="width:100%">
</div>
<div class="mySlides9">
<img src="Images/09_Money Publication/_97A0746-kopi 2_3 copy.png" style="width:100%">
</div>
<div class="mySlides9">
<img src="Images/09_Money Publication/_97A0746-kopi 2_4 copy.png" style="width:100%">
</div>
<div class="mySlides9">
<img src="Images/09_Money Publication/_97A0746-kopi 2_5 copy.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 8)">❮</a>
<a class="next" onclick="plusSlides(1, 8)">❯</a>
</div>
</div>
</div>
</div>
<div class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>What is the newsarticle?</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2017</p>
</div>
</div>
<div class="content">
<div class=Flexbox_1>
<p>
Publication design with text by Christopher Deutschmann and Paul Larfague
</p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides10">
<img src="Images/10_Newsarticle/Newsletter_1 copy.png" style="width:100%">
</div>
<div class="mySlides10">
<img src="Images/10_Newsarticle/newsletter_2 copy.png" style="width:100%">
</div>
<div class="mySlides10">
<img src="Images/10_Newsarticle/newsletter_3 copy.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 9)">❮</a>
<a class="next" onclick="plusSlides(1, 9)">❯</a>
</div>
</div>
</div>
</div>
<script src="Slideshows.js"></script>
<script src="Toggle.js"></script>
</body>
</html>

Would it be a bad idea to set id's for your elements?
Set id's for the class "content" divs, and set onclick event for the class "Project" divs.
Class "content" display is initially set to "none".
Of course, add a little code for the onclick event.
In time: in your code there's a few divs closed with </class>. I fixed that.
/* This code closes the project when you click on it,
cause it tracks the outter div (class "Project")
var iShown = 0;
function Show_Content(iContent) {
if (iShown > 0) {
document.getElementById("content" + iShown).style.display = "none";
}
if (iContent !== iShown) {
document.getElementById("content" + iContent).style.display = "block";
iShown = iContent;
} else {
iShown = 0;
}
}
*/
/*This code only closes a project when you open a different one*/
var iShown = 0;
function Show_Content(iContent) {
if (iShown == 0) {
document.getElementById("content" + iContent).style.display = "block";
} else if (iContent !== iShown) {
document.getElementById("content" + iShown).style.display = "none";
document.getElementById("content" + iContent).style.display = "block";
}
iShown = iContent;
}
* {box-sizing: border-box}
.mySlides1, .mySlides2, .mySlides3, .mySlides4, .mySlides5, .mySlides6, .mySlides7, .mySlides8, .mySlides9, .mySlides10,
img {vertical-align: middle;}
#font-face {
font-family: 'lirmaregular';
src: url('lirma-webfont.woff2') format('woff2'),
url('lirma-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/* Information line in the top */
.Headline{
display: flex;
flex-direction: row;
flex-direction: wrap;
font-family:'Helvetica Neue';
}
.Headline_1{
flex:1;
Align: center;
}
.Headline_2{
flex:1;
text-align: center;
}
.Headline_3{
flex:1;
text-align: center;
}
.Headline_4{
flex:1;
position: center;
text-align: right;
}
/* Project and year */
.Title-line{
display: flex;
flex-direction: row
}
.Title-line-01{
flex:1;
font-family:'lirmaregular';
font-size: 25px;
}
.Title-line-02{
flex:1;
}
.Title-line-03{
flex:1;
}
.Title-line-04{
flex:1;
font-family:'lirmaregular';
text-align: right;
font-size: 25px;
}
/* Specific projectnames */
.ProjectName-01{
flex:1;
font-family:'lirmaregular';
font-size: 25px;
}
/* Slideshow container */
.slideshow-container {
max-width: 500px;
position: relative;
margin: auto;
}
.content{
display: none;
flex-direction: row;
flex-direction: wrap;
}
/* Specific contents */
.content-01{
display: flex;
flex-direction: row;
flex-direction: wrap;
}
.Flexbox_1{
flex:1;
font-family:'Helvetica Neue';
font-size: 20px;
}
.Flexbox_2{
flex:1;
}
.Flexbox_3{
flex:1;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a grey background color */
.prev:hover, .next:hover {
background-color: #f1f1f1;
color: black;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="Headline">
<div class="Headline_1">
Carina Thornval
</div>
<div class="Headline_2">
mail#cthornval.com
</div>
<div class="Headline_3">
+4571580488
</div>
<div class="Headline_4">
Curriculum vitae available upon request
</div>
</div>
<div onclick="Show_Content(1)" class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>Region H</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2021</p>
</div>
</div>
<div id="content1" class="content">
<div class=Flexbox_1>
<p>
School Project <br>
Strategic design proposal
<br> <br>
The Health and innovation unit of the Capital Region of
<br> <br>
<br> <br>
<a href="link"> Click here
</a>
</p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides1">
<img src="Images/01_REG H/Instagram - landscape copy.mov" type="video/mp4" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 0)">❮</a>
<a class="next" onclick="plusSlides(1, 0)">❯</a>
</div>
</div>
</div>
</div>
<div onclick="Show_Content(2)" class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>CIFF</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2020</p>
</div>
</div>
<div id="content2" class="content">
<div class=Flexbox_1>
<p>
School Project
<br>
Strategic design
<br> <br>
We were presented with the challenge of rethinking CIFF´s business model as the organisation was facing mounting challenges,
as they were prohibited from throwing their annual fashion fair at Bella Center, because of the outbreak of the coronavirus.
Therefor we proposed a new format for their trade fair: A digital platform, where brands and buyers can engage online through payingf a monthly subscription.
Moreover brands are invited to rent a physical "stage”/pavillion from where they can livestream content,
through for example throwing events or having a showroom. The content produced will then reciprocally be distributed on the online platform.
The stage is a modular and mobile architectural entity,
which can be placed all over the country and where the interior can be adapted to suit the needs of the brand renting the stage.
<br> <br>
This project was a collaboration with Fie Eleonora Mortensen, Gustavo Garcia og Laura Winter-Poulsen.
<br> <br>
<a href="">
Images and video
</a>
</p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_01 copy.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_02 copy.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_03 copy.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_04 copy.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_05 copy.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_06 copy.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_07 copy.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_07 copy.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 1)">❮</a>
<a class="next" onclick="plusSlides(1, 1)">❯</a>
</div>
</div>
</div>
</div>
<div onclick="Show_Content(3)" class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>Sofia Bordoni</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2020</p>
</div>
</div>
<div id="content3" class="content">
<div class=Flexbox_1>
<p>
Webpage design and development
</p>
<br>
<br>
<a href="">
click here
</a>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides3">
<img src="Images/03_Sofia Bordoni/SofiaBord.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 2)">❮</a>
<a class="next" onclick="plusSlides(1, 2)">❯</a>
</div>
</div>
</div>
</div>
<div onclick="Show_Content(4)" class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>Lirma Type</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2020</p>
</div>
</div>
<div id="content4" class="content">
<div class=Flexbox_1>
<p>
Typedesign
</p>
<br>
<br>
<a href="">
Click here
</a>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides4">
<img src="Images/04_Lirma/type_new copy.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 3)">❮</a>
<a class="next" onclick="plusSlides(1, 3)">❯</a>
</div>
</div>
</div>
</div>
<div onclick="Show_Content(5)" class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>Wer Baut Der Stadt</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2018</p>
</div>
</div>
<div id="content5" class="content">
<div class=Flexbox_1>
<p>
Identity and Font developed for the lecture series on architecture conducted by No Image in Berlin.
</p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides5">
<img src="Images/05_WER BAUT 2018/Wer_baut copy.png" style="width:100%">
</div>
<div class="mySlides5">
<img src="Images/05_WER BAUT 2018/Poster_Wer_baut.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 4)">❮</a>
<a class="next" onclick="plusSlides(1, 4)">❯</a>
</div>
</div>
</div>
</div>
<div onclick="Show_Content(6)" class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>CAFX</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2018</p>
</div>
</div>
<div id="content6" class="content">
<div class=Flexbox_1>
<p>
Identity Design for Copenhagen Architecture Festival
<br>
2018
</p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides6">
<img src="Images/06_CAFX/Wer_baut_red_poster.png" style="width:100%">
</div>
<div class="mySlides6">
<img src="Images/06_CAFX/Wer_baut_green_poster.png" style="width:100%">
</div>
<div class="mySlides6">
<img src="Images/06_CAFX/Wer_baut_blue_poster.png" style="width:100%">
</div>
<div class="mySlides6">
<img src="Images/06_CAFX/IMG_0546 (1)_Cafx_7-kopi.png" style="width:100%">
</div>
<div class="mySlides6">
<img src="Images/06_CAFX/IMG_0546 (1)_Cafx_8-kopi.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 5)">❮</a>
<a class="next" onclick="plusSlides(1, 5)">❯</a>
</div>
</div>
</div>
</div>
<div onclick="Show_Content(7)" class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>Contagious Tales</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2017</p>
</div>
</div>
<div id="content7" class="content">
<div class=Flexbox_1>
<p>
Graduation project, editorial design.
</p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides7">
<img src="Images/07_Contagious Tales/Contagious_tales_01 copy.png" style="width:100%">
</div>
<div class="mySlides7">
<img src="Images/07_Contagious Tales/Contagious_tales_02 copy.png" style="width:100%">
</div>
<div class="mySlides7">
<img src="Images/07_Contagious Tales/Contagious_tales_3 copy.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 6)">❮</a>
<a class="next" onclick="plusSlides(1, 6)">❯</a>
</div>
</div>
</div>
</div>
<div onclick="Show_Content(8)" class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>FOAM X HYDRA</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2017</p>
</div>
</div>
<div id="content8" class="content">
<div class=Flexbox_1>
<p>
Design of exhibition cahier in connection to the exhibition FOAM X HYDRA
<p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides8">
<img src="Images/08_FOAM/FoamXHydra_01.png" style="width:100%">
</div>
<div class="mySlides8">
<img src="Images/08_FOAM/FoamXHydra_02.png" style="width:100%">
</div>
<div class="mySlides8">
<img src="Images/08_FOAM/FoamXHydra_3.png" style="width:100%">
</div>
<div class="mySlides8">
<img src="Images/08_FOAM/FoamXHydra_04.png" style="width:100%">
</div>
<div class="mySlides8">
<img src="Images/08_FOAM/FoamXHydra_05.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 7)">❮</a>
<a class="next" onclick="plusSlides(1, 7)">❯</a>
</div>
</div>
</div>
</div>
<div onclick="Show_Content(9)" class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>Money Publication</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2017</p>
</div>
</div>
<div id="content9" class="content">
<div class=Flexbox_1>
<p>
Publication design with text by Christopher Deutschmann and Paul Larfague
</p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides9">
<img src="Images/09_Money Publication/_97A0746-kopi 2_6 copy.png" style="width:100%">
</div>
<div class="mySlides9">
<img src="Images/09_Money Publication/_97A0746-kopi 2_1 copy.png" style="width:100%">
</div>
<div class="mySlides9">
<img src="Images/09_Money Publication/_97A0746-kopi 2_3 copy.png" style="width:100%">
</div>
<div class="mySlides9">
<img src="Images/09_Money Publication/_97A0746-kopi 2_4 copy.png" style="width:100%">
</div>
<div class="mySlides9">
<img src="Images/09_Money Publication/_97A0746-kopi 2_5 copy.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 8)">❮</a>
<a class="next" onclick="plusSlides(1, 8)">❯</a>
</div>
</div>
</div>
</div>
<div onclick="Show_Content(10)" class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>What is the newsarticle?</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2017</p>
</div>
</div>
<div id="content10" class="content">
<div class=Flexbox_1>
<p>
Publication design with text by Christopher Deutschmann and Paul Larfague
</p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides10">
<img src="Images/10_Newsarticle/Newsletter_1 copy.png" style="width:100%">
</div>
<div class="mySlides10">
<img src="Images/10_Newsarticle/newsletter_2 copy.png" style="width:100%">
</div>
<div class="mySlides10">
<img src="Images/10_Newsarticle/newsletter_3 copy.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 9)">❮</a>
<a class="next" onclick="plusSlides(1, 9)">❯</a>
</div>
</div>
</div>
</div>
<script src="Slideshows.js"></script>
<script src="Toggle.js"></script>
</body>
</html>

Add more than one slideshow gallery on one page

I have used the following code from https://www.w3schools.com/howto/howto_js_slideshow_gallery.asp to create this slideshow gallery.
But I have a problem with having more than one slideshow on one page, and therefore would ask if any of you had an idea to write a script for this?
HTML:
<!-- Full-width images with number text -->
<div class="mySlides">
<img src="assets/img/kollektion/Shabes HQ-1.jpg" style="width:100%">
</div>
<div class="mySlides">
<img src="assets/img/kollektion/Shabes HQ-4.jpg" style="width:100%">
</div>
<div class="mySlides">
<img src="assets/img/kollektion/Shabes HQ-1.jpg" style="width:100%">
</div>
<div class="mySlides">
<img src="assets/img/kollektion/Shabes HQ-4.jpg" style="width:100%">
</div>
<div class="mySlides">
<img src="assets/img/kollektion/Shabes HQ-1.jpg" style="width:100%">
</div>
<div class="mySlides">
<img src="assets/img/kollektion/Shabes HQ-4.jpg" style="width:100%">
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<!-- Thumbnail images -->
<div class="row">
<div class="column">
<img class="demo cursor" src="assets/img/kollektion/Shabes HQ-1.jpg" style="width:100%" onclick="currentSlide(1)">
</div>
<div class="column">
<img class="demo cursor" src="assets/img/kollektion/Shabes HQ-4.jpg" style="width:100%" onclick="currentSlide(2)">
</div>
<div class="column">
<img class="demo cursor" src="assets/img/kollektion/Shabes HQ-1.jpg" style="width:100%" onclick="currentSlide(3)">
</div>
<div class="column">
<img class="demo cursor" src="assets/img/kollektion/Shabes HQ-4.jpg" style="width:100%" onclick="currentSlide(4)">
</div>
<div class="column">
<img class="demo cursor" src="assets/img/kollektion/Shabes HQ-1.jpg" style="width:100%" onclick="currentSlide(5)">
</div>
<div class="column">
<img class="demo cursor" src="assets/img/kollektion/Shabes HQ-4.jpg" style="width:100%" onclick="currentSlide(6)">
</div>
</div>
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("demo");
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";
captionText.innerHTML = dots[slideIndex-1].alt;
}
enter code here

One thing to notice is that the complete slideshow - caption, thumbnails (=demos), prev/next buttons and the actual current slide are all within the element with class container.
We can therefore consider an element with class container to be a whole slide show.
Just copy the whole container element and we have two slide shows in HTML.
Some things need changing. In the JS we pick up each of the container elements and remember their slideIndex in the actual element as a data attribute.
In the plusSlides and currentSlide functions we work out which slide show we are on from the event's target (and its parent(s)).
Also, the caption is defined with an id in the original, we change that to a class so that there can be one for each slide show.
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial;
margin: 0;
}
* {
box-sizing: border-box;
}
img {
vertical-align: middle;
}
/* Position the image container (needed to position the left and right arrows) */
.container {
position: relative;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Add a pointer when hovering over the thumbnail images */
.cursor {
cursor: pointer;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 40%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-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);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* Container for image text */
.caption-container {
text-align: center;
background-color: #222;
padding: 2px 16px;
color: white;
}
.row:after {
content: "";
display: table;
clear: both;
}
/* Six columns side by side */
.column {
float: left;
width: 16.66%;
}
/* Add a transparency effect for thumnbail images */
.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
</style>
<body>
<h2 style="text-align:center">Slideshow Gallery</h2>
<div class="container">
<div class="mySlides">
<div class="numbertext">1 / 6</div>
<img src="https://www.w3schools.com/howto/img_woods_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 6</div>
<img src="https://www.w3schools.com/howto/img_5terre_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 6</div>
<img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 6</div>
<img src="https://www.w3schools.com/howto/img_lights_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">5 / 6</div>
<img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">6 / 6</div>
<img src="https://www.w3schools.com/howto/img_snow_wide.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p class="caption"></p>
</div>
<div class="row">
<div class="column">
<img class="demo cursor" src="https://www.w3schools.com/howto/img_woods.jpg" style="width:100%" onclick="currentSlide(1)" alt="The Woods">
</div>
<div class="column">
<img class="demo cursor" src="https://www.w3schools.com/howto/img_5terre.jpg" style="width:100%" onclick="currentSlide(2)" alt="Cinque Terre">
</div>
<div class="column">
<img class="demo cursor" src="https://www.w3schools.com/howto/img_mountains.jpg" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
</div>
<div class="column">
<img class="demo cursor" src="https://www.w3schools.com/howto/img_lights.jpg" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
</div>
<div class="column">
<img class="demo cursor" src="https://www.w3schools.com/howto/img_nature.jpg" style="width:100%" onclick="currentSlide(5)" alt="Nature and sunrise">
</div>
<div class="column">
<img class="demo cursor" src="https://www.w3schools.com/howto/img_snow.jpg" style="width:100%" onclick="currentSlide(6)" alt="Snowy Mountains">
</div>
</div>
</div>
<h2 style="text-align:center">Slideshow Gallery</h2>
<div class="container">
<div class="mySlides">
<div class="numbertext">1 / 6</div>
<img src="https://www.w3schools.com/howto/img_woods_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 6</div>
<img src="https://www.w3schools.com/howto/img_5terre_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 6</div>
<img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 6</div>
<img src="https://www.w3schools.com/howto/img_lights_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">5 / 6</div>
<img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">6 / 6</div>
<img src="https://www.w3schools.com/howto/img_snow_wide.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p class="caption"></p>
</div>
<div class="row">
<div class="column">
<img class="demo cursor" src="https://www.w3schools.com/howto/img_woods.jpg" style="width:100%" onclick="currentSlide(1)" alt="The Woods">
</div>
<div class="column">
<img class="demo cursor" src="https://www.w3schools.com/howto/img_5terre.jpg" style="width:100%" onclick="currentSlide(2)" alt="Cinque Terre">
</div>
<div class="column">
<img class="demo cursor" src="https://www.w3schools.com/howto/img_mountains.jpg" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
</div>
<div class="column">
<img class="demo cursor" src="https://www.w3schools.com/howto/img_lights.jpg" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
</div>
<div class="column">
<img class="demo cursor" src="https://www.w3schools.com/howto/img_nature.jpg" style="width:100%" onclick="currentSlide(5)" alt="Nature and sunrise">
</div>
<div class="column">
<img class="demo cursor" src="https://www.w3schools.com/howto/img_snow.jpg" style="width:100%" onclick="currentSlide(6)" alt="Snowy Mountains">
</div>
</div>
</div>
<script>
const slideShows = document.querySelectorAll('.container');
let slideShow, slideIndex; //will be set to the current slideShow as appropriate
for (let i=0; i < slideShows.length; i++) {
slideShow = slideShows[i];
slideShow.setAttribute('data-slideIndex', 1); //instead of slideIndex = 1 we remember the index for each slideshow in a data attribute
slideIndex = 1;
showSlides(1);
}
function plusSlides(n) {
slideShow = event.target.parentElement;
slideIndex = Number(slideShow.getAttribute('data-slideIndex'));
showSlides(slideIndex += n);
}
function currentSlide(n) {
slideShow = event.target.parentElement.parentElement.parentElement;
slideIndex = Number(slideShow.getAttribute('data-slideIndex'));
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = slideShow.getElementsByClassName("mySlides");
var dots = slideShow.getElementsByClassName("demo");
var captionText = slideShow.querySelector(".caption");
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";
captionText.innerHTML = dots[slideIndex-1].alt;
slideShow.setAttribute('data-slideIndex', slideIndex); // remember the slideIndex for this slideShow
}
</script>
</body>
</html>
Note: there are various bits of JS in the w3Schools example that look a bit 'old-fashioned' nowadays, but the code works.

How to run img slider without stopping?

I want to make a img slider but it stops after it reaches the end. Why does it stop once it goes around?
When I run this code, the sequence is 1-2-3-4-5-6-1:
if ((n+1) > size) {
n = 0;
}
As you see that, I changed the high number to zero. Then the n become 0. So I thought the n start to increase until 5 again.
My code:
var n = 0;
var sec = 1000;
setInterval(function() {
n++;
showSlides(n);
}, sec);
function showSlides(n) {
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
var size = slides.length;
if ((n + 1) > size) {
n = 0;
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[n].style.display = "block";
}
<html>
<head>
<meta charset="utf-8">
<title></title>
<script defer src="main.js"></script>
</head>
<body>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 6</div>
<img src="https://divisare-res.cloudinary.com/images/f_auto,q_auto,w_800/v1491425456/ltekybkstiyl7faumrsq/acne-studios-acne-studio-potsdamer-strasse.jpg" style="width:100%">
<div class="text">ACNE STUDIO</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 6</div>
<img src="https://divisare-res.cloudinary.com/images/f_auto,q_auto,w_800/v1491425435/hwxwxqxfwo4htfgqksbu/acne-studios-acne-studio-potsdamer-strasse.jpg" style="width:100%">
<div class="text">ACNE STUDIO</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 6</div>
<img src="https://divisare-res.cloudinary.com/images/f_auto,q_auto,w_800/v1491425448/rnelglmoujifzlbzykxw/acne-studios-acne-studio-potsdamer-strasse.jpg" style="width:100%">
<div class="text">ACNE STUDIO</div>
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 6</div>
<img src="https://divisare-res.cloudinary.com/images/f_auto,q_auto,w_800/v1491425434/coct9kmra7uhmeu4cxto/acne-studios-acne-studio-potsdamer-strasse.jpg" style="width:100%">
<div class="text">ACNE STUDIO</div>
</div>
<div class="mySlides fade">
<div class="numbertext">5 / 6</div>
<img src="https://divisare-res.cloudinary.com/images/f_auto,q_auto,w_800/v1491425440/xacfj7abitmifeyciiia/acne-studios-acne-studio-potsdamer-strasse.jpg" style="width:100%">
<div class="text">ACNE STUDIO</div>
</div>
<div class="mySlides fade">
<div class="numbertext">6 / 6</div>
<img src="https://divisare-res.cloudinary.com/images/f_auto,q_auto,w_800/v1491425434/cqxjhpdmepxto0nudsok/acne-studios-acne-studio-potsdamer-strasse.jpg" style="width:100%">
<div class="text">ACNE STUDIO</div>
</div>
</div>
</body>
</html>

Let's see what's happening here :-
You have a global variable n which you also pass as a parameter to showSlides which makes a local copy of it inside showSlides so updating it won't actually change the global n.
Either you don't pass n at all to showSlides so that what you update inside the function ends up to be global n or you perform the check to reset n inside the setInterval before passing it to showSlides.

since n is passed in to showSlides function as parameter, you have to check the n value before passing it in.
var n = 0;
var sec = 1000;
setInterval(function() {
var slides = document.getElementsByClassName("mySlides");
var size = slides.length;
n = n + 1 === size ? 0 : n +1;
showSlides(n);
}, sec);
function showSlides(n) {
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
var size = slides.length;
for (i = 0; i < size; i++) {
slides[i].style.display = "none";
}
slides[n].style.display = "block";
}
<html>
<head>
<meta charset="utf-8">
<title></title>
<script defer src="main.js"></script>
</head>
<body>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 6</div>
<img src="https://divisare-res.cloudinary.com/images/f_auto,q_auto,w_800/v1491425456/ltekybkstiyl7faumrsq/acne-studios-acne-studio-potsdamer-strasse.jpg" style="width:100%">
<div class="text">ACNE STUDIO</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 6</div>
<img src="https://divisare-res.cloudinary.com/images/f_auto,q_auto,w_800/v1491425435/hwxwxqxfwo4htfgqksbu/acne-studios-acne-studio-potsdamer-strasse.jpg" style="width:100%">
<div class="text">ACNE STUDIO</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 6</div>
<img src="https://divisare-res.cloudinary.com/images/f_auto,q_auto,w_800/v1491425448/rnelglmoujifzlbzykxw/acne-studios-acne-studio-potsdamer-strasse.jpg" style="width:100%">
<div class="text">ACNE STUDIO</div>
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 6</div>
<img src="https://divisare-res.cloudinary.com/images/f_auto,q_auto,w_800/v1491425434/coct9kmra7uhmeu4cxto/acne-studios-acne-studio-potsdamer-strasse.jpg" style="width:100%">
<div class="text">ACNE STUDIO</div>
</div>
<div class="mySlides fade">
<div class="numbertext">5 / 6</div>
<img src="https://divisare-res.cloudinary.com/images/f_auto,q_auto,w_800/v1491425440/xacfj7abitmifeyciiia/acne-studios-acne-studio-potsdamer-strasse.jpg" style="width:100%">
<div class="text">ACNE STUDIO</div>
</div>
<div class="mySlides fade">
<div class="numbertext">6 / 6</div>
<img src="https://divisare-res.cloudinary.com/images/f_auto,q_auto,w_800/v1491425434/cqxjhpdmepxto0nudsok/acne-studios-acne-studio-potsdamer-strasse.jpg" style="width:100%">
<div class="text">ACNE STUDIO</div>
</div>
</div>
</body>
</html>

How can I make a image in a slide show to full width?

I have this website: https://acanhs.org I want the slide show at the beginning to be at full width on all devices. What can I add to make that happen?
My html:
<div class="w3-content w3-section responsive">
<div class="mySlides w3-animate-top responsive" style="--background-image: url('homepagepictures/81463156_472179973704673_8295529433598935850_n(1).jpg')" >
</div>
<div class="mySlides w3-animate-bottom responsive" style="--background-image: url('homepagepictures/097f1e08-ebfe-434a-bc68-8020d02cee6e.JPG')">
</div>
<div class="mySlides w3-animate-top responsive" style="--background-image: url('homepagepictures/8291878a-b5ad-4003-8cc6-de7baafd84a0.JPG')">
</div>
<div class="mySlides w3-animate-bottom responsive" style="--background-image: url('homepagepictures/27890996_211176766129569_6923967286697000960_n.jpg')">
</div>
<div class="mySlides w3-animate-top responsive" style="--background-image: url('homepagepictures/42914143_364663130939605_1259772328364992140_n.jpg')">
</div>
<div class="mySlides w3-animate-bottom responsive" style="--background-image: url('homepagepictures/42947322_373232869884042_7326776160519321694_n.jpg')">
</div>
<div class="mySlides w3-animate-top responsive" style="--background-image: url('homepagepictures/44689929_944494762409958_8911408401400786089_n.jpg')">
</div>
<div class="mySlides w3-animate-bottom responsive" style="--background-image: url('homepagepictures/fd2b6c09-19b7-42ad-b7fb-bce6dc983690.JPG')">
</div>
<div class="mySlides w3-animate-top responsive" style="--background-image: url('homepagepictures/IMG_6922.jpg')">
</div>
<div class="mySlides w3-animate-bottom responsive" style="--background-image: url('homepagepictures/IMG_6932.jpg')" >
</div>
</div>
My javascript:
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 5000);
}
I have tried a lot of stuff but I'm new to web development so it's most likely a mistake on my end.

You need to add this css to your element: <div class="w3-content w3-section responsive">
margin-left: 0px;
margin-right: 0px;
width: 100%;
max-width: unset;
This is to get rid of the left and right margin, then to make the div full-width. As for the max-width, I saw that you had it set on 980px, so you need to set it on unset.

We Keep Coding

JavaScript is the programming language of the Web.

Hiding slideshow on click - javascript

Related

javascript slider error while using multiple slides in html

how to toggle one div at the time

Add more than one slideshow gallery on one page

How to run img slider without stopping?

How can I make a image in a slide show to full width?

Categories

Resources