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:

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

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?

• javascript
• jquery
• caroufredsel

Share Improve this question Follow edited Jun 11, 2013 at 13:18 Pete 58.5k2929 gold badges130130 silver badges184184 bronze badges asked Jun 11, 2013 at 12:50 DreamWaveDreamWave 1,94033 gold badges2828 silver badges6363 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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'
}

For anyone else facing this issue, another reason for the prev, next & pagination links not working is that the element IDs may have been duplicated somewhere else on your page. I had

prev: {
       button  : "#prev3"
},
next: {
       button  : "#next3"
},

There two elements with id="prev3 on the page. Same for id="next3". Once I changed the IDs to make them unique, the navigation started working correctly.