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 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.

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

Thanks @ChrisP.

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

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

@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.

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/

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

The non JS solution is to use an extra div between the container and the content blocks, and put the white-space: nowrap there.

http://codepen.io/CrocoDillon/pen/ifHza

Edit: nevermind, it works without the extra div too... @TheDoc, maybe it didn't work for you because of no-wrap instead of nowrap :P

@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/

Looks good :)

Isn't that (looping) the whole point of a carousel?

set your infinite to :false and that should take care of the reload.

did you have circular set to false as well? the example at the very bottom of their homepage is what you're looking for functionally. Checkout their javascript call and settings.

Would anyone mind helping me create a lightweight content slider from scratch? I can't find one that fits what I need it to do.

Basically I want it to just show 3 articles and slide to the next set. Soo, if I have 7 content blocks, it should do this:

3 blocks -> (slide) -> 3 blocks -> (slide) -> last block

Most content sliders will do this:

3 blocks -> (slide) -> 3 blocks -> (slide) -> last block + first 2 blocks

So it slides 3 blocks twice and adds two of the beginning blocks on the last one. This is not ideal nor what I'd like. It's been quite frustrating that I can't seem to find one that doesn't do what I explained in the second example.

I took the liberty to upload the content to CodePen in case anyone would like to help. I also renamed the title.

http://codepen.io/chrisburton/full/eEwoD

@CrocoDillon Dude, you're a rock star. Thank you. One question, how can I replace your arrows with my own?

Edit: Nevermind. I removed the overriding backgrounds. How can I attribute you, URL + name or just name?

Ermmm, I haven't thought about that. No attribution needed but if you insist just name will be fine since my website is just a placeholder right now :P

Seems to be a problem with setting multiple id's on the #ajax div, there can be only one id for each element.

I changed my mind, add www.crocodillon.com instead of my css-tricks profile, if that's cool with you :) I do plan to have content soon anyway.

You're welcome :) and thnx!

I'm playing with the idea of using % as positioning and it seems to fix that problem, but it adds another. How to know what % to use? left: -100%; translates to 985px, if I'd figure out where this number comes from I could write the code to calculate the exact % to use, instead of what I'm doing here http://codepen.io/CrocoDillon/pen/xmBuA , using multiples of -100%.

For me it doesn't, if I use -100% on #ajax then there is a border visible that shouldn't be visible. Maybe just go with that for now and remove the border for nth-child(3n) again? Or hardcode the 985px in JS (which sucks), I've updated my pen for that. Still an unwanted border though on the 2nd page.

I'm puzzled, let me think about that for a while. Go with the first solution for now? Seems to be the best solution as long as users don't resize after scrolling...

At least I found out where the 985px comes from. jQuery's .position().left gets the position relative to first positioned ancestor (in this case .page-wrap) "Oops" :P That element has 25px padding. So the slider started at 25px relative to that element. Sliding it 100% (or 1010px) to the left made it 985px. At least this isn't a concern anymore, since we aren't setting or getting the #ajax position using that jQuery function. Using the function on the articles worked because #ajax is their positioned ancestor.

So multiples of -100% should work, except it doesn't because the total width of 3 articles is (or should be) 100%, adding borders makes it go over 100%. Using box-sizing: border-box; fixes that. Updated pen: http://codepen.io/CrocoDillon/pen/xmBuA

Can probably cleanup the javascript alot now, a lot vars that aren't needed anymore. (Edit: done)

I don't know, I only tested on CodePen, but yeah that's weird. Maybe what you had were just rounding errors? I did put a few extra decimals to .article { width: 33.3333%; }, and any additional rounding errors get masked with

.articles .article:nth-child(3n), .articles .article:last-child {
  border-right: none;
}