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:
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 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!# 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 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?# 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 4:52 am
This reply has been reported for inappropriate content.
The non JS solution is to use an extra div between the container and the content blocks, and put the
Edit: nevermind, it works without the extra div too… @TheDoc, maybe it didn’t work for you because of
You must be logged in to reply to this topic.