Search code examples
javascriptjquerycaroufredsel

carouFredSel slider - prev,next and pagination not working

I am using the carouFredSel jquery plugin for a website I'm making. I'm having some issues with the "prev", "next" and "pagination" containers. The images show up and start sliding but I cant navigate (prev/next) and I cant see the pagination itself..

You can see the page here: http://goo.gl/pJLNN

The slider is on the top. Caroufredsel is initialized in bbody.js upon DOM ready. Does anyone have any ideas?

Solution

  • In order to correct the images positions you need to add or change the absolute position of every image container.

    Since the type of animation you chosen is Crossfade then all the images must be in top of each other to make it work, otherwise by default the are next to each other.

    So in the css put this:

    #rotate > div {
float: left;
display: block;
width: 100%;
height: 650px;
position: absolute;
left: 0;
}

    To correct next and prev you need to make a small fix to the js, this is the correct way of calleing the buttons

    prev: {
       button  : "#msprev"
},
next: {
       button  : "#msnext"
},

    The same happens to pagination, correct it:

    pagination: {
    container: '#pager'
}