Navigation on Slider

Hi, how can I add navigation on the slider? Thanks

Hello there,

In order to achieve that objective, could you 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 code block:

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

  1. Change the pagination option value to true. So it will look like:

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

  1. You might want to minify this JS file here
  2. Save changes. Then update through FTP or cPanel
  3. Apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css.
.slides-pagination{
  position: relative;
  margin-top: -40px;
  z-index: 9999;
  text-align: center;
}

.slides-pagination a{
  display: inline-block;
  width: 24px;
  height: 24px;
  margin: 3px;
  background: #fff;
  border-radius: 100%;
}  

You may adjust the styling accordingly.

As you are editing the core theme’s file, you should take it at your own risk. The modifications you’ve made will be lost once the theme gets updated in the future. So you should do this adjustment again.

Regards,
Kharis

Thanks a lot, Kharis. I have a child theme, so I’ll copy and edit there.

Hello there,

If you are working with a child theme, please see my previous reply posted here.

Regards,
Kharis

Can the navigation dots state change to indicate the corresponding active image?

Hello @pase,

Please check this topic that might provide the solution for your question.

Regards,
Kharis

Thanks for getting back. Let me describe the effect I am trying to add the slideshow.
The dots at the base of the slideshow change color. The color change indicates the current slide.
For example: in a three image slideshow with three dots.
When slide 1 fades in dot number 1 changes to green.
When slide number 1 fades out dot number 1 fades back to white
When slide 2 fades in dot number 2 changes to green.
When slide number 2 fades out dot number 2 fades back to white
When slide 3 fades in dot number 3 changes to green.
When slide number 3 fades out dot number 3 fades back to white

The dot color transition needs to be synchronized with the slide show fade transition.
Can this behavior be incorporated to the slide show?

hello,
my image slider is working fine with arrows but text on the image is not working…

Hi Kharis,

thank you for ur guide…it works on my page! Yeay!

Regards,
thebiskut

Hi @pase,

> Can this behavior be incorporated to the slide show?

To style the active slide pagination, you can add this extra CSS code:


.slides-pagination a.current{
  background-color: #fff000;
  color: #000;
}  

Regards,
Kharis

Hi Kharis

I have tried your suggestion and it was not working for some reason on the page http://daien.tech/

Here is the modified main.js

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

and Here are the added customer css


.slides-pagination{
  position: relative;
  margin-top: -40px;
  z-index: 9999;
  text-align: center;
}

.slides-pagination a{
  display: inline-block;
  width: 24px;
  height: 24px;
  margin: 3px;
  background: #fff;
  border-radius: 100%;
}  

.slides-pagination a.current{
  background-color: #fff000;
  color: #000;
}  

Can you please let me know where I have done wrong?

Kind Regards

Dean

> Here is the modified main.js

Have you transferred it to the main.min.js file as this file of which loaded in the site. Please review once again the steps I suggested here in this thread.

Regards,
Kharis

Hi Kharis

Thank you for the advise, that worked like magic.

Another quick question, how can I remove the numbers in the pagination dots?

Kind Regards

Dean

Hello there,

Add this CSS code:


.slides-pagination a {
  text-indent: -9999px;
}

Regards,
Kharis

Hi Kharis,

I also followed your steps on my site www.sandrametzbauer.com but unfortunately it doesn’t change anything.

I copied the js/main.js into the js/main.min.js and changed it like you said. Then I copied the CSS code into my Simple Custom CSS plugin aswell as in Sydney’s additional CSS in customizer.

What did I do wrong?

Thank you

Regards
Sandra

Hello there,

Try disabling script minification and flush active caching from WP Super Cache plugin. Because they might stop new code addition to take an immediate effect.

Regards,
Kharis

Thank you for your quick reply!

I disabled the whole Cache plugin now but still can’t see any difference.

Regards
Sandra

Hello Sandra,

I found the below code hasn’t yet been applied.

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

Did you remove it?

Regards,
Kharis