Instead of getting caught up in WordPress's idiosyncrasies, let me provide you with an example of a Dual Flex-bxSlider and guide you through the key components.
- The flex container
.bxMain has two child divs: .bxRight and .bxLeft. This flexible layout is responsive and can adapt in various ways, like stacking into a column without any JS/jQuery intervention. For more comprehensive information on flexbox, refer to this resource.
- Within these divs are containers for two bxSliders:
.mxDisplay and .txBoard.
.bxRight .txBoard.bxLeft .mxDisplay
I have enabled controls for .txBoard (controls: true) and disabled them for .mxDisplay (controls: false). By utilizing bxSlider callbacks, I synchronized actions between .mxDisplay and .txBoard:
- Both bxSliders utilize the
onSlideNext: moveBX, and onSlidePrev: moveBX, callbacks.
The function moveBX() gets invoked with every slide movement:
function moveBX($ele, from, to) {
mx.goToSlide(to);
tx.goToSlide(to);
}
Another crucial detail pertains to the buttons; now there is only one set controlling both bxSliders simultaneously (from a visual standpoint). To customize button appearance and placement, I implemented the following:
nextSelector: '.bxRBtn',
prevSelector: '.bxLBtn',
nextText: '►',
prevText: '◄'
Visit bx Options for complete details.
The demo may lack polish style-wise (created it hastily), so I'll leave the aesthetics up to you. If this doesn't meet your requirements, feel free to provide additional details. Good luck!
DEMO
CSS
.bxMain {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-justify-content: stretch;
justify-content: stretch;
-webkit-align-content: center;
align-content: center;
-webkit-align-items: center;
align-items: center;
}
.bxLeft {
float: left;
width: 100%;
height: 100%;
min-height: 390px;
-webkit-order: 0;
order: 1;
-webkit-flex: 0 1 50%;
flex: 0 1 50%;
-webkit-align-self: stretch;
align-self: stretch;
}
.bxRight {
float: left;
width: 100%;
height: 100%;
min-height: 390px;
-webkit-order: 2;
order: 2;
-webkit-flex: 0 1 50%;
flex: 0 1 50%;
-webkit-align-self: stretch;
align-self: stretch;
}
/* Additional CSS rules omitted for brevity */
HTML
<section id="bxShell">
<main class="bxMain">
<div class="bxLeft">
/* Content within bxLeft omitted for brevity */
</div>
/* Buttons markup also omitted for brevity */
<div class="bxRight">
/* Content within bxRight omitted for brevity */
</div>
</main>
</section>
jQuery
$(function() {
var mx = $('.mxDisplay').bxSlider({
pager: false,
controls: false,
onSlideNext: moveBX,
onSlidePrev: moveBX,
adaptiveHeight: true
});
var tx = $('.txBoard').bxSlider({
pager: false,
onSlideNext: moveBX,
onSlidePrev: moveBX,
nextSelector: '.bxRBtn',
prevSelector: '.bxLBtn',
nextText: '►',
prevText: '◄',
adaptiveHeight: true
});
function moveBX($ele, from, to) {
mx.goToSlide(to);
tx.goToSlide(to);
}
});