我的滑块仅显示第1和第3个滑块，但不显示表格的第2和第4个滑块

Question

I made a simple slider which works fine for normal table, but when I try to use that slider for my customised bootstrap table only 1st, 3rd slider is showing up but not the 2nd and 4th.

var slideIndex = 1;
showDivs(slideIndex);

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

function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
console.log("len "+x.length);
if (n > x.length) {

  slideIndex = 1;
}    
if (n < 1) {
   slideIndex = x.length;
 }
for (i = 0; i < x.length; i++) {
  x[i].style.display = "none";  
}
 x[slideIndex-1].style.display = "block";  
 }

This is the html code:

<div class="w3-content w3-display-container">
    <div class="mySlides">

<div class="row">
    <div class="col-md-6">
        <div class="panel panel-primary">
            <div class="panel-body">
                <h4 class="m-b-30 m-t-0">Q'3</h4>
                <div class="row">
                    <div class="col-xs-12">
                        <table class="table table-hover">
                            <thead>
                                    <tr>
                                            <th>Time Period</th>
                                            <th>Jan</th>
                                            <th>Feb</th>
                                            <th>Mar</th>
                                            <th>Total</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td># of Project<br>Completed</td>
                                            <td>20</td>                                                                </td>
                                            <td>17</td>
                                            <td>15</td>
                                            <td>52</td>
                                        </tr>
                                        <tr>
                                            <td>Total <br>Phases</td>
                                            <td>14</td>
                                            <td>29</td>
                                            <td>23</td>
                                            <td>74</td>
                                        </tr>
                                        <tr>
                                            <td># Feedback <br>Received</td>
                                            <td>12</td>
                                            <td>7</td>
                                            <td>2</td>
                                            <td>21</td>
                                        </tr>
                                        <tr>
                                            <td>Adiva <br>Incurred (hrs)</td>
                                            <td>927</td>
                                            <td>965</td>
                                            <td>636</td>
                                            <td>2528</td>
                                        </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>

    </div>

 <button class="w3-button w3-black w3-display-left" 
 onclick="plusDivs(-1)">&#10094;</button>
  <button class="w3-button w3-black w3-display-right" 
   onclick="plusDivs(1)">&#10095;</button>
  </div>

I have given only the one input file. More 3 similar table will be added, But after adding this to my class, only 1st and 3rd one is showing. Another object like image, normal text sliding is working fine, but only this table shows the problem. And I am using only core JS for sliding, but my main file has jquery , but there are for another purposes

Answer 1

I see that you have wrong html markup. There is one superfluous </td> which broke valid html.

Answer 2

I've figured it out. It was a div tag problem. Div wasnt closed properly. Now it works fine