Responsive tabs to open different slide shows, how too?

Question

I am using W3.css active/current tags and want to use this so that with each tab pressed a different slide show starts ( I have also used the w3.css slide show tutorial for this using the images as indicators and including a prev/next). The problem I have is how to get each tab to open up the different slide shows I have created. I have tried various ways of combining them but can only get one tab to display the slideshow and any after that will not work at all.

the codes are basically the same as the following

For the tabs https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_tabulators_active

and the slide shows

https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_imgdots

How can I combine the two? is it even possible?

This is a bit of what I have tried so far, I also tried adding the slide show under all the other tabs too as it is in the other.

   

function openPics(evt, picsName) {
  var i, x, tablinks;
  x = document.getElementsByClassName("pics");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < x.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" w3-red", "");
  }
  document.getElementById(picsName).style.display = "block";
  evt.currentTarget.className += " w3-red";
}

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(" w3-opacity-off", "");
  }
  x[slideIndex - 1].style.display = "block";
  dots[slideIndex - 1].className += " w3-opacity-off";
}





  KAUSI 2017

  
    
    
    
    
  

  
    Nivala
  

  
    oulu 
    
      Veteli - Nivala 
       Vetelissä Ruohopatilla 20.6
    

    

      
        
        
        
        

        
          
          

          
            
              
            
            
              
            
            
              
            
            
              
            
          
        

        sotkamo 
        

        
          practice

xGeo · Accepted Answer

Your first problem, "the sotkamo and practice tabs are not showing", it has something to do with your closing tags. The solution is to make sure that the #sotkamo and #practice are same level with #nivala and #oulu. In your case, you are missing several closing which made the browser interpret that your #sotkamo and #practice were inside your #oulu.

As for your second question, or as what I have understood, you want to have slideshows in different tabs. This is, of course, possible. However, you need to tweak your function in showing the slides. You should take into account what tab is active and then find all .slides under that parent. You can use the parent's id as a parameter and then pass it to the function:

See this sample function:

function showDivs(parent, n) {
  var i,
    parentDiv = document.getElementById(parent);
  var x = parentDiv.getElementsByClassName("mySlides");
  var dots = parentDiv.getElementsByClassName("demo");
  if (n > x.length) {
    slideIndices[parent] = 1
  }
  if (n < 1) {
    slideIndices[parent] = 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(" w3-opacity-off", "");
  }
  x[slideIndices[parent] - 1].style.display = "block";
  dots[slideIndices[parent] - 1].className += " w3-opacity-off";
}

Feel free to explore this sample snippet for your reference:

function openPics(evt, picsName) {
  var i, x, tablinks;
  x = document.getElementsByClassName("pics");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < x.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" w3-red", "");
  }
  var block = document.getElementById(picsName);
  block.style.display = "block";
  evt.currentTarget.className += " w3-red";
}

//default active slide is 1. update on slide change to preserve state
var slideIndices = {
  oulu: 1,
  sotkamo: 1
};
for (var key in slideIndices) {
  if (slideIndices.hasOwnProperty(key)) {
    showDivs(key, 1);
  }
}

function plusDivs(parent, n) {
  showDivs(parent, slideIndices[parent] += n);
}

function currentDiv(parent, n) {
  showDivs(parent, slideIndices[parent] = n);
}

function showDivs(parent, n) {
  var i,
    parentDiv = document.getElementById(parent);
  var x = parentDiv.getElementsByClassName("mySlides");
  var dots = parentDiv.getElementsByClassName("demo");
  if (n > x.length) {
    slideIndices[parent] = 1
  }
  if (n < 1) {
    slideIndices[parent] = 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(" w3-opacity-off", "");
  }
  x[slideIndices[parent] - 1].style.display = "block";
  dots[slideIndices[parent] - 1].className += " w3-opacity-off";
}




  KAUSI 2017
  
    
    
    
    
  

  
    Nivala
  

  
    oulu 
    
      Veteli - Nivala 
       Vetelissä Ruohopatilla 20.6
    
    
      
        
        
        
        
        
          
          
          
            
              
            
            
              
            
            
              
            
            
              
            
          
        
      
    
  

  
    sotkamo 
    
      Veteli - Nivala 
       Vetelissä Ruohopatilla 20.6
    
    
      
        
        
        
        
        
          
          
          
            
              
            
            
              
            
            
              
            
            
              
            
          
        
      
    
  

  
    practice

Responsive tabs to open different slide shows, how too?

Answers (1)

Related Questions