JSSOR Slider Number Bullet List

Question

I am using Jssor slider and works fine in default. But I don't use bullet images. Is that possible use number instead of bullet images? My bullet parameter is u="navigator"

Thanks in advance

Answer 1

Open 'skin\bullet-01.source.html', the bullet navigator looks as below,

<!-- Bullet Navigator Skin Begin -->
<!-- jssor slider bullet navigator skin 01 -->
<style>
    /* bullet css here */
</style>
<!-- bullet navigator container -->
<div u="navigator" class="jssorb01" style="position: absolute; bottom: 16px; right: 10px;">
    <!-- bullet navigator item prototype -->
    <div u="prototype" style="POSITION: absolute; WIDTH: 12px; HEIGHT: 12px;"></div>
</div>
<!-- Bullet Navigator Skin End -->

To add number in bullet, you can insert <div u="numbertemplate"></div> in the 'prototype' element.

<!-- Bullet Navigator Skin Begin -->
<!-- jssor slider bullet navigator skin 01 -->
<style>
    /* bullet css here */
</style>
<!-- bullet navigator container -->
<div u="navigator" class="jssorb01" style="position: absolute; bottom: 16px; right: 10px;">
    <!-- bullet navigator item prototype -->
    <div u="prototype" style="POSITION: absolute; WIDTH: 12px; HEIGHT: 12px;"><div u="numbertemplate"></div></div>
</div>
<!-- Bullet Navigator Skin End -->

And then you can modify css to change the look of your bullet/number.