I am attempting to create a slider that is centered on the view. The slide in the center should be positioned at the center of the red line(div).
This is my attempt: https://fiddle.jshell.net/4xgpgng1/1/
<style>
div.bxslider { margin:0 50%; text-align:center; }
.slide{ width: initial !important; margin: 0px 20px ; }
.slide img { width: 130px; }
</style>
<div style="position:absolute; width:140px; height:100px; border:1px solid red; margin:0 0 0 -70px; top:0;left:50%;z-index:2"></div>
<div class="bxslider">
<div class="slide a1"><img src="http://placehold.it/1000x680/112233/ffffff?text=FooBar1" /></div>
<div class="slide"><img src="http://placehold.it/1000x680/ee5678/ffffff?text=FooBar2" /></div>
<div class="slide"><img src="http://placehold.it/1000x680/435ab6/ffffff?text=FooBar3" /></div>
<div class="slide"><img src="http://placehold.it/1000x680/11cc22/ffffff?text=FooBar4" /></div>
<div class="slide"><img src="http://placehold.it/1000x680/ffa500/ffffff?text=FooBar5" /></div>
<div class="slide"><img src="http://placehold.it/1000x680/cc44ff/ffffff?text=FooBar6" /></div>
<div class="slide"><img src="http://placehold.it/1000x680/112233/ffffff?text=FooBar1" /></div>
<div class="slide"><img src="http://placehold.it/1000x680/ee5678/ffffff?text=FooBar2" /></div>
</div>
<script>
$(document).ready(function(){
$('.bxslider').bxSlider({
slideWidth: 130,
minSlides: 12,
maxSlides: 12,
moveSlides: 1,
pager: false,
auto: false
});
});
</script>
Seeking assistance, please.