Menu
I want to make a really simple seamlessly-looping carousel and have tried using bxSlider, but am encountering an issue where my images are off-center.
I have 3 x 1000px wide images and all I want to do is ensure the active image is in the middle of the browser, with the other two images infinitely looping on the left/right sides, like so:
I've tried using a negative-margins trick (left: 50% and margin-left: -500px) but it didn't work and bxSlider went kind of crazy.
My code is very simple and I have a fiddle here: http://jsfiddle.net/j3hgA/
<ul class="bxslider">
<li><img src="http://i.imgur.com/pOh3bXm.jpg" /></li>
<li><img src="http://i.imgur.com/VrvQUzu.jpg" /></li>
<li><img src="http://i.imgur.com/pJr77Ee.jpg" /></li>
</ul>
Is there a better way to do this?
989
DEMO :- http://jsfiddle.net/dush88gs/rj9r74a0/41/
Complete code is here
HTML
<head>
<link rel="stylesheet" type="text/css" href="css/jquery.bxslider.css"/>
</head>
<body>
<div class="bxslider">
<div class="slide"><img src="images/1.jpg" width="1000" /></div>
<div class="slide"><img src="images/2.jpg" width="1000" /></div>
<div class="slide"><img src="images/3.jpg" width="1000" /></div>
<div class="slide"><img src="images/4.jpg" width="1000" /></div>
<div class="slide"><img src="images/5.jpg" width="1000" /></div>
<div class="slide"><img src="images/6.jpg" width="1000" /></div>
</div>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- bxSlider Javascript file -->
<script src="js/jquery.bxslider.min.js"></script>
<script>
$(document).ready(function(){
$('.bxslider').bxSlider({
slideWidth: 900,
minSlides: 2,
maxSlides: 3,
moveSlides: 1,
pager: false,
auto: true
});
});
</script>
</body>
CSS
div.bxslider {
margin-left: 25%;
margin-right: 25%;
}
For having the slider to the center one have to contain the carousel into a container, so insert slider into a container...
HTML:-
<div class="slide-contain">
<ul class="bxslider">
<li><img src="http://i.imgur.com/pOh3bXm.jpg" /></li>
<li><img src="http://i.imgur.com/VrvQUzu.jpg" /></li>
<li><img src="http://i.imgur.com/pJr77Ee.jpg" /></li>
</ul>
</div>
CSS:-
.slide-contain { margin: 0 auto; width:1000px; }
And for infinite loop, you have to insert the parameter to make the slider work...
JS:-
$("#slider").bxSlider({
moveSlides: 1,
displaySlideQty: 2,
responsive: false,
infiniteLoop: true
});
Like the answer below...
DEMO:- http://jsfiddle.net/j3hgA/2/show/
Thanks, hope that works for you...
33
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
