Adaptive bxSlider width or center image

Question

I have a slideshow with pictures of many different aspect ratios. I would like the images to be centered in the slideshow. How can I do this, or even better, how can I automatically resize the slider?

@newTag: Sorry for making you wait. :-) Here you go. – Maxwell175 Mar 12 '14 at 01:52 — Maxwell175, Mar 12 '14 at 01:52

newTag · Accepted Answer · 2014-03-10T04:44:27.813

14

For solving the center problem

.bx-wrapper img {
    margin: 0 auto;
}

slideWidth option

The width of each slide. This setting is required for all horizontal carousels!

Like this:

JS:

$('.bxslider').bxSlider({
   mode: 'fade',
   captions: true,
   pagerCustom: '#bx-pager',
   adaptiveHeight: true,
   slideWidth: 300
});

HTML:

<ul class="bxslider">
  <li><img src="/images/730_200/hill_fence.jpg" /></li>
  <li><img src="/images/730_100/tree_root.jpg" /></li>
  <li><img src="/images/730_150/me_trees.jpg" /></li>
</ul>

edited Mar 10 '14 at 04:44

answered Mar 09 '14 at 06:40

newTag

2,149
1
22
31

@MDTech.us_MAN That is the jQuery initialization code, where we specify the width of all slides. (only once) – newTag Mar 10 '14 at 04:47
It only centralizes horizontally – Lucas Bustamante Aug 14 '16 at 18:45
So, to sum this up, the width cannot change dynamically. You can only set it once for everything. – Maxwell175 Jul 17 '17 at 18:59

Adaptive bxSlider width or center image

1 Answers1