Skip Navigation

[Resolved] Simple Slider Code without Plugin

The Toolset Community Forum is closed, for technical support questions, please head on to our Toolset Professional Support (for paid clients), with any pre-sale or admin question please contact us here.
This support ticket is created 5 years ago. There's a good chance that you are reading advice that it now obsolete.
This is the community support forum for Types plugin, which is part of Toolset. Toolset is a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients and people who registered for Types community support can post in it.

Sun Mon Tue Wed Thu Fri Sat
8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 - -
13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 - -

Supporter timezone: America/New_York (GMT-04:00)

This topic contains 1 reply, has 2 voices.

Last updated by Christian Cox 5 years ago.

Assigned support staff: Christian Cox.


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.


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


var slideIndex = 1;

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

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.

The forum ‘Types Community Support’ is closed to new topics and replies.