Grow your CSS skills. Land your dream job.

How to create a Content Slider with Cycle.js?

  • # February 24, 2013 at 10:53 pm

    First off I don’t even know the actual name for this type of feature so I went ahead and called it a News Ticker lol.

    Anyway, I was [browsing a site](http://www.exponaute.com/ “http://www.exponaute.com/”), scrolled down to the “Magazine” section and noticed the left div has links inside with a Title and description. Underneath the div are arrows that point up and down, which scrolls for more of those links…

    I was fascinated with it, so I asked a fellow friend if he could recognize the plugin the designer used and he mentioned the [Cycle.js](http://jquery.malsup.com/cycle/ “http://jquery.malsup.com/cycle/”) plugin.

    The examples don’t give instructions on how to set everything up, so I basically wanted help on how to set up the HTML, CSS, &JS in order to get a similar slider as the one on Exponaute…

    I’d really appreciate the help!

    # February 24, 2013 at 11:22 pm

    Checkout the final example on this page: http://jquery.malsup.com/cycle/int2.html

    # February 24, 2013 at 11:25 pm

    btw a ticker would be more like this: http://bxslider.com/examples/ticker

    The effect you’re going for is more likely called a content slider.

    # February 24, 2013 at 11:26 pm

    @dfogge Thanks but I am still confused…

    # February 24, 2013 at 11:27 pm

    @dfogge I wanted to figure out the title of it as well, so thanks again! :)

    # February 25, 2013 at 2:05 am

    Anyone kind enough to help me get this started?

    # February 25, 2013 at 3:08 am

    here’s the beginner tutorial: http://jquery.malsup.com/cycle/begin.html

    create a codepen, and let us know if you have any specific questions.

    # February 25, 2013 at 4:35 am

    @dfogge [This is a horrible fiddle, but it’s the best I can do so far.](http://jsfiddle.net/yAkT8/3/ “http://jsfiddle.net/yAkT8/3/”)

    # February 25, 2013 at 3:15 pm

    hmm, looks like you need to brush up on some basics. here’s a great place to get started: http://learn.shayhowe.com/

    # February 25, 2013 at 3:34 pm

    Dunno if this helps: http://bxslider.com/

    # February 25, 2013 at 4:26 pm

    @dfogge lol

    # February 25, 2013 at 5:08 pm

    no offense, just some friendly advice. based on looking at your markup it seems you should probably get the basics down before confusing yourself with jquery plugins.

    # February 25, 2013 at 7:40 pm

    @dfogge The actual HTML, CSS looks better, I scrambled everything inside of the fiddle. I bookmarked the site you recommended though! Appreciate it!

    # February 25, 2013 at 7:46 pm

    sure no prob, you might also want to check this series that was released the other day: http://try.jquery.com/

    i really with this existed when i got started with jquery…

    # March 1, 2013 at 3:19 am

    @dfogge Thank you ! I will definitely check it out :)

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

You must be logged in to reply to this topic.

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