Content Slider Custom nav Links

Beaver Builder
1

Is there anyway to use custom nav links for the content slider ? Im need to assign those to the custom buttons (please look at screenshot) instead of the built-in and arrows or dots

https://www.dropbox.com/s/rgh9bm6lrrbfecw/content-slider.png?dl=0

2

copy and paste the url to see the image

3

Hey Carlos,

No, not out of the box. What about having a 2 column row with the content slider on the left, buttons on the right independent of the content slider? That or a more robust slider plugin are probably your best bet there.

Best,
Billy

4

Thats exactly how I have to … its two columns, on the left one theres the slider and on the right one theres the buttons, I want to target the slides by clicking on the buttons … sorry I wasn’t clear enough

5

Ah, I don’t believe so. I’ll do some testing to see what I can find.

6

great ! that would be absolutely amazing if we can achieve this !!!

7

Any luck with this?

8

Unfortunately, no, Carlos, sorry about that. This is out of scope of what we can offer here in the forums, but I did some testing and couldn’t really find a way to make this work how you would like. Wanted to give it a second set of eyes today, but nothing is clicking and we got to get back to the grind! :slight_smile: Apologies for any inconvenience there, but feel free to ask in the FB Group to see if anyone can come up with something custom for you.

Best,
Billy

9

Since the content slider uses bxslider I thought this might work … please check it out.

http://codepen.io/DavidVII/pen/jhoIc

I put this code inside an html module but it doesn’t seem to work, do you see what the issue is?


<script>
    jQuery( document ).ready(function($) {
        $('.bxslider').bxSlider({
          pagerCustom: '.customPager';
        });
    });
</script>

  <div class="customPager">
    <a data-slide-index="0" href=""><img src="http://bxslider.com/images/thumbs/tree_root.jpg" /></a>
    <a data-slide-index="1" href=""><img src="http://bxslider.com/images/thumbs/houses.jpg" /></a>
    <a data-slide-index="2" href=""><img src="http://bxslider.com/images/thumbs/hill_fence.jpg" /></a>
  </div>
10

Hey Carlos,

Unfortunately, that won’t work because the slider module code is already running by the time your code runs. One idea is that you can override the slider module in your theme as you’re doing with the posts module and make your changes there. Let me know if you have any questions about that.

Justin

11

That actually is a very good idea but it won’t work if I am using the content slider twice on the same page which I am in this case, and they’re right on top of each other but will keep it in mind for other projects! thank you very much for your help! Its greatly appreciated!