Geek Answers Handbook

Horizontal centering of an active bxSlider carousel image with a seamless loop?

I want to make a very simple seamless carousel and tried using bxSlider, but I run into a problem when my images are inactive.

I have 3 x 1000px images, and all I want to do is ensure that the active image is in the middle of the browser and the other two images endlessly loop on the left / right sides, for example:

enter image description here

I tried to use the trick with negative margins ( left: 50%and margin-left: -500px), but it did not work, and bxSlider looked crazy.

My code is very simple and there is 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?

+4
4

"" CSS.

.bx-wrapper 5000 , 3 × 1000 , "" 2 × 1000 , bxSlider "" .

margin-left: -2500px; left: 50%; . , , , .

, CSS :

#slideshow-wrapper {
    width: 1000px;        /* Width of single slide */
    margin-left: -2500px; /* Half of total carousel width including overflow images */
    left: 50%;
}

#slideshow-wrapper .bx-wrapper {
    width: 5000px !important; /* Total width including overflow images */
    margin: 0 auto;
    position: relative;
}

, " " "-" , . , bxSlider displaySlideQty, , .

displaySlideQty 1, 3 , , bxSlider / "" "" . displaySlideQty 3 , - .

$("#slider").bxSlider({
    moveSlides: 1,
    displaySlideQty: 2,
    responsive: false,
    infiniteLoop: true
});
0

, .

: - http://jsfiddle.net/dush88gs/rj9r74a0/41/




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

To have a slider in the center, you need to keep the carousel in the container, so insert the slider into the 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 an infinite loop, you need to insert this 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 ...

+2
source

Perhaps this is what you need.

http://jsfiddle.net/j3hgA/1/

body {
    overflow: hidden;
}

ul {
    position: absolute;
    list-style: none;
    width: 3000px;
    left: 50%;
    margin-left: -1500px;
}

li {
    float: left;
    width: 1000px;
}
0
source

More articles:


All Articles