CODEWITHSUNDEEP
jquerycssbxslider
user1327
user1327

Reputation: 948

How to properly add margin to elements inside bxSlider

Goal: have a slider with ability to slide DIVs, elements must have a gap of one another.

Problem: I have 6 slides (DIVs), they should look this: http://cl.ly/image/3t2Q0w1N350y (this is not quite accurate example, because image in the left slide been cut by about 15 pixels. But I hope it will give an idea of what needs to be achieved.)

I use code from the example page of the bxslider website:

$(function(){
 $('#slider1').bxSlider({
displaySlideQty: 3,
moveSlideQty: 1,
prevText: "",
prevSelector: '#backar',
prevImage: '/img/siteicons/slider-left-arrow.png',
nextText: "",
nextSelector: '#forwar',
nextImage: '/img/siteicons/slider-right-arrow.png'
 });
});

As I said slides needs to have a gap between elements so I added margin-right: 20px; to .element but the result was very strange... Now there is a a gap between the elements, but the elements themselves are not displayed correctly after a few turns. (example: http://cl.ly/image/3J0O2e360N1m)

So my question is: how to properly add margin/padding (whatever) to elements in the slider? I'm not sure is this question CSS or JS related, but I hope someone knows the solution.

I tried different margins/paddings, I also tried to add fixed number instead of getWrapperWidth(); to wrapperWidth = in the bxSlider code. But with no luck.

My test page: http://restop.cutepictures.ru/htmlmockup/test.html

Upvotes: 0

Views: 6322

Answers (2)

user1327
user1327

Reputation: 948

No margins, no paddings. You want to have a gap between elements in bxSlider – add additional width to your DIV/li (your "sliding element") etc.

In my case 

.element{
float: left;
width: 225px;
max-width: 225px;
max-height: 210px;
}

btw I also set fixed width to wrapperWidth in slider js

Upvotes: 1

Number1SuperGuy
Number1SuperGuy

Reputation: 374

The problem is your slider tool is using the width of the .element divs to determine what distance to slide when you click the arrows. In other words, get rid of the margin-right on the .element div

.element {
    float: left;
    max-height: 210px;
    max-width: 210px;
    width: 210px;
}

And add padding-right to your images

img {
    border: 0 none;
    padding-right: 10px;
}

With a bit of fiddling I imagine you can get that to look how you want it to.

Upvotes: 0

Related Questions