Develop Reference

include custom slideshow.php only if there is a featured product to show

this is my very first post in here!
So, my problem is: i do not want to call my slideshow.php in my page.php when i do not set an image in it (or any value) because it throws errors in the console.
so how to avoid the unnecessary javascript call if there is no featured product to show?
thank you very much!
here is the example from my page.php where i want to call it only if there is a featured product:
<?php get_header();
if (is_front_page()) {
include('slideshow.php');
};
?>
And here is my slideshow.php file:
<div id="slideshow-container">
<?php $query = new WP_Query( array(
'post_type' => 'product',
'posts_per_page' => 5,
'product_tag' => 'featured',
'order' => 'DESC',
) );
while ($query->have_posts()) : $query->the_post(); ?>
<?php $imgurl = get_field('slideshow_img');
$size = 'full';
if( $image ) {
echo wp_get_attachment_image( $image, $size );
} ?>
<article id="post-<?php the_ID(); ?>" <?php post_class( 'clearfix slides fade' ); ?> role="article">
<div class="container">
<div class="title-holder">
<h3 class="slide-title"><?php the_title(); ?></h3>
</div>
</div>
<div class="arrow-container">
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
</article>
<?php endwhile; ?>
<div class="slideshow-pager">
<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>
<span class="dot" onclick="currentSlide(5)"></span>
</div>
var slideIndex = 1;
var timer;
showSlides(slideIndex);
window.addEventListener("load",function() {
showSlides(slideIndex);
timer = setInterval(function(){plusSlides(1)}, 4000);
})
function plusSlides(n){
clearInterval(timer);
if (n < 0){
showSlides(slideIndex -= 1);
} else {
showSlides(slideIndex += 1);
}
if (n === -1){
timer = setInterval(function(){plusSlides(n + 2)}, 10000);
} else {
timer = setInterval(function(){plusSlides(n + 1)}, 10000);
}
}
function currentSlide(n){
clearInterval(timer);
timer = setInterval(function(){plusSlides(n + 1)}, 10000);
showSlides(slideIndex = n);
}
function showSlides(n){
var i;
var slides = document.getElementsByClassName("slides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>

A hacky solution :
Introduce a js variable if there is an image
<?php
if( $image ) {
?>
<script> const imageExists = true;</script>
<?php
echo wp_get_attachment_image( $image, $size );
}
?>
After you can use the imageExists variable in your js code

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

Problem on side links on webpage built in PHP platform

Web console from the pageI have a simple website based on PHP platform, then I decided to add an automatic JavaScript slider on one of the specific page, before then that the side link works fine but when automatic slide show kicks in the side link doesn't work. Again i removed the slideshow code then it again works fine? My question is how can i make the js slideshow and side link work?
I have tried searching the queries, played with divs and tags but couldn't find the solution
<div id="slide">
<div class="slideshow-container">
<div class="mySlides fade"> <img src="<?php echo $this->baseurl ?>/images/alumni 1.png" style="width:100%" alt=""> </div>
<div class="mySlides fade"> <img src="<?php echo $this->baseurl ?>/images/alumni 6.png" style="width:100%" alt=""> </div>
<div class="mySlides fade"> <img src="<?php echo $this->baseurl ?>/images/alumni 7.png" style="width:100%" alt=""> </div>
<div class="mySlides fade"> <img src="<?php echo $this->baseurl ?>/images/alumni 9.png" style="width:100%" alt=""> </div>
<a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a> </div>
<tr>
<td>
<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>
<script>
var slideIndex = 0;
showSlides();
var slides,dots;
function showSlides() {
var i;
slides = document.getElementsByClassName("mySlides");
dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex> slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 8000); // Change image every 8 seconds
}
function plusSlides(position) {
slideIndex +=position;
if (slideIndex> slides.length) {slideIndex = 1}
else if(slideIndex<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";
}
function currentSlide(index) {
if (index> slides.length) {index = 1}
else if(index<1){index = 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[index-1].style.display = "block";
dots[index-1].className += " active";
}
</script>
</div>
</td>
</tr>
</div>
</td>
</tr>
I want my side navigation link to be working with slideshow, when slideshow loads as the side link doesnot navigate me to other page.

Displaying custom fields on a lightbox gallery

I want to replicate this gallery:
https://www.w3schools.com/howto/howto_js_lightbox.asp
But instead of the static pictures, i need it to display the contents of my "gallery" field in Advanced Custom fields.
This is my code:
<?php
$images = get_field('extra_photos');
if( $images ): ?>
<div class="row2">
<?php foreach( $images as $image ): ?>
<div class="column2">
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" onclick="openModal();currentSlide(1)" class="hover-shadow2">
</div>
<?php endforeach; ?>
<!-- Images used to open the lightbox -->
</div>
<!-- The Modal/Lightbox -->
<div id="myModal2" class="modal2">
<span class="close2 cursor" onclick="closeModal()">×</span>
<div class="modal-content2">
<div class="mySlides2">
<div class="numbertext2">1 / 4</div>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" style="width:100%">
</div>
<!-- Next/previous controls -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<!-- Caption text -->
<div class="caption-container2">
<p id="caption2"></p>
</div>
<!-- Thumbnail image controls -->
<div class="column2">
<img class="demo2" src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" onclick="currentSlide(1)" alt="Nature">
</div>
</div>
</div>
<?php endif; ?>
It only displays the first image of the gallery.
You can see it in action here:
http://electives-abroad.org/hospital-internships-and-electives-at-mkoani-hospital-on-pemba-island/
How can i solve it?
UPDATE
Here is the Javascript:
<script>
// Open the Modal
function openModal() {
document.getElementById('myModal2').style.display = "block";
}
// Close the Modal
function closeModal() {
document.getElementById('myModal2').style.display = "none";
}
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("mySlides2");
var dots = document.getElementsByClassName("demo2");
var captionText = document.getElementById("caption2");
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;
}
</script>

PHP / MYSQL - display images from database issue

I'm making an e-commerce website, where i'm allowing a user to upload up to 3 images of the item that the user is willing to sell, the images are displayed in a caroussel and are stored in my database.
I'm using foreach php loop to display all the images in a caroussel, the problem is that, it's working only for the first image (normally displayed), and once i click on "next", everything disapeers from the other items except the one i'm browsing.
if($total_row > 0)
{
foreach( $result as $row ){
$output .= '
<div class="box product item">
<div class="product__img">
<div class="slideshow-container">
<div class="mySlides ">
<img class="product__img" src="images/'.$row["folder"].'/'.$row["image1"].'" style="width:100%">
</div>
<div class="mySlides ">
<img class="product__img" src="images/'.$row["folder"].'/'.$row["image2"].'" style="width:100%">
</div>
<div class="mySlides ">
<img class="product__img" src="images/'.$row["folder"].'/'.$row["image3"].'" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
</div>
<div class="product__details">
<div class="product__details__title">
<h4>'.$row["name"].'</h4>
</div>
<div class="product__details__price">
<h3 " class="text-danger">'.intval($row["price"]).' دج' .'</h3>
</div>
</div>
<div class="product__contact">
<hr class="style11">
<i class="far fa-envelope"></i>
<input class="product__contact__btn" type="submit" value=" Contacter vendeur"><br><br>
<input class="product__contact__comparateur" type="checkbox" name="comparateur" value="comparateur"> Ajouter au comparateur <br>
</div>
</div>
';
}
}
And this is the JS i'm using for the caroussel:
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");
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";
}
DB:
Thanks for helping me.

Please note that using carousel for each product items with different images requires unique id or class ("mySlides"), as it seems all of your product images are using same carousel class that is why clicking on one product next button is affecting the other products items also which are using same class for carousel, so try identifying the click on current item container only so it won't affect other products with same carousel class.

I think you are not storing 3 images into database kindly check that images are being store are not.Then try to store images through loop against every product.
I think this is the issue.
Hope so this will help you.