Main Slider Pagination

Hello,

I added Pagination to my hero slider (superslider), so I already do have those bullet pionts, but I can not make the current button on current slide ACTIVE or as as the code says CURRENT, so all the buttons look the same even on the active slide

(I would love to have this - like they do have on superslides website - like this:
1
)

Even if I added this to my slider.php:
<nav class=“slides-pagination”>
1
2
3
4
</nav>

or this to my slider.php:
<nav class=“slides-pagination”>
1
2
3
4
</nav>

I think that I have to add something to the javascript???
Thank you and my web site is not live yet, so if you can pls help me anyway.

sorry, text got lost, here it is:

https://justpaste.it/rzcf

<nav class=“slides-pagination”>
1
2
3
4
</nav>

<nav class=“slides-pagination”>
1
2
3
4
</nav>

Hello there,

I would like to apologize in advance for the delayed respond.

Could you confirm if you have properly called the superslider JS and CSS files?

If you haven’t yet, please refer here:

Regards,
Kharis

Hello Kharis,

thank you very much for responf. And yes I have properly called the superslider JS and CSS files (at least I think, bcs it is working fine), the only think which doesnt work is class doesn equal to active as you can see in those two pictures I have enclsed 1st is mine and 2nd is Superslides (https://justpaste.it/s2eu). Maybe I need to add something to the jquery.superslides.js ??? Bcs I am missing this ('class=“current”) as you can see on the pictures.

The only think I am missing is to do CSS styling like this (.slides-pagination a.current {
background: white;
}) but I can NOT do it bcs I dont have a.current at the moment.

Thank you again, you are the man.
Steve

Sorry 1st pictre is obviously Superslides and 2nd is mine :slight_smile:

Thank you Kharis.

Hello there,

Please try to do the following:

  1. Open the js/main.js in your code editor, then copy the whole content of it; then paste it into js/main.min.js. So it will be more readable
  2. Find the following lines:

(function() {
	if ( $( "#slideshow" ).length ) {
		$('#slideshow').superslides({
			play: $('#slideshow').data('speed'),
			animation: 'fade',
			pagination: false
		});
	}
})();

  1. Change the pagination option value into true

(function() {
	if ( $( "#slideshow" ).length ) {
		$('#slideshow').superslides({
			play: $('#slideshow').data('speed'),
			animation: 'fade',
			pagination: true
		});
	}
})();

  1. Apply the following CSS code through the Simple Custom CSS plugin
.slides-pagination{
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  text-align: center;
}

.slides-pagination a{
  margin: 0 10px;
}

Let me know how it goes.

Regards,
Kharis

Hello Kharis,

yes, it is working :slight_smile:

Thank you again, you are the man.
Steve

Hello Steve,

Great! Glad to know that.

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis