CODEWITHSUNDEEP
jquerycssslidercenteringbxslider
user1280853
user1280853

Reputation: 1169

how to center slides in bxslider, so no slides are cropped

Please take a look at the current site I'm developing: http://debourg-dev.ch/eliterent/ For the bottom brand logo slider, I am using bxslider. I'm wondering if there is a way to center the slides (logos) and to prevent bxslider from 'half showing' logos, because depending on the resolution viewing it, sometimes it shows a cropped logo if it can't fit them all into screen. Ideally I would only like it to display the logos in full that can fit into the current window.

Many thanks

Upvotes: 0

Views: 10260

Answers (2)

gabdara
gabdara

Reputation: 496

In order to get rid of the cropping and to have the slides fit no matter the resolution, you need to know the slide width and margin, then you can calculate maxSlides using the width of bxslider container.

Math.floor($('#container').width() / (slide_width + slide_margin));

See working example

Upvotes: 2

ralph.m
ralph.m

Reputation: 14345

It's easy enough to center each image in its li by adjusting removing this:

.bx-wrapper img {
    display: block;
}

and adding this:

.bx-wrapper li {
    text-align: center;
}

But I think you are out of luck regarding the cropping issue. I was going to suggest setting a % width on the lis, but that sets them in relation to the ul which is very wide, so that won't work. You could probably do it with JS, though.

Upvotes: 5

Related Questions