How to move the nav and pagination to custom div

[jamesisapayne]

I'm struggling to see how I can move the nav and pagination bits to a custom div using the code supplied with the download. Any time i try to use the following code…

insertNextAction: function () {
        // this is === the '.rs-carousel-action-next' anchor element
        jQuery(this).prependTo('.rs-carousel');
    }

It breaks everything - probably because I don't know a) where to put this code or b) what it's doing. My jQuery function looks like this…

jQuery(document).ready(function() {
        jQuery(".rs-carousel").carousel({
            itemsPerPage: 4, // number of items to show on each page
            itemsPerTransition: 4, // number of items moved with each transition
            orientation: 'horizontal',
            pagination: true,
            nextPrevLinks: true  // whether next and prev links will be included
        });
    });

And my structure looks like this…

<div class="rs-carousel">
    <div class="most-read-pagination"></div>  
    <ul class="rs-carousel-runner">
        <li class="rs-carousel-item">1</li>
        <li class="rs-carousel-item">2</li>
        <li class="rs-carousel-item">3</li>
    </ul>
</div>

<div class="rs-carousel">
    <div class="most-read-pagination"></div>  
    <ul class="rs-carousel-runner">
        <li class="rs-carousel-item">1</li>
        <li class="rs-carousel-item">2</li>
        <li class="rs-carousel-item">3</li>
    </ul>
</div>

As I'm using multiple carousels on the same page, I need a solution that will move all of the nav/pagination bits to their respective div's - not all in the same one if that makes sense?

Thanks,

James

[richardscarrott]

You need to pass those functions into the options on init like this:

$('.rs-carousel').carousel({
    insertNextAction: function () {
        // this === <div class="rs-carousel"></div> (the root element)
        return $('<a href="#">Next</a>').appendTo($(this).find('.most-read-pagination'));
    },
    insertPrevAction: function () {
        // this === <div class="rs-carousel"></div> (the root element)
        return $('<a href="#">Next</a>').appendTo($(this).find('.most-read-pagination'));
    },
    insertPagination: function (pagination) {
        // this === <div class="rs-carousel"></div (the root element)
        return $(pagination).appendTo($(this).find('.most-read-pagination'));
    }
});

The above will append all the controls into the .most-read-pagination div for each instance.

You can see the default options here which is probably a good base to work from:

$('.rs-carousel').carousel({
        itemsPerPage: 'auto',
        itemsPerTransition: 'auto',
        orientation: 'horizontal',
        loop: false,
        nextPrevActions: true,
        insertPrevAction: function () {
            return $('<a href="#" class="rs-carousel-action-prev">Prev</a>').appendTo(this);
        },
        insertNextAction: function () {
            return $('<a href="#" class="rs-carousel-action-next">Next</a>').appendTo(this);
        },
        pagination: true,
        insertPagination: function (pagination) {
            return $(pagination).insertAfter($(this).find('.rs-carousel-mask'));
        },
        speed: 'normal',
        easing: 'swing',

        // callbacks
        create: null,
        before: null,
        after: null
});