Remove Navigation from Slider

JavaScript
1

Hi guys n girls,

I’m currently using this jquery slider on one of my projects, can anyone tell me how to remove the navigation arrows/options within the JS file?

Ive looked through the comments and cant find any advice on this issue.

Additionally I would like to remove the dots at the bottom off the slider too.

Here is the link to the slider that i decided to use: http://tympanus.net/codrops/2013/02/26/full-width-image-slider/

Many thanks in advance

2

Hi,

Assuming that there is no obvious way to do this in the documentation (I didn’t look), then just use your browser tools to find out the name of the containing elements and set their display property to none.
For example, in the case of the dots, we have this HTML:

<div class="cbp-fwdots">
  <span class=""></span>
  <span class="cbp-fwcurrent"></span>
  <span></span>
  <span></span>
  <span></span>
</div>

So, thiss CSS should do what you want:

.cbp-fwdots{
  display: none;
}
3

Thanks for your quick reply Pullo, I did trying playing with the css, but it seems that I still get this:

<>

On the bottom left hand side of the slider. That’s why I thought it may be best to try to remove the function from the JS instead.

4

ok… found it in the JS!

this.$navPrev = $( '<span class="cbp-fwprev"><</span>' ).hide();
				this.$navNext = $( '<span class="cbp-fwnext">></span>' );
				$( '<nav/>' ).append( this.$navPrev, this.$navNext ).appendTo( this.$el );

Thanks for you help!

5

No probs :slight_smile:

I would still override these settings in the CSS, however, as if you update the plugin at a future date, you could overwrite your changes,
If you could make a simple demo page with the slider on it, I can take a look at it for you.

6

It’s all good now thanks bro. I have found and changed the relevant CSS as you suggested plus ‘backed up’ the original code just in case i need it again.

Thanks for your help though mate,

All the best!