Post Carrousel module - control previous/next with buttons outside of the module

Beaver Builder
1

Hi support!

I’ve created the following page using the BB plugin & theme : http://preview.brandspecials.nl/despiraal/ht2F9r2J/

In the bottom above the footer I’ve created a post carrousel that I want to control (using javascript or jquery) but I need to how I can target the previous / next function of the post carrousel. Which function should I use?

Under the carrousel I’ve create a section with the following html which should control the carrousel
<div id=“slide_controls”><a href="#" id=“slide_previous”><i class=“fa fa-angle-left”></i></a><a href="#" id=“slide_next”><i class=“fa fa-angle-right”></i></a></div>

2

Hey Twanneman,

We’re actually using BXslider to power up the carousel. Check out their goToNextSlide and goToPrevSlide methods on the link below. Take note that the class name we’re using is .fl-content-slider-wrapper. :slight_smile:
http://bxslider.com/options#goToNextSlide

Let us know how it goes!

Ben

3

Hi Ben,

I’ve added the following code to the layout-settings javascript tab but the buttons are not working.

jQuery(document).ready(function(){
    slider=jQuery('.fl-content-slider-wrapper').bxSlider();
    jQuery("#slide_previous").click(function(e) {
        e.preventDefault();
        console.log("previous");
        slider.goToPrevSlide();
    });
    jQuery("#slide_next").click(function(e) {
        e.preventDefault();
        console.log("next");
        slider.goToNextSlide();
    });
});

The function is called as I can see the log messages but the slider isn’t repsonding. Can you check if I referenced the slider properly?

Kind regards, Twan

4

Hey Twan,

Can you share temp admin access to the site so we can check?

Ben

5

[Content Hidden]

6

Hey Twan,

I actually gave you the wrong wrapper, sorry about that. That wrapper is for the content slider. The problem, however, is that we currently don’t have a way to access and work with the carousel object, unlike our Content Slider module. Our lead dev claims it’s easy to add one though so we may be able to add it in time for the next maintenance patch. :slight_smile:

Ben

7

Okay Ben, thank you for the update.

So as I understand correctly at the moment there’s no way to control the post carousel with external JS.
Is there a way to make it work regardless? Or maybe just as a temporary fix/patch?

If I use the content slider module then it will work for sure? The problem I have with the content slider module is that it won’t load posts dynamically.

When will the team release the next maintenance patch?

8

Hey Twan,

I’ll ping you once they update the ticket with the fix. :slight_smile:

And yes, that code works for our Content Slider module.

Just received word that we’ll be releasing a minor update early next week. Hopefully, this will be included there.

Ben

9

Hey Twan,

I just pushed this update so it will be ready for 1.7.6 next week. Here’s how you can use it…

var slider = jQuery( '#my-module-id .fl-post-carousel-wrapper' ).data( 'bxSlider' );

slider.someSliderFunction();

Let me know if you have any questions about that.

Justin

10

Hey Justin & Ben,

Awesome, can’t wait!

I’ll implement this next week and let you know if I have any feedback.

Happy easter ^^

Kind regards, Twan

11

Thanks, Twan! You too :slight_smile:

12

Hey Ben & Justin,

Just installed the latest version of the plugin and implemented your code. It works like a charm, thank you very very much!

Kind regards, Twan

13

One more question, which modules work with / use the bxslider? Just the Posts Carousel and Posts Slider modules for now right?

14

Hi Twan,

I’m happy to hear that it’s working!

One more question, which modules work with / use the bxslider? Just the Posts Carousel and Posts Slider modules for now right?

Those two and the Content Slider.

Justin