I have tried everything and I cannot for the life of me figuree out why my next and previous navigations are not working with this. Any help would really be appreciated, my head hurts from banging it on my desk!!
Issue is on this page http://relymedia.com.s209914.gridserver.com/?page_id=273
<script type="text/javascript">
var $ =jQuery.noConflict();
$(function() {
$('#carousel').carouFredSel({
prev: '#msprev',
next: '#msnext',
scroll: 1000
});
});
</script>html, #c-carousel {
height: 100%;
padding: 0;
margin: 0;
}
#c-carousel {
min-height: 200px;
}
#c-carousel * {
font-family: Arial, Geneva, SunSans-Regular, sans-serif;
font-size: 14px;
color: #333;
line-height: 22px;
}
#c-carousel h3 {
font-size: 20px;
margin: 30px 0 10px 0;
}
#c-carousel a:hover {
color: #000;
}
#wrapper {
width: 910px;
height: 55%;
min-height: 200px;
margin: 0 auto;
}
#inner {
width: 910px;
height: 230px;
margin-top: 15px;
position: relative;
overflow: hidden;
}
#carousel div {
border: 1px solid #999;
background: #fff;
width: 140px;
height: 200px;
float: left;
padding: 10px;
margin: 0 5px;
border-radius: 8px;
}
#carousel img {
min-height: 118px;
}
#carousel h6 {
text-align: center;
border-top: 1px solid #D9DBDE;
}
#pager {
text-align: center;
margin-top: 20px;
color: #666;
}
#pager a {
color: #666;
text-decoration: none;
display: inline-block;
padding: 5px 10px;
}
#pager a:hover {
color: #333;
}
#pager a.selected {
background-color: #333;
color: #ccc;
}
#msprev, #msnext {
display: block;
width: 50px;
height: 80px;
margin-top: -40px;
position: absolute;
top: 50%;
z-index: 2;
}
#msprev {
background: url('images/ui-prev.png') no-repeat;
left: 50%;
margin-left: -520px;
}
#msnext {
background: url('images/ui-next.png') no-repeat;
right: 50%;
margin-right: -520px;
}<div id="c-carousel">
<div id="wrapper">
<div id="inner">
<div class="caroufredsel_wrapper" style="display: block; text-align: start; float: none; position: relative; top: auto; right: auto; bottom: auto; left: auto; z-index: auto; width: 900px; height: 200px; margin: 0px; overflow: hidden;"><div id="carousel" style="text-align: left; float: none; position: absolute; top: 0px; right: auto; bottom: auto; left: 0px; margin: 0px; width: 7200px; height: 200px; z-index: auto;">
<div class="usb" id="usb">
<a href="http://relymedia.com.s209914.gridserver.com/?page_id=237" rel="bookmark" title="Jeweled"><img width="150" height="124" src="http://relymedia.com.s209914.gridserver.com/wp-content/uploads/2015/09/RMJ01-150x124.jpg" class="attachment-medium wp-post-image" alt="RMJ01"><br>
<h6>Jeweled</h6>
</a>
</div><div class="usb" id="usb">
<a href="http://relymedia.com.s209914.gridserver.com/?page_id=240" rel="bookmark" title="MP3 Players"><img width="150" height="144" src="http://relymedia.com.s209914.gridserver.com/wp-content/uploads/2015/09/RMMP21-150x144.jpg" class="attachment-medium wp-post-image" alt="RMMP21"><br>
<h6>MP3 Players</h6>
</a>
</div><div class="usb" id="usb">
<a href="http://relymedia.com.s209914.gridserver.com/?page_id=243" rel="bookmark" title="MP4 Players"><img width="150" height="120" src="http://relymedia.com.s209914.gridserver.com/wp-content/uploads/2015/09/RMME05-150x120.jpg" class="attachment-medium wp-post-image" alt="RMME05"><br>
<h6>MP4 Players</h6>
</a>
</div><div class="usb" id="usb">
<a href="http://relymedia.com.s209914.gridserver.com/?page_id=246" rel="bookmark" title="1.8 Inch"><img width="150" height="127" src="http://relymedia.com.s209914.gridserver.com/wp-content/uploads/2015/09/RMMN07-150x127.jpg" class="attachment-medium wp-post-image" alt="RMMN07"><br>
<h6>1.8 Inch</h6>
</a>
</div><div class="usb" id="usb">
<a href="http://relymedia.com.s209914.gridserver.com/?page_id=249" rel="bookmark" title="2.0 Inch"><img width="150" height="150" src="http://relymedia.com.s209914.gridserver.com/wp-content/uploads/2015/09/RMMV03-150x150.jpg" class="attachment-medium wp-post-image" alt="RMMV03"><br>
<h6>2.0 Inch</h6>
</a>
</div><div class="usb" id="usb">
<a href="http://relymedia.com.s209914.gridserver.com/?page_id=252" rel="bookmark" title="2.4 Inch"><img width="150" height="135" src="http://relymedia.com.s209914.gridserver.com/wp-content/uploads/2015/09/RMME07-150x135.jpg" class="attachment-medium wp-post-image" alt="RMME07"><br>
<h6>2.4 Inch</h6>
</a>
</div><div class="usb" id="usb">
<a href="http://relymedia.com.s209914.gridserver.com/?page_id=255" rel="bookmark" title="2.8 Inch"><img width="150" height="150" src="http://relymedia.com.s209914.gridserver.com/wp-content/uploads/2015/09/RMMW09-150x150.jpg" class="attachment-medium wp-post-image" alt="RMMW09"><br>
<h6>2.8 Inch</h6>
</a>
</div><div class="usb" id="usb">
<a href="http://relymedia.com.s209914.gridserver.com/?page_id=258" rel="bookmark" title="Packaging"><img width="150" height="150" src="http://relymedia.com.s209914.gridserver.com/wp-content/uploads/2015/09/RMPK18-150x150.jpg" class="attachment-medium wp-post-image" alt="RMPK18"><br>
<h6>Packaging</h6>
</a>
</div><div class="usb" id="usb">
<a href="http://relymedia.com.s209914.gridserver.com/?page_id=261" rel="bookmark" title="Accessories"><img width="150" height="150" src="http://relymedia.com.s209914.gridserver.com/wp-content/uploads/2015/09/RMA01-150x150.jpg" class="attachment-medium wp-post-image" alt="RMA01"><br>
<h6>Accessories</h6>
</a>
</div><div class="usb" id="usb">
<a href="http://relymedia.com.s209914.gridserver.com/?page_id=193" rel="bookmark" title="Classic Square Corners"><img width="150" height="124" src="http://relymedia.com.s209914.gridserver.com/wp-content/uploads/2015/09/RMC23-150x124.jpg" class="attachment-medium wp-post-image" alt="RMC23"><br>
<h6>Classic Square Corners</h6>
</a>
</div><div class="usb" id="usb">
<a href="http://relymedia.com.s209914.gridserver.com/?page_id=195" rel="bookmark" title="Classic Round Corners"><img width="150" height="105" src="http://relymedia.com.s209914.gridserver.com/wp-content/uploads/2015/09/RMC08-150x105.jpg" class="attachment-medium wp-post-image" alt="RMC08"><br>
<h6>Classic Round Corners</h6>
</a>
</div><div class="usb" id="usb">
<a href="http://relymedia.com.s209914.gridserver.com/?page_id=198" rel="bookmark" title="Aluminum Case"><img width="150" height="150" src="http://relymedia.com.s209914.gridserver.com/wp-content/uploads/2015/09/RMC16-150x150.jpg" class="attachment-medium wp-post-image" alt="RMC16"><br>
<h6>Aluminum Case</h6>
</a>
</div><div class="usb" id="usb">
<a href="http://relymedia.com.s209914.gridserver.com/?page_id=204" rel="bookmark" title="Special Designs"><img width="150" height="150" src="http://relymedia.com.s209914.gridserver.com/wp-content/uploads/2015/09/RMD04-150x150.jpg" class="attachment-medium wp-post-image" alt="RMD04"><br>
<h6>Special Designs</h6>
</a>
</div><div class="usb" id="usb">
<a href="http://relymedia.com.s209914.gridserver.com/?page_id=207" rel="bookmark" title="Pens"><img width="150" height="150" src="http://relymedia.com.s209914.gridserver.com/wp-content/uploads/2015/09/RMP02-150x150.jpg" class="attachment-medium wp-post-image" alt="RMP02"><br>
<h6>Pens</h6>
</a>
</div><div class="usb" id="usb">
<a href="http://relymedia.com.s209914.gridserver.com/?page_id=210" rel="bookmark" title="Bullet Series"><img width="150" height="118" src="http://relymedia.com.s209914.gridserver.com/wp-content/uploads/2015/09/RMC09-150x118.jpg" class="attachment-medium wp-post-image" alt="RMC09"><br>
<h6>Bullet Series</h6>
</a>
</div><div class="usb" id="usb">
<a href="http://relymedia.com.s209914.gridserver.com/?page_id=213" rel="bookmark" title="Rubber"><img width="150" height="146" src="http://relymedia.com.s209914.gridserver.com/wp-content/uploads/2015/09/RMC48-150x146.jpg" class="attachment-medium wp-post-image" alt="RMC48"><br>
<h6>Rubber</h6>
</a>
</div><div class="usb" id="usb">
<a href="http://relymedia.com.s209914.gridserver.com/?page_id=216" rel="bookmark" title="Metal"><img width="150" height="135" src="http://relymedia.com.s209914.gridserver.com/wp-content/uploads/2015/09/RMM07-150x135.jpg" class="attachment-medium wp-post-image" alt="RMM07"><br>
<h6>Metal</h6>
</a>
</div><div class="usb" id="usb">
<a href="http://relymedia.com.s209914.gridserver.com/?page_id=222" rel="bookmark" title="Leather"><img width="150" height="113" src="http://relymedia.com.s209914.gridserver.com/wp-content/uploads/2015/09/RML02-150x113.jpg" class="attachment-medium wp-post-image" alt="RML02"><br>
<h6>Leather</h6>
</a>
</div><div class="usb" id="usb">
<a href="http://relymedia.com.s209914.gridserver.com/?page_id=225" rel="bookmark" title="Card"><img width="150" height="110" src="http://relymedia.com.s209914.gridserver.com/wp-content/uploads/2015/09/RMF03-150x110.jpg" class="attachment-medium wp-post-image" alt="RMF03"><br>
<h6>Card</h6>
</a>
</div><div class="usb" id="usb">
<a href="http://relymedia.com.s209914.gridserver.com/?page_id=231" rel="bookmark" title="Slim"><img width="150" height="150" src="http://relymedia.com.s209914.gridserver.com/wp-content/uploads/2015/09/RMC82-150x150.jpg" class="attachment-medium wp-post-image" alt="RMC82"><br>
<h6>Slim</h6>
</a>
</div><div class="usb" id="usb">
<a href="http://relymedia.com.s209914.gridserver.com/?page_id=234" rel="bookmark" title="Fingerprint"><img width="150" height="112" src="http://relymedia.com.s209914.gridserver.com/wp-content/uploads/2015/09/RMFP04-150x112.jpg" class="attachment-medium wp-post-image" alt="RMFP04"><br>
<h6>Fingerprint</h6>
</a>
</div></div></div>
<a id="msprev" class="msprev" href="#" style="display: block;"></a>
<a id="msnext" class="msnext" href="#" style="display: block;"></a>
</div>
</div>
</div>
I found the carousel works well on your website, I guess your problem is carouFredSel dosen't work when scroll duration set to 1000?
In your html codes which you pasted here, I found no div with id "#carousel", you need to create one like
<div id ="carousel">and the content of it should be the images you want to show in carousel.I tried and it works well as below: http://jsfiddle.net/ra1j3cee/