Horizontally centering the active image of a bxSlider carousel with a seamless loop?

WackGet picture WackGet · Nov 5, 2013 · Viewed 14.7k times · Source

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:

enter image description here

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?

Answer

Dushan picture Dushan · Jul 30, 2015

This is what you need..

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%;
}