Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Joe Consterdine
Joe Consterdine
13,965 Points

Need Help With Unusual Slider Design (Codepen Included)

Hey guys,

so your bog standard slider is a full width image.

However I've come across a CSS issue I've never had to do before.

So the design I need to do for the slider works a bit like this:

http://s27.postimg.org/690ffvrcz/design.jpg

I basically need the active slide to be in the middle centered with two slides either side... when you click to go to the next slide the second slide will then be the active slide and the other slide will go to the side... and so on.

I've created a codepen to put up how the slides look by default.

http://codepen.io/anon/pen/ZQvwwW

I don't know how you do this with CSS.... I guess with negative margin or something?

i'd appreciate it if someone could push me in the right direction!

Thanks :)

3 Answers

Jeff Lemay
Jeff Lemay
14,268 Points

Just took a quick look.. I'm not 100% sure how Owl Carousel works, but the general idea would be:

  • Owl is calculating a fixed-width for each slide and a fixed width for the entire slideshow. You'll want to adjust that fixed width to be whatever 100% is minus 200px or so for each slide.
  • Then, in your css, set the margin to -100px on each side of the .current slide.
  • I think you'll run into an issue at the start and end of the slideshow (a blank slide will show on one side). I'm not sure how'd you counteract that.

Or you could look for a different plugin that has this style out the box. Maybe slick's center mode would work for you: http://kenwheeler.github.io/slick/

Michael Peterman
Michael Peterman
19,087 Points

Jeff, you beat me to it man :)

Michael Peterman
Michael Peterman
19,087 Points
Michael Peterman
Michael Peterman
19,087 Points

Hey man, do you need to use that Owl Carousel plugin? I usually try to avoid building on top of plugins / modifying basic functionality unless I really have to. Obviously styling and minor changes are expected, but it sounds like you're looking to make a pretty significant change in how content is displayed. I might look for a plugin that supports the functionality you're looking for out of the box. I might suggest checking out http://kenwheeler.github.io/slick/. They have a few examples of how to setup something pretty close to what you're going for. Hope this helps.

Joe Consterdine
Joe Consterdine
13,965 Points
Joe Consterdine
Joe Consterdine
13,965 Points

Great answers guys!

Just tested it using it's paddingcenter method and it works great.

Much appreciated.