Grow your CSS skills. Land your dream job.

Custom jQuery Content Slider

  • # February 15, 2013 at 5:57 am

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

    # February 15, 2013 at 6:06 am

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

    # February 15, 2013 at 6:08 am

    Looks good :)

    # February 15, 2013 at 6:12 am

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

    # February 15, 2013 at 7:01 am

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

    # February 15, 2013 at 7:07 am

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

    # February 15, 2013 at 7:21 am

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

    # February 15, 2013 at 7:22 am

    @yeeyang Didn’t work.

    # February 15, 2013 at 5:56 pm

    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.

    # February 15, 2013 at 11:36 pm

    @yeeyang Nope, that’s actually not what I wanted. I wanted the last item by itself instead of sliding over one. I emailed them and they said it isn’t possible currently. I have to use an entirely different plugin which I think I’ve found.

    # February 16, 2013 at 8:27 am

    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

    # February 16, 2013 at 9:28 am

    Forked it, could have spend more time styling the arrows but I need a break :P

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

    # February 16, 2013 at 9:44 am

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

    # February 16, 2013 at 9:59 am

    Hehe ^_^ I see you already figured that out.

    # February 16, 2013 at 10:06 am

    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

Viewing 15 posts - 16 through 30 (of 45 total)

You must be logged in to reply to this topic.

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