Reputation: 357
The is the HTML file for my slider
<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>
separate JS file which includes the following function to show the pagination dots.
function countSlides(){
$('#counter').html(pos+1 + ' / ' + totalSlides);
}
function pagination(){
$('#pagination-wrap ul li').removeClass('active');
$('#pagination-wrap ul li:eq('+pos+')').addClass('active');
}
So I have a slider and the pagination function used to work. However, it recently stopped working and I'm not sure why. I added divs with a class called maxwidth but didn't change much else. Any suggestions?
Upvotes: 1
Views: 54
Reputation: 357
OKay, so I missed the all important
//*> optional
countSlides();
pagination();
All fixed now.
Upvotes: 2