Develop Reference

Carousell, how to show picture 1 without clicking one ahead or behind?

I am quite new to coding from scratch, but I am trying to build a very very simple website. And I wanted an image carousel at the start. I already have it coded // I copied some code from a tutorial.
My problem is that, when I open my websites front page the first image doesn't load in, until I either click forwards or backwards. And I want it to load image 1 as soon as the website loads in. Can anyone help me with that?
index.html
<div class="slideshow-container">
<div class="mySlides fade">
<img src="images/image1.jpg" style="width:100%">
<div class="text">Text1Here</div>
</div>
<div class="mySlides fade">
<img src="images/image2.jpg" style="width:100%">
<div class="text">Text2Here</div>
</div>
<div class="mySlides fade">
<img src="images/image3.jpg" style="width:100%">
<div class="text">Text3Here</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
script.js
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");
let 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";
}

Maybe you forgot to copy the "dots"-elements from the tutorial. If you get errors in your console, this could be the reason, why it aborts further execution.
Try to change your HTML as follows:
<div class="slideshow-container">
<div class="mySlides fade">
<img src="images/image1.jpg" style="width:100%">
<div class="text">Text1Here</div>
</div>
<div class="mySlides fade">
<img src="images/image2.jpg" style="width:100%">
<div class="text">Text2Here</div>
</div>
<div class="mySlides fade">
<img src="images/image3.jpg" style="width:100%">
<div class="text">Text3Here</div>
</div>
<div class="dots"></div>
<div class="dots"></div>
<div class="dots"></div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
I added the three "dots"-elements. If you don't want them, you can remove them from the HTML, but you have to remove every JS code that works with the dots variable.
Here is the JS code without the dots handlings:
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";
}

JavaScript slider is looping too fast after click on dot button

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);

laravel 7 slideshow gallery onclick option

I am trying to create a slideshow image gallery by following this https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_gallery
I am also using #foreach to get the images. So far, I have managed to get the images and the next/previous buttons are working fine. But I am not sure how to do the onClick part.
here is my code
view/blade
<div class="row">
#foreach ($images as $image)
<div class="mySlides">
<img src="{{ asset($image->image_location) }}" style="width:100%" alt="slide">
</div>
#endforeach
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<div class="row">
#foreach ($images as $image)
<div class="column">
<img class="demo cursor" src="{{ asset($image->image_location) }}" style="width:100%" onclick="currentSlide(1)" alt="Image not Available">
</div>
#endforeach
</div>
script
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
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;
}

Inside the blade #foreach loop, a $loop variable is available, as described here: https://laravel.com/docs/7.x/blade#the-loop-variable
You may use $loop->index to access the index of your thumbnail image in the array, and use that in the onclick event:
onclick="currentSlide({{ $loop->index }})"

How Do I Make The Modal Open?

I am currently attempting to open a modal for these images. When I click them, nothing happens. My best guess is that it has something to do with the openModal function on the first two lines of the JS file, I think I need to change where it gets the document, but I am not too sure.
function openModal(){
document.getElementById("myModal").style.display = "block";
}
function closeModal(){
document.getElementById("myModal").style.display = "none";
}
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function plusSlides(n) {
showSlides(slideIndex = n);
}
function currentSlides(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 < slides.length; i++) {
dots[i].className = dots[i].className.replace(" active ", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
<!--Gallery-->
<section id="gallery">
<div class="container">
<h1>Gallery</h1>
<div class="flex-container">
<!--photo container-->
<div class="photo-container">
<div class="photo">
<img src="images/thumbnail_1.jpg" onclick="openModal();currentSlide(1)" alt="">
<div class="photo-overlay">
<h3>Click to Enlarge</h3>
<p>We have several books fr you</p>
</div>
</div>
</div>
</div>
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content"></div>
<div class="mySlides">
<div class="numberText">1 / 9</div>
<img src="images/thumbnail_1.jpg" style="width: 100%;" alt="image 1">
</div>
<!--Thumbnail Image Controls-->
<div class="column">
<img class="demo" src="images/thumbnail_1.jpg" onclick="currentSlide(1)" alt="image">
</div>

change slides automatics by time javascript

i created this slide show but it does not change by it self how can i set a time for it to change automatically is there is a way to that now it will just change whenever i press a button otherwise it wont change here is my codes
HTML
<div class="slideshow-container" style="width: 100%;height: 500px" >
<?php
$get = $data->show(" SELECT * FROM movies LIMIT 3 ");
foreach ($get as $row) {
$id=$row['id'];
$name=$row['m_name'];
$type=$row['type'];
$description=$row['description'];
$trailer=$row['trailer'];
$background=$row['background'];
?>
<div class="mySlides " style="">
<div class="numbertext">1 / 3</div>
<img src="../../src/upload/posts/<?php echo $background; ?>" style="width:100%;height: 500px">
<div class="content text-left">
<h2 style="color: white;"><?php echo "$name"; ?><a><button type="button" class="btn btn-danger p-1 m-2"><span class="fa fa-play">ترایله‌ر</button></span></h2>
<h3 style="color: #fdd835;"><?php echo "$type"; ?></h3>
<h3 style="color: #fdd835;"><?php echo "$description"; ?></h3>
</div>
</div>
<?php } ?>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- The dots/circles -->
<div style="text-align:center;width: 100%">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
Javascript
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
im trying to that for about 2 days and i still did not get it can anyone help me with this

If you need to animate the slides continuously after a period, then use the setInterval method.
The following will animate your slides after 3 s. But please make sure your slideIndex is initialized.
var intervalID = setInterval(()=> {
try {
showSlides(slideIndex += 1);
} catch Exception {
console.log(Exception);
}
}, 3000);
If you want to remove the above interval worker, you will need to use the following
clearInterval(intervalID);