分页JS停止工作,我不知道为什么

时间:2018-04-17 22:54:47

标签: jquery pagination

这是我滑块的HTML文件

      <div id="slider-wrap">
          <ul id="slider">
<!-- open slide one -->
             <li class="sliderlist" data-color="#fff">
<div class="maxwidth">
           <img src="assets/coconut.png" alt="coconut" class="coconut"><div></div>

                    <h4>Cras justo odio, dapibus ac
facilisis in, egestas eget quam</h4>

                    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo
risus, porta ac consectetur ac, vestibulum at eros.</p>

               </div>
               <!-- close slide one -->
             </li>
             <!-- open slider two -->
             <li class="sliderlist" data-color="#fcbb08">
       <div class="maxwidth">
          <img src="assets/coconut.png" alt="coconut" class="coconut"><div></div>
                    <h4>Cras justo odio, dapibus ac
facilisis in, egestas eget quam</h4>
                    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo
risus, porta ac consectetur ac, vestibulum at eros.</p>

          </div>    
          <!-- close slide 2 -->
             </li>
              <!-- open slide three -->
             <li class="sliderlist" data-color="rgb(29,178,161)">
          <div class="maxwidth">  
              <img src="assets/coconut.png" alt="coconut" class="coconut"><div></div>

                    <h4 class="color">Cras justo odio, dapibus ac
facilisis in, egestas eget quam</h4>
                    <p class="color">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo
risus, porta ac consectetur ac, vestibulum at eros.</p>

            </div> 
            <!-- close side three -->
             </li>
             <!-- open slide four -->
             <li class="sliderlist" data-color="#fcbb08">
     <div class="maxwidth">
      <img src="assets/coconut.png" alt="coconut" class="coconut"><div></div>
                    <h4>Cras justo odio, dapibus ac
facilisis in, egestas eget quam</h4>
                    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo
risus, porta ac consectetur ac, vestibulum at eros.</p>
            </div>   
                 <!-- close slide four -->
             </li>

             <li class="sliderlist" data-color="rgb(29,178,161)">
              <!-- open slide five -->
<div class="maxwidth">
  <img src="assets/coconut.png" alt="coconut" class="coconut"><div></div>
                    <h4 class="color">Cras justo odio, dapibus ac
facilisis in, egestas eget quam</h4>
                    <p class="color">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo
risus, porta ac consectetur ac, vestibulum at eros.</p>
        </div>
                      <!-- close slide 5          -->
             </li>


          </ul>
           <!--controls-->
          <div class="btns" id="next"><img src="assets/arrow_right.png" alt="arrow right"></div>
          <div class="btns" id="previous"><img src="assets/arrow_left.png" alt="arrow left"></div>

          <div id="pagination-wrap">
            <ul>
            </ul>
          </div>
          <!--controls-->  

      </div>

单独的JS文件,其中包含以下函数以显示分页点。

function countSlides(){
    $('#counter').html(pos+1 + ' / ' + totalSlides);
}

function pagination(){
    $('#pagination-wrap ul li').removeClass('active');
    $('#pagination-wrap ul li:eq('+pos+')').addClass('active');
}

所以我有一个滑块和分页功能。但是,它最近停止了工作,我不知道为什么。我添加了一个名为maxwidth的类的div,但没有改变太多。有什么建议吗?

1 个答案:

答案 0 :(得分:2)

好的,所以我错过了所有重要的

//*> optional
countSlides();
pagination();

现在全部修好了。