Grow your CSS skills. Land your dream job.

Custom jQuery Content Slider

  • # February 14, 2013 at 9:17 pm

    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?

    # February 14, 2013 at 9:55 pm

    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.

    # February 14, 2013 at 10:01 pm

    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

    # February 14, 2013 at 10:33 pm

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

    # February 14, 2013 at 10:50 pm

    I’ve been trying with an inner container and absolute positioning..nothing so far

    # February 14, 2013 at 11:13 pm

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

    # February 14, 2013 at 11:17 pm

    Here’s what I got. It’s kinda hacky with the inner container having a 90000px width, so I guess it’s technically not infinite either.

    http://codepen.io/ChrisPlz/full/KAqDe

    # February 14, 2013 at 11:49 pm

    Thanks @ChrisP.

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

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

    # February 15, 2013 at 12:30 am

    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”)

    # February 15, 2013 at 12:38 am

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

    # February 15, 2013 at 1:27 am

    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.

    # February 15, 2013 at 1:30 am

    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.

    # February 15, 2013 at 1:43 am

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

    # February 15, 2013 at 4:52 am

    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

    # February 15, 2013 at 5:39 am

    Oh I remember why I had the extra div, you can use this div as a hook for jQuery to apply relative position to. I updated the pen to demonstrate this :)

Viewing 15 posts - 1 through 15 (of 45 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".