Custom jQuery Content Slider

[chrisburton]

To start off, take a look at my current article blocks: http://chrisburton.me/dev

I can’t figure out the ajax issue so I was wondering if I could do something like this:

click to see larger version

The container of the article blocks have a hidden overflow while the article blocks are inline-block. The problem with this is, if I set a width to the container, the blocks would not be inline anymore. They would drop underneath each other instead of hidden off the page. Does this make sense?

[TheDoc]

While putting together a pen with a solution that I thought for sure would work, I learned that you can’t use `white-space: no-wrap;` on block elements.

[TheDoc]

Unfortunately using jQuery to help us out. There *must* be a pure CSS way that I’m missing, but this can be your fallback!

http://codepen.io/ggilmore/pen/610a62cacbf0c248421e8b3a1e903028

[chrisburton]

@TheDoc Damn. I hope there is a CSS solution as well. Maybe absolute positioning? The only issue I see with your version is that if I increase the width of the blocks, they wrap underneath each other. The reason this can’t happen is because I will be using a jQuery click function to slide in the next set of blocks. Much like what I’m doing with ajax in the above link.

[chrisburton]

Yeah, it’s a tricky request. Thanks @ChrisP and the same to @TheDoc for writing all that up.

[chrisburton]

Thanks @ChrisP.

Now I’m trying to slide them but it isn’t working that well.

http://codepen.io/chrisburton/pen/BbvyF

[yeeyang]

Honestly I don’t know what you’re wanting to achieve… but from my guestimation, you want your articles to be viewable across the entire screen?

Took @chrisburton ‘s pen and modified it. [http://codepen.io/ahabion/pen/bIfvJ](http://codepen.io/ahabion/pen/bIfvJ “http://codepen.io/ahabion/pen/bIfvJ”)

[chrisburton]

@yeeyang If you look above at the image, I want an infinite row of content blocks that has a container of overflow hidden (so it only shows a set of 3 at a time). Then, with an on click function using jQuery, slide in the next 3 blocks. Make sense?

Take a look here: http://chrisburton.me/dev. Click on the arrows. That is what I’m trying to accomplish without ajax since I can’t figure out a bug.

[yeeyang]

Okay @chrisburton, checkout my pen now.

I removed the `position: relative` from your `.container` and added a `div.wrapper` around everything and set that up as a `position: relative` to establish a positioning context. Then kept the `position: absolute` on your `.inner-container`, which should snap to it’s closest parent positioning context, which is now `.wrapper`.

Used a bit of jquery to figure out the width and set that up for the style of `.inner-container` and got your buttons hooked up to animate…

you’ll want to tweak it and clean it up but I think that’s what you’re looking for.

[yeeyang]

Then again… i think you wanted your content to stay hidden … doh!

If you’re open to a jquery plugin, my recommendation for your usage would be [http://caroufredsel.dev7studios.com/](http://caroufredsel.dev7studios.com/ “http://caroufredsel.dev7studios.com/”)

Lots of customizations and will do pretty much anything you want to feed it.

[chrisburton]

@yeeyang You know what, I think a carousel is just what I need! Thanks.

[chrisburton]

@CrocoDillon I was talking with @jamy_za privately and I think we came up with a decent solution. I’m going to load in all my articles and use a jQuery Carousel for the functionality. I need to do a few tweaks to make it work exactly how I want it to but here it is: http://chrisburton.me/dev/

[Kitty Giraudel]

@chrisburton It seems like a no brainer to me. Do not reinvent the wheel. If you are looking for a carousel, just use a carousel.

[chrisburton]

@HugoGiraudel Initially I wanted to use Ajax but ran into a minor problem that I personally couldn’t solve. Oh and couldn’t recall the name of the carousel functionality until @yeeyang pointed it out.

Thanks @CrocoDillon

I’m running into one small problem with the carousel. When sliding to the previous items (right arrow), it will load back in the beginning article (see after getting to article 1, it shows 7 and 6 after it). I’d rather it just show the last article (1) and then have to click the left arrow to get back to the beginning. Any ideas?

[chrisburton]

@CrocoDillon Possibly? Perhaps a content slider might be a better idea?

[Author]

Posts