Мой слайдер показывает только 1-й и 3-й слайдер, но не 2-й и 4-й слайдер для таблицы

Question

Я сделал простой слайдер, который отлично работает для обычного стола, но когда я пытаюсь использовать этот слайдер для своей настраиваемой таблицы начальной загрузки, появляется только 1-й, 3-й слайдер, но не 2-й и 4-й.

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

Это HTML-код:

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

Я дал только один входной файл.Будут добавлены еще 3 аналогичные таблицы, но после добавления этого в мой класс отображаются только 1-й и 3-й.Другой объект, как изображение, нормальное скольжение текста работает нормально, но только эта таблица показывает проблему.И я использую только ядро ​​ JS для скольжения, но мой основной файл имеет jquery , но есть для других целей

Answer 1

Я понял это.Это была проблема с тегом div.Div не был закрыт должным образом.Теперь все отлично работает

Answer 2

Я вижу, что у вас неправильная разметка HTML.Есть один лишний </td>, который сломал действительный HTML.