this is output
how to separate it to different place like top left and bottom right something?
the dots of second slide can't run properly and it will display the dot of slide 1 also...
the next button of this two slide mix together already, when i click the next button at third picture, it will go to second slide but no move back to first picture ...
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";
}
<body>
<div class="slideshow-container">
<div class="mySlides 1">
<div class="numbertext">1 / 3</div>
<img src="special14-double-black.jpg" style="width:100%">
<div class="text">Caption 1</div>
</div>
<div class="mySlides 1">
<div class="numbertext">2 / 3</div>
<img src="images.jpg" style="width:100%">
<div class="text">Caption 2</div>
</div>
<div class="mySlides 1">
<div class="numbertext">3 / 3</div>
<img src="Taroball Shiruko.jpeg" style="width:100%">
<div class="text">Caption 3</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>
<div class="slideshow-container">
<div class="mySlides 2">
<div class="numbertext">1 / 3</div>
<img src="Sesame Supreme.jpeg" style="width:100%">
<div class="text">Caption 1</div>
</div>
<div class="mySlides 2">
<div class="numbertext">2 / 3</div>
<img src="Bestseller 'Cold'.jpeg" style="width:100%">
<div class="text">Caption 2</div>
</div>
<div class="mySlides 2">
<div class="numbertext">3 / 3</div>
<img src="Bestseller 'Hot'.jpeg" style="width:100%">
<div class="text">Caption 3</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>
</body>
#yandy. Your JavaScript code appears to be working but I see several problems.
You have two slideshows. I am unsure why you have two slideshows at once. Is there any reason for that?
Your images are not all different. That could explain the problems you are describing switching between them (if I understand you correctly).
I got your slideshow code to work by removing one of the slideshows and structuring the logic you have to check if the slide goes out of the bounds of the index position of your slides like so:
if (n > slides.length) {slideIndex = 1}
else if (n < 1)
{slideIndex = (slides.length)}
You are missing an ending </body> tag also in your HTML.
I think that one of your biggest problems though is that you have both sets of controls (previous and next buttons/dots) targeting the same class name (mySlides), and it is moving through slides from both slideshows at once.
If you wanted, you definitely could have two separate slideshows, and one way to do so might be to give each slideshow different id selector names on the parent div (e.g. id='slideshow-container1', & id='slideshow-container2'). Then you might store the value of the parent container id (containing your slide show) when clicking the appropriate next/previous buttons. Then do a check of which slideshow is the one that you need to shift slides on.
It is tough for me to understand what you are trying to accomplish aside from getting the slideshow to work. Can you please elaborate and I or someone else will work to help you? Also, can you edit your question to include a JavaScript tag because it is more than html that you need help with?
EDIT
#yandy if you want to do something similar to what you have already with two different slideshows, and assuming that you are only going to have 3 slides in each slideshow (as you have already stated in your responses), you could do something like the following example I am providing below.
I added comments to the JavaScript explaining each piece so I hope that makes sense to you. I broke out portions of your showSlides function into more functions and added comments to all of them.
This is not exactly an ideal solution since the way you have done this is not how I would personally choose to code this, but I wanted to give you an example of how to make this work with what you already have.
If you want to learn more about how to do this in a better way, I recommend picking up a good book that covers the fundamentals of JavaScript like Eloquent JS (https://eloquentjavascript.net) or to read through the 'Get Started' book/chapters of the You Don't Know JS at their Github repo which you can access here: https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/get-started/README.md
These books are excellent resources to learn more about JavaScript and to be able to understand how to make all sorts of useful and fun projects with it!
You also might do a search on your favorite search engine for a good tutorial on 'vanilla JavaScript slideshow tutorial'. I am not sure what resources you have already been looking at, but when posting to StackOverflow it is a good idea to include examples of code/tutorials you are following along with or trying to replicate & incorporate into your own project when asking a question.
<body>
<div class="slideshow-container">
<div class="mySlides">
<div class="numbertext">1 / 3</div>
<img src="https://images.pexels.com/photos/207691/pexels-photo-207691.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" style="width:100%">
<div class="text">Caption 1</div>
</div>
<div class="mySlides">
<div class="numbertext">2 / 3</div>
<img src="https://images.pexels.com/photos/1366942/pexels-photo-1366942.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" style="width:100%">
<div class="text">Caption 2</div>
</div>
<div class="mySlides">
<div class="numbertext">3 / 3</div>
<img src="https://images.pexels.com/photos/1366944/pexels-photo-1366944.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" style="width:100%">
<div class="text">Caption 3</div>
</div>
<div id="control">
<a class="prev" onclick="plusSlides(-1, this)">❮</a>
<a class="next" onclick="plusSlides(1, this)">❯</a>
</div>
<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>
</div>
<hr>
<div class="slideshow-container">
<div class="mySlides">
<div class="numbertext">1 / 3</div>
<img src="https://assets.imgix.net/unsplash/moon.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" style="width:100%">
<div class="text">Caption 1</div>
</div>
<div class="mySlides">
<div class="numbertext">2 / 3</div>
<img src="https://assets.imgix.net/unsplash/astronaut.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" style="width:100%">
<div class="text">Caption 2</div>
</div>
<div class="mySlides">
<div class="numbertext">3 / 3</div>
<img src="https://assets.imgix.net/unsplash/bridge.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" style="width:100%">
<div class="text">Caption 3</div>
</div>
<div id="control">
<a class="prev" onclick="plusSlides(-1, this)">❮</a>
<a class="next" onclick="plusSlides(1, this)">❯</a>
</div>
<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>
</div>
</body>
<script>
var slideIndex = 1;
//pass null on initial load which meets the first condition of the if statement in showSlides
showSlides(slideIndex, null);
//changed to pass elem (this in HTML above)
function plusSlides(n, elem) {
showSlides((slideIndex += n), elem);
}
//I have not tested this but it looks reasonable (if the dots are visible)
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n, elem) {
// var i; commented this out because it is unnecessary
var slides;
//this is for the first initialization/first loading of the slide shows when you aren't passing anything as 'elem' (elem = null).
if(elem === null)
{
slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
}
else {
//this is for when 'this' is passed into the showSlides function (in the HTML above)
// get appropriate slide show regardless of which arrow controls are selected
var parental = elem.parentNode;
var outerParent = parental.parentNode;
slides = outerParent.querySelectorAll('.mySlides');
var dots = outerParent.getElementsByClassName("dot");
}
//call prevNext function passing n and slides
prevNext(n, slides);
//call slideDisplay function
slideDisplay(slides);
//call dotActive function
dotActive(dots);
}
//new function to move between slides
function prevNext(n, slides){
if (n > slides.length) {slideIndex = 1}
else if (n < 1)
{slideIndex = (slides.length)}
}
//new function to display slides
function slideDisplay(slides){
for (i = 0; i < ((slides.length)); i++) {
slides[i].style.display = "none";
}
//this displays the appropriate slide in most instances
slides[slideIndex-1].style.display = "block";
//this only applies to the second slide show when first loaded (since there are only three images)
if (slides.length > 3) {
slides[3].style.display = "block";
}
}
//this function controls which dots are active
function dotActive(dots){
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
dots[slideIndex-1].className += " active";
}
</script>
Related
//JS page one
let box = document.getElementsByClassName("box");
//click event
box[0].addEventListener("click", fn1);
box[1].addEventListener("click", fn2);
box[2].addEventListener("click", fn3);
box[3].addEventListener("click", fn4);
//show description at click and hide "click for info"
function fn1() {
window.location = 'carousel.html';
}
function fn2() {
window.location = 'carousel.html#2';
}
function fn3() {
window.location = 'carousel.html';
}
function fn4() {
window.location = 'carousel.html';
}
//JS page two
/*lightbox code*/
let 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) {
let i;
let slides = document.getElementsByClassName("mySlides");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex-1].style.display = "block";
}
<!--HTML PAGE ONE-->
<div id="container">
<!--one-->
<div class="box">
<img title="paint one" class="image" src="images/paintings/1.jpg">
<p class="showText"></p>
</div>
<!--two-->
<div class="box">
<img title="paint two" class="image" src="images/paintings/2.jpg">
<p class="showText"></p>
</div>
<!--three-->
<div class="box">
<img title="paint one" class="image" src="images/paintings/3.jpg">
<p class="showText"></p>
</div>
<!--four-->
<div class="box">
<img title="paint two" class="image" src="images/paintings/4.jpg">
<p class="showText"></p>
</div>
</div>
<!--HTML PAGE 2 - CAROUSEL-->
<div id="lightbox">
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1 / 4</div>
<img class="image" src="images/paintings/1.jpg">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 4</div>
<img class="image" src="images/paintings/2.jpg">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 4</div>
<img class="image" src="images/paintings/3.jpg">
<div class="text">Caption Three</div>
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 4</div>
<img class="image" src="images/paintings/4.jpg">
<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>
</div>
I was wondering if it is possible to show the desired image in page 2 Html based on what is clicked in page 1 Html. I know a solution could be to create an HTML page for each photo I want to show on click: I should just change the windows.location of the addEventListener and then in the JS file set the number corresponding to the slideIndex but it would be really good to find a solution without duplicating the pages. I hope I was clear
I found a good alternative. Basically in Html page one I assigned an id to each image and in js page one in the fn1, fn2, fn3 and fn4 window.location I added the hash of the relative id eg: (window.location = 'carousel.html#1'). Then in js page 2 I added the following code:
window.addEventListener('load', (event) => {
if(location.hash === "#1") {
currentSlide(1)
}
if(location.hash === "#2") {
currentSlide(2)
}
if(location.hash === "#3") {
currentSlide(3)
}
if(location.hash === "#4") {
currentSlide(4)
}
})
to avoid a possible slow loading in the css file I added a loading gif as a background image in the .image class
I have this code for the JavaScript image slider:
<div class="container">
<!-- Full-width images with caption text -->
<div class="image-sliderfade fade">
<img src="https://via.placeholder.com/150" style="width:100%">
<div class="text">Image caption 1</div>
</div>
<div class="image-sliderfade fade">
<img src="https://via.placeholder.com/150" style="width:100%">
<div class="text">Image caption 2</div>
</div>
<div class="image-sliderfade fade">
<img src="https://via.placeholder.com/150" style="width:100%">
<div class="text">Image caption 3</div>
</div>
<div class="image-sliderfade fade">
<img src="https://via.placeholder.com/150" style="width:100%">
<div class="text">Image caption 4</div>
</div>
</div>
<!-- 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>
</div>
And Js code is :
<script type="text/javascript">
var slideIndex = 0;
showSlides(); // call showslide method
function currentSlide(n) {
console.log(n);
showSlides(slideIndex = n);
}
function showSlides( n ) {
var i;
var slides = document.getElementsByClassName("image-sliderfade");
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";
}
if(!n) {
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, 3000);
}
</script>
It's looping automatically and I want to go to a specific slider on click event. Now, If I click on a specific slider using the dot then the slider is looping too fast !
Is there anything I am wrong? How can I fix it?
Reason why it keeps speeding p is you keep adding more and more timers. You need to cancel timers that may exist when you click.
var sliderTimer;
function currentSlide(n) {
console.log(n);
if (sliderTimer) window.clearTimeout(sliderTimer);
showSlides(slideIndex = n);
}
and when you create the timer
sliderTimer = setTimeout(showSlides, 3000);
So I'm building this webpage and I have some photos for slideshow inside divs that open up a modal. I want to get all children of clicked div (myModal). I want to get all divs with class "mySlides" who are the children of a click div with class "myModal". 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("mySlides");
console.log(slides);
var dots = document.getElementsByClassName("dot1");
if (n > 3) {
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(" active1", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active1";
}
<!-- reference item -->
<div class="grid-item set-bg osobj" data-setbg="img/portfolio/2.jpg">
<a class="myBtn" onclick="getSlides()"></a>
<div class="myModal modal1">
<!-- Modal content -->
<div class="modal1-content">
<span class="close1">×</span>
<h2>smth</h2>
<div class="post1-container">
<div class="post1-thumb">
<div class="slideshow1-container">
<div class="mySlides">
<div class="numbertext">1 / 3</div>
<img src="img/portfolio/3.jpg" style="width: 550px; height: 450px;">
<div class="text1">Opis slike1</div>
</div>
<div class="mySlides">
<div class="numbertext">2 / 3</div>
<img src="img/portfolio/4.jpg" style="width: 550px; height: 450px;">
<div class="text1">Opis Slike2</div>
</div>
<div class="mySlides">
<div class="numbertext">3 / 3</div>
<img src="img/portfolio/6.jpg" style="width: 550px; height: 450px;">
<div class="text1">Opis Slike3</div>
</div>
<button class="prev1" onclick="plusSlides(-1)">❮</button>
<button class="next1" onclick="plusSlides(1)">❯</button>
</div>
<br>
<div style="text-align:center">
<span class="dot1" onclick="currentSlide(1)"></span>
<span class="dot1" onclick="currentSlide(2)"></span>
<span class="dot1" onclick="currentSlide(3)"></span>
</div>
</div>
</div>
</div>
</div>
</div>
I tried using $(this).children but no luck like that:
function getSlides() {
var slides1 = $(this).children('img').attr('src');
console.log(slides1);
}
How can I achieve this? I have multiple reference items in my page all with different 3 images to show on modal open. But I want to select only those that are children to the clicked element (as now it returns me all "mySlides" divs).
You can remove onclick="getSlides()" from DOM and Use this Jquery
$('.myBtn').off().on('click',function(){
$(this).next('.myModal').find('.mySlides').each(function(i,v){
console.log($(v)[0].outerHTML);
});
});
Look at this. You have to pass getSlides(var) a new variable postContainer. In this case is: <div class="post1-container">
function getSlides(postContainer) {
$('.'+postContainer+' .mySlides').each(function(){
var slideSrc = $(this).find('img').attr('src');
console.log(slideSrc);
});
}
Lets start again:
Using the self object to find the slides
<a class="myBtn" onclick="getSlides($(this))"></a>
//Pass the object to the function
function getSlides(dis) {
//Search from the object, the nexts .mySlides
$(dis).next().find('.mySlides').each(function(){
var slideSrc = $(this).find('img').attr('src');
console.log(slideSrc);
});
}
I have been researching trying to figure out why its doing this, maybe I just dont understand modals. IDK.
Anyways what is happening is I started with a light box: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_lightbox
and changed the body to:
<body>
<h2 style="text-align:center">Title</h2>
<div class="row">
<div class="column">
<img src="img_nature.jpg" style="width:100%"
onclick="openModal();currentSlide(1)"
class="hover-shadow cursor">
</div>
</div>
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 4</div>
<img src="img_nature_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 4</div>
<img src="img_fjords_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 4</div>
<img src="img_mountains_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 4</div>
<img src="img_lights_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 id="caption"></p>
</div>
</div>
</div>
to create a single image in the modal, and to scroll through it. I love it, and I thought that it would solve my issue. Alas
When I implemented it in my web page it worked. but then I copied and pasted, and it in another area of the page, changed the images, but it is still showing the original images from the first modal. So I dont know where to turn.
I have 0 experience in jscript, jquery. (those classes are yet to come in my schooling...).
I was thinking:
1.) have the images on an external html page and import that I have looked at AJAX, but im confused. (dont necessarily want to use bootstrap)
I have looked at these resources, and they kinda help but again, I dont know how to craft them to my needs.
using Bootstrap
modals, nonimported html
modals
See the Pen Work issue by Michael Barnhouse (#Kardee785) on CodePen.
So as Curious 13, and Nate Whittaker Suggested I needed to make each section have its own unique Id. I had posted that that didn't work, and the reason it didnt work was because my .js wasnt reading/importing what to display. So I had to create a var in js (named modalId), and then call that information into the opening, closing, and navigating of the modal.
Here is the .js, I had one of my friends help me with.
function openModal(modalId) {
document.getElementById(modalId).style.display = "block";
}
function closeModal(modalId) {
document.getElementById(modalId).style.display = "none";
}
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(modalId, n) {
showSlides(modalId, slideIndex += n);
}
function currentSlide(modalId, n) {
showSlides(modalId, slideIndex = n);
}
function showSlides(modalId, n) {
var i;
var modal = document.getElementById(modalId);
var slides = modal.getElementsByClassName("mySlides");
var captionText = document.getElementById("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;
}
Hey I have made a function that fills an empty container of a slideshow with images, with each image being contained in it's own div.
My webpage has an undetermined amount of modal images which , when clicked, open a slideshow album of images. I got this working for 1 image then realized that to have it work for an undetermined amount of slideshows of undetermined size I should make a function that fills the slideshow div. I planned to have each modal image to have a data attribute of "1,2,3...etc" and have a bunch an array with multiple objects each named similarly "1,2,3...etc" then I'd use this information to create and append the correct divs and images to the slideshow container.
I have successfully done this but I THINK I need to clear the parent .modal-content div of all it's children EXCEPT the two buttons (.next and .prev), because the modal seems to open the correct slideshow, but only on the first time it is clicked, the other times it just keeps adding more and more of the array to it. I believe clearing the div upon closing the slideshow should fix this IF IN FACT IT COMPLETELY GETS RID OF THE INNER ELEMENTS, which I think my code should do but I got it off of stackoverflow so idk for certain.
I have this code to delete the content of the div (Note this is really where I need to add the code that excludes those 2 elements, but I've included more code for context):
function clearSlides(){
var myNode = document.getElementById("modal_content");
while (myNode.firstChild) {
myNode.removeChild(myNode.firstChild);
}
}
This is my HTML:
<div class="row">
<div class="column">
<img id="modal-1" src="https://www.yosemitehikes.com/images/wallpaper/yosemitehikes.com-bridalveil-winter-1200x800.jpg" style="max-width:100%" data-modal="1" onclick="fillSlides(this); openModal(); currentSlide(1); " class="hover-shadow cursor">
</div>
</div>
<div id="myModal" class="modal">
<span class="close cursor" onclick="clearSlides(); closeModal();">×</span>
<div class="modal-content" id="modal_content">
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
</div>
.modal-content div get's filled with this js function:
function fillSlides(modalID){
var container = document.getElementsByClassName("modal-content");
var slides = {
"1": ["Images/LS_01.jpg", "Images/LS_02.jpg", "Images/LS_03.jpg", "Images/LS_04.jpg" ],
"2": ["Images/LS_05.jpg", "Images/LS_06.jpg", "Images/LS_07.jpg", "Images/LS_08.jpg" ],
"3": ["Images/LS_09.jpg", "Images/LS_10.jpg", "Images/LS_11.jpg", "Images/LS_12.jpg" ]
};
var modal_num = modalID.getAttribute('data-modal');
//alert(slides[modal_num].length);
for (var i = 0 ; i < slides[modal_num].length; i++) {
var the_divs = document.createElement('div');
var s_img = document.createElement('img');
the_divs.className = 'mySlides';
s_img.src = slides[modal_num][i];
the_divs.appendChild(s_img);
container[0].appendChild(the_divs);
}
}
Please let me know if further clarification is required.
As per comments keep your controls outside of #modal_content use innerHTML='' to wipe everything within it.
Demo
function clearSlides() {
var content = document.getElementById('modal_content');
content.innerHTML = '';
}
function closeModal() {
document.getElementById('myModal').style.display = "none";
}
<div class="row">
<div class="column">
<img id="modal-1" src="https://www.yosemitehikes.com/images/wallpaper/yosemitehikes.com-bridalveil-winter-1200x800.jpg" style="max-width:100%" data-modal="1" onclick="fillSlides(this); openModal(); currentSlide(1); " class="hover-shadow cursor">
</div>
</div>
<div id="myModal" class="modal">
<div class="close cursor" onclick="clearSlides(); closeModal();">×</div>
<div class="modal-content" id="modal_content">
<div class="mySlides">
<div class="numbertext">1 / 4</div>
<img src="http://chasingseals.com/wp-content/uploads/2014/02/greenlandBanner2000x800.jpg" class="img">
</div>
<div class="mySlides">
<div class="numbertext">2 / 4</div>
<img src="http://www.catholicevangelism.org/wp-content/uploads/2013/06/1200x800.gif" class="img">
</div>
<div class="mySlides">
<div class="numbertext">3 / 4</div>
<img src="http://www.a1carpet-to.com/wp-content/uploads/2015/08/600x400.png" class="img">
</div>
<div class="mySlides">
<div class="numbertext">4 / 4</div>
<img src="https://support.kickofflabs.com/wp-content/uploads/2016/06/800x1200.png" class="img">
</div>
</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
Since you are adding class 'mySlides' to your slides, you can check if the element you are removing actually contains mySlides class. If it does not you should not remove it.
Also you can move buttons to a separate div. This would separate your slides and controls so it gives you more freedom to manipulate modal content.