How to create next and prev buttons in jcarousel js

54 Posts

pauloneill79 Reply #1, 14 years, 6 months ago

http://thedojocreative.com/clients/opencity/carousel/

Hello all,
I've managed to get this prototype jcarousel working from http://sorgalla.com/projects/jcarousel/.
It's copied from a friends website because she wanted the same bottom links functionality.

It's working fine but I can't seem to create next and previous buttons... does anyone know how?

I've looked at the documentation but I'm not very good at js so I can't really understand.

In the demo these parameters are turned on for jcarousel but I don't fully understand how they work.

buttonNextHTML:"<div></div>",
buttonPrevHTML:"<div></div>",
buttonNextEvent:"click",buttonPrevEvent:"click",
buttonNextCallback:null,buttonPrevCallback:

54 Posts

pauloneill79 Reply #2, 14 years, 6 months ago

buttonNextHTML:"<div></div>",buttonPrevHTML:"<div></div>",buttonNextEvent:"click",buttonPrevEvent:"click",

387 Posts

whistlemaker Reply #3, 14 years, 6 months ago

taken from example code on sorgalla.com

<div class="jcarousel-scroll">
      <form action="">
        <a href="#" id="mycarousel-prev"> « Prev</a>
        <select>
          <option value="1">Scroll 1 item per click</option>
          <option value="2">Scroll 2 items per click</option>
          <option value="3">Scroll 3 items per click</option>
          <option value="4">Scroll 4 items per click</option>
          <option value="5">Scroll 5 items per click</option>
        </select>
        <a href="#" id="mycarousel-next">Next » </a>
      </form>
    </div>

this is in the file: static_controls.html

the code tags messed up a little:

« Prev should be: & laquo; Prev with no space between the & and l
Next » should be: Next & raquo; with no space between the & and r [ed. note: whistlemaker last edited this post 14 years, 6 months ago.]

54 Posts

pauloneill79 Reply #4, 14 years, 5 months ago

thanks whistlemaker I got it but it wasn't what you said. i fund the answer on an accompanying scroller.js in some commented out notes. It basically went like so...

place button controls in your markup like

<button class="prev">prev</button>
<button class="next">next</button>

Now, all you need to do is call the carousel component on the div element that represents it, and pass in the navigation buttons as options.

$(".carousel").jCarouselLite({
    btnNext: ".next",
      btnPrev: ".prev"
 });

and that was it. Simplier than I thought.