Ok, instead of worrying about WordPress's quirks, I'll give you an example of a Dual Flex-bxSlider and walk through the important parts.
- The two divs
.bxRight and .bxLeft are the children of the flex container .bxMain. This flexbox layout is responsive and has the potential to change other ways like stack into a column without any JS/jQuery. I only did some basic flexbox, if you want more info go here.
- Back to those two divs
.bxRight and .bxLeft, they are the containers for the two bxSliders: .mxDisplay and .txBoard
.bxRight .txBoard.bxLeft .mxDisplay
I gave .txBoard controls: true and .mxDisplay controls: false, then using bxSlider's callbacks, I slaved .mxDisplay's actions to .txBoard's actions:
- Both bxSliders have:
onSlideNext: moveBX, and onSlidePrev: moveBX, callbacks.
So moveBX() is called on every slide movement:
function moveBX($ele, from, to) {
mx.goToSlide(to);
tx.goToSlide(to);
}
The last important detail is the buttons, which there is now only one pair that controls both bxSliders simultaneously (well technically not really, but to the naked eye it is.) To take control of the buttons' appearance and positioning, I did the following:
nextSelector: '.bxRBtn',
prevSelector: '.bxLBtn',
nextText: '►',
prevText: '◄'
Go to bx Options for the full details.
The demo is kinda raw style-wise (wrote it in a rush) so I'll leave the aesthetics to you. If this isn't what your'e looking for, let me know and furnish me more details. Good luck, sir.
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;
}
.bxLBtn, .bxRBtn {
position: absolute;
z-index: 999;
}
.bx-prev, .bx-next {
font-size: 48px;
font-family: Times;
color: blue;
text-decoration: none;
}
.bxLBtn {
left: 0;
top: 50%;
}
.bxRBtn {
right: 0;
top: 50%;
}
HTML
<section id="bxShell">
<main class="bxMain">
<div class="bxLeft">
<ul class="mxDisplay">
<li>
<img src="https://placehold.it/670x630/000/fff.png&text=SLIDE+1">
</li>
<li> <p>N'ghft n'gha naflnilgh'ri llll stell'bsna Dagon kn'a ron ahog naflilyaa naflNyarlathotep, ebunma y'hah li'hee tharanakoth ngshagg chtenff gnaiih ehye lw'nafhoth geb, uaaah shtunggli cgeb llll mg sll'hanyth nog Yoggoth naflfm'latgh.</p> </li>
<li>
<img src="https://placehold.it/670x630/fff/000.png&text=SLIDE+3">
</li>
</ul>
</div>
<div class="bxLBtn"></div>
<div class="bxRBtn"></div>
<div class="bxRight">
<ul class="txBoard">
<li>
<p> Stell'bsna f'li'hee kn'a nglui hai bug vulgtlagln shtunggli ya k'yarnak, Azathoth y-ron Hastur tharanak 'fhalma Chaugnar Faugn fm'latgh lw'nafh 'fhalma nanw, tharanak ehye nilgh'ri nnnfhtagn vulgtm Hasturoth shugg y'hah.
Grah'n vulgtm sgn'wahl hlirgh syha'h hlirgh nw 'ai stell'bsna kn'a ngah shagg, zhro f'vulgtlagln y-ee nnnehye tharanak s'uhn y-uln cgof'nn ebunma gotha fhtagn, Chaugnar Faugn lw'nafh Chaugnar Faugn sgn'wahl h'gof'nn syha'hog nog czhro Hastur mnahn'.
Shub-Niggurath ehye fm'latgh uh'e h'gof'nn wgah'n hlirghog nalw'nafh Hastur stell'bsna ehyeagl kn'aoth cooboshu, uaaah s'uhn zhro gnaiih 'bthnk shtunggli ngli'hee ya ftaghu mnahn' cllll, Nyarlathotep s'uhn uh'e shagg gnaiih phlegeth ooboshu bug athg kadishtu chtenff. </p>
</li>
<li>
<img src="https://placehold.it/670x630/ff8cff/00df00.png&text=SLIDE+2">
</li>
<li>
<p> Ph'nglui mglw'nafh Cthulhu R'lyeh wgah'nagl fhtagn. Uh'e nnnfhtagn, ilyaaagl li'hee gof'nn li'hee uln ooboshu, gof'nn Dagon phlegeth sll'ha tharanak ronor.
Ph'ch' naflhai naflnglui hrii ah mg k'yarnak clw'nafh, s'uhn gnaiih naflDagon naflathg ebunma ngy'hah 'bthnk ep, throdnyth ftaghu n'gha R'lyeh n'ghaor y-gotha.
Ngkadishtu ngfhtagn ehye uln zhro ya Dagon zhro Chaugnar Faugn r'luh sgn'wahl vulgtm nilgh'ri, h'ron llll vulgtmyar shugg syha'h uh'e ron chtenff k'yarnak naflphlegeth nnnah.
Ep shugg naflTsathoggua zhro nnnooboshu ah shugg naflehye throd, nw naflnglui fhtagn Dagon mnahn' shagg ebunma hupadgh ebunma, k'yarnak uaaahor Dagon ooboshu vulgtm athg cCthulhu. </p>
</li>
</ul>
</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);
}
});
