Multiple Slideshows for all Records on one page

2 posts by 2 authors in: Forums > CMS Builder
Last Post: July 28, 2021   (RSS)

By kovali - July 20, 2021

Hi, for a carparts website, I want to have an images slideshow for all possible +50 carparts (Records), all on one webpage.

I found this slideshow code to be looking perfect for what I need: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_two 

But I need many more slideshows one the same webpage ofcourse... 

On my website this would look like this example: https://www.remar-autoafbraak.be/new/vw_onderdelen.php

Problem I have is that I need to increase many arrays by +1 for every next carpart/slideshow... 

<?php foreach ($ra_vw_onderdelenRecords as $record): ?>

<?php echo htmlencode($record['title']) ?>
<?php echo htmlencode($record['content']) ?>


<?php foreach ($record['foto_s'] as $index => $upload): ?>
																
															  <img class="mySlides1" src="<?php echo $upload['urlPath'] ?>" style="width:100%">
<img class="mySlides1" src="<?php echo $upload['urlPath'] ?>" style="width:100%">
<img class="mySlides1" src="<?php echo $upload['urlPath'] ?>" style="width:100%">
  
  																<?php endforeach ?>
<?php endforeach ?>

So for every extra carpart I need to increase class="mySlides1" to  class="mySlides2", class="mySlides3", class="mySlides4", class="mySlides5"  etc...

<img class="mySlides2" src="<?php echo $upload['urlPath'] ?>" style="width:100%">
<img class="mySlides2" src="<?php echo $upload['urlPath'] ?>" style="width:100%">
<img class="mySlides2" src="<?php echo $upload['urlPath'] ?>" style="width:100%">


<img class="mySlides3" src="<?php echo $upload['urlPath'] ?>" style="width:100%">
<img class="mySlides3" src="<?php echo $upload['urlPath'] ?>" style="width:100%">
<img class="mySlides3" src="<?php echo $upload['urlPath'] ?>" style="width:100%">

<img class="mySlides4" src="<?php echo $upload['urlPath'] ?>" style="width:100%">
<img class="mySlides4" src="<?php echo $upload['urlPath'] ?>" style="width:100%">
<img class="mySlides4" src="<?php echo $upload['urlPath'] ?>" style="width:100%">

...

And also in the script at page bottom I need to increase the value of some parameters by +1 for every carpart

<script>
var slideIndex = [1,1,1,1,1]; (extra ",1" for each carpart/slideshow)
var slideId = ["mySlides1", "mySlides2", "mySlides3", "mySlides4"] (etc. for each carpart/slideshow)
showDivs(1, 0);
showDivs(1, 1);
showDivs(1, 2);
	
function plusDivs(n, no) {
  showDivs(slideIndex[no] += n, no);
}

function showDivs(n, no) {
  var i;
  var x = document.getElementsByClassName(slideId[no]);
  if (n > x.length) {slideIndex[no] = 1}
  if (n < 1) {slideIndex[no] = x.length}
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
  }
  x[slideIndex[no]-1].style.display = "block";  
}
	</script>

How can I automate this so that when I have e.g. 25 carparts I can show 25 slideshows on the page ?

I know I should increase these values depending on the amount of carparts, but I can't find the answer or php code to achieve this... :-(

Please help, thanks a lot!

Koen