[Resolved] Simple Slider Code without Plugin

[Author]

Posts

[markus]

Hi, since I am trying to minimize the number of plugins in my clients backend I have created a simple fullscreen slider with very little java code for a fullscreen slideshow. It works perfectly but only in the no thumbnail version. I don´t have any idea how to modify the code in order to make the thumbnails work (I guess the problem is the on click current line,since this has to be looped somehow) - if you could have a quick look at it, I really appreciate it.

THE HTML

<div class="sli-content" style="max-width:1200px">
  [wpv-for-each field="wpcf-galerie-bild"][types field='galerie-bild' class='mySlides' alt='%%ALT%%' title='%%TITLE%%' width='100%' height='100%' align='none' size='full' separator=', '][/types][/wpv-for-each]
<div class="sli-row-padding sli-section">
<div class="sli-col s4"><p style="text-align: center; color: green; onclick='currentDiv(3)'">
[wpv-for-each field="wpcf-galerie-bild"][types field='galerie-bild' class='demo sli-opacity sli-hover-opacity-off' alt='%%ALT%%' title='%%TITLE%%' width='100%' height='100%' align='none' resize='crop' separator=', '][/types][/wpv-for-each]</p>
     </div>
  </div>
</div>


THE JAVA

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function currentDiv(n) {
  showDivs(slideIndex = n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
     dots[i].className = dots[i].className.replace(" sli-opacity-off", "");
  }
  x[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " sli-opacity-off";
}

[Christian Cox]

Hi, is there a specific Toolset-related question? It looks like you have created a slider using some custom code that doesn't work. If you can create the fully-functional slider with static images and thumbnails, then I can take a look and see what I can do to help you integrate Toolset in that design. But writing custom code to complete your custom slideshow JavaScript is outside the scope of the support we provide here in the forums.