To start, I would first set up my JS file by initializing three unique elements - 'mobile_left_mble', 'mobile_right_mble', and 'text_btn' - with their own individual BxSlider calls. Each call would be stored in a separate variable for easy access.
var mySlider1;
var mySlider2;
var mySlider3;
jQuery(document).ready(function($){
mySlider1 = $('.mobile_left_mble').bxSlider({
pager:false
});
mySlider2 = $('.mobile_right_mble').bxSlider({
pager:false
});
mySlider3 = $('.text_btn').bxSlider({
pager:false
});
});
Next, in the HTML file, I would create a custom pager for the sliders. Each pager-item would have a specific data attribute to indicate which slide it corresponds to. This way, by clicking on a pager-item, the script can determine the slide index and navigate to the correct slide.
<ul class="one-pager-to-rule-them-all">
<li><a class="pager-item" data-slide="0">1</a></li>
<li><a class="pager-item" data-slide="1">2</a></li>
<li><a class="pager-item" data-slide="2">3</a></li>
<li><a class="pager-item" data-slide="3">4</a></li>
</ul>
Then, in the JS file, I would create an OnClick event for the pager-items. Using BxSlider's built-in methods, such as 'goToSlide()', the script can easily navigate to the selected slide based on the data attribute of the clicked pager-item.
var toSlide = $(this).attr('data-slide');
mySlider1.goToSlide(toSlide);
mySlider2.goToSlide(toSlide);
mySlider3.goToSlide(toSlide);
By following these steps, all sliders can be controlled using the same custom pager.
For a demonstration, check out this jsfiddle
Does this solution meet your requirements?