CODEWITHSUNDEEP
jquery
nick
nick

Reputation: 376

Jquery adding extra margin space in slider mystery?

When you click the "work" button this live page it loads a jquery slider but it is adding some extra padding or margin when it first loads.

Then when I cycle through all the slides when it comes back to the first one, it properly resets to the specified css styling. Can't seem to figure this one out yet!

Upvotes: 0

Views: 337

Answers (2)

The Alpha
The Alpha

Reputation: 146191

Change your wrapper div's (wrapper_2, wrapper_3 ...) padding to padding: 30px 0 0 130px; in your 3styles.css file.

Upvotes: 1

Jeremy Miller
Jeremy Miller

Reputation: 383

Well, first I would get rid of all those crazy margins you have going on. It's really confusing looking at your code.

I would suggest going with position:absolute for the slider nav (next/previous) and I would not use any giant negative margins like you've got.

Part of your problem is that you've got the width of the bx-slider set to 655px, but that background image is tiny and doesn't match up.

It doesn't look like any of this really has anything to do with the bx-slider acting up, its the way you've got it all laid out with your style sheet.

My suggestions would be to make sure everything is set to 655px. the slider wrapper, the slider, the list items, etc.

Then, style your content within that accordingly. The images right now are not wide enough and that is why you're getting the images floating to the left. Instead, use some images that are wider. You can have the content centered within the list item, using the wrapper you have set up.

I would start over with your style sheet, because it is really messy. Again, don't be afraid of positioning elements absolutely, especially the nav. If you happen to move one item around the way you have it now everything will jump all over, because you've got these giant negative margins. It's going to be a headache to change later, so I would suggest fixing that now.

Upvotes: 1

Related Questions