I am trying to create a simple slider with jQuery.
$('.next').on('click', function() {
$('li').animate({'right': '400px'}, 300);
});
$('.back').on('click', function() {
$('li').animate({'left': 0}, 300);
});
The problem is when I click on the bottom with the class next, it only slides once and the second click doesn't work.
How can I fix this?
https://jsfiddle.net/6t1wx95f/
Simple, with $('li').animate({'left': '-=400px'}, 300); for next.
$('.next').on('click', function() {
$('li').animate({'left': '-=400px'}, 300);
});
$('.back').on('click', function() {
if(parseInt($('li').css('left')) <= 0){
if(parseInt($('li').css('left')) >= -400){
$('li').animate({'left': "0"}, 300);
} else {
$('li').animate({'left': '+=400px'}, 300);
}
}
});
.slider {
overflow: hidden;
width: 500%;
}
.slider ul {
width: 500%;
}
.slider ul li {
float: left;
list-style: none;
position: relative;
transition: all 0.65s;
}
.next,
.back {
width: 100px;
padding: 5px;
text-align: center;
background-color: skyblue;
float: left;
margin: 10px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
<ul>
<li>
<img src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="" class="active">
</li>
<li>
<img src="https://www.w3schools.com/css/img_lights.jpg" alt="">
</li>
<li>
<img src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image2.jpg" alt="">
</li>
<li>
<img src="http://images.all-free-download.com/images/graphiclarge/a_london_cityscape_515129.jpg" alt="">
</li>
<li>
<img src="https://image.jimcdn.com/app/cms/image/transf/dimension=1920x400:format=jpg/path/s86d6d6c688ca86fa/image/ie4265a3cd27b2997/version/1451246087/image.jpg" alt="">
</li>
</ul>
</div>
<div class="back">Back</div>
<div class="next">Next</div>
Your code just adds a single left: and right: style to the element. It doesn't remove/reset these values so it only ever does anything n first click:
$('.next').on('click', function() {
$('li').animate({'right': '400px'}, 300);
});
$('.back').on('click', function() {
$('li').animate({'left': 0}, 300);
});
What you need to do is only animate either the left or the right (by using positive and negative values), not both, e.g.
$('.next').on('click', function() {
$('li').animate({'right': '400px'}, 300);
});
$('.back').on('click', function() {
$('li').animate({'right': 0}, 300);
});
Of course this won't make the thing work entirely (you'll need to increment/decrement the amount you're moving by if you want to animate each slide) but hopefully it points you in the right direction.
Related
I have a hover function that shows text on hover over certain links and it works fine. However, I am trying to execute this function only if the body does not have the class user-is-touching. Is this possible at all and if so how do I go about it?
$(".o-c").hover(function() {
$('.home-o-c').show();
$('.home-i-t').hide();
}, function() {
$('.home-o-c').hide();
$('.home-i-t').show();
});
$(".c-f").hover(function() {
$('.home-c-f').show();
$('.home-i-t').hide();
}, function() {
$('.home-c-f').hide();
$('.home-i-t').show();
});
$(".i-c").hover(function() {
$('.home-i-c').show();
$('.home-i-t').hide();
}, function() {
$('.home-i-c').hide();
$('.home-i-t').show();
});
$(".c-u").hover(function() {
$('.home-c-u').show();
$('.home-i-t').hide();
}, function() {
$('.home-c-u').hide();
$('.home-i-t').show();
});
window.addEventListener('touchstart', function onFirstTouch() {
// we could use a class
document.body.classList.add('user-is-touching');
// or set some global variable
window.USER_IS_TOUCHING = true;
// or set your app's state however you normally would
// we only need to know once that a human touched the screen, so we can stop listening now
window.removeEventListener('touchstart', onFirstTouch, false);
}, false);
$(".o-c").click(function() {
if ($('body').hasClass('user-is-touching')) {
$('.home-o-c').show();
} else {
$('html, body').animate({
scrollTop: $(".our-company").offset().top
}, 2000);
}
});
$(".c-f").click(function() {
if ($('body').hasClass('user-is-touching')) {
$('.home-c-f').show();
$('.home-o-c').hide();
$('.home-i-c').hide();
$('.home-c-u').hide();
$('.home-i-t').hide();
} else {
$('html, body').animate({
scrollTop: $(".cf2").offset().top
}, 2000);
}
});
.left-fill {
background: #0000006b;
height: 100vh;
}
.right-fill {
background: pink;
height: 100vh;
}
.vc_col-sm-6 {
width: 50%;
float: left;
}
.pivot-nav {
list-style: none;
font-family: 'Montserrat';
text-align: left;
}
.pivot-nav li a {
font-size: 1.6rem;
font-weight: 700;
text-transform: uppercase;
display: inline-block;
position: relative;
color: #fff;
text-decoration: none;
line-height: 40px;
}
.pivot-nav li a.default-underline::after,
.pivot-nav li a:hover::after {
width: 100%;
}
.pivot-nav:hover a.default-underline:not(:hover)::after {
width: 0;
}
.pivot-nav li a::after {
bottom: 0;
content: "";
display: block;
height: 4px;
position: absolute;
background: #fff;
transition: width 0.3s ease 0s;
width: 0;
}
.home-o-c,
.home-c-f,
.home-i-c,
.home-c-u {
display: none;
}
.our-company {
clear: both;
display: block;
height: 50vh;
}
.cf2 {
clear: both;
display: block;
height: 50vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
<div class="left-fill text-left wpb_column vc_column_container vc_col-sm-6">
<div class="wpb_wrapper">
<p class="home-i-t">TEXT One</p>
<p class="home-o-c">TEXT One</p>
<p class="home-c-f">TExt for C f.</p>
<p class="home-i-c">Some more text fo i c.</p>
<p class="home-c-u">Get in touch </p>
</div>
</div>
<div class="home-fill right-fill text-right wpb_column vc_column_container vc_col-sm-6">
<div class="wpb_wrapper">
<ul class="pivot-nav">
<li class="pivot-nav-item"><a class="o-c default-underline" href="#" data-toggle="my-scrollspy-2">O C</a></li>
<li class="pivot-nav-item"><a class="c-f" href="#" data-toggle="my-scrollspy-2">C F</a></li>
<li class="pivot-nav-item"><a class="i-c" href="#" data-toggle="my-scrollspy-2">I C</a></li>
<li class="pivot-nav-item" data-toggle="my-scrollspy-2"><a class="c-u" href="#">C U</a></li>
</ul>
</div>
</div>
<div class="our-company">
Our Company Scroll Down
</div>
<div class="cf2">
cf2 Scroll Down
</div>
</body>
You can unbind events when you are adding user-is-touching class to body.
example
$(".c-f").unbind('mouseenter').unbind('mouseleave')
OR
$(".c-f").off('mouseenter').off('mouseleave')
Update
Refer this snippet
// Replace this event listener with your hover listeners
window.addEventListener('touchstart', function onFirstTouch() {
// we could use a class
document.body.classList.add('user-is-touching');
// or set some global variable
window.USER_IS_TOUCHING = true;
// or set your app's state however you normally would
// Remove mouse-related events here
$(".o-c, .c-f, .i-c, .c-u").unbind('mouseenter').unbind('mouseleave')
// we only need to know once that a human touched the screen, so we can stop listening now
window.removeEventListener('touchstart', onFirstTouch, false);
}, false);
You need to update your html code to have data-attr property update code below
<li class="pivot-nav-item"><a data-attr="o-c" class="o-c default-underline" href="#"
data-toggle="my-scrollspy-2">O C</a></li>
<li class="pivot-nav-item"><a data-attr="c-f" class="c-f" href="#" data-toggle="my-scrollspy-2">C F</a></li>
<li class="pivot-nav-item"><a data-attr="i-c" class="i-c" href="#" data-toggle="my-scrollspy-2">I C</a></li>
<li class="pivot-nav-item" data-toggle="my-scrollspy-2"><a data-attr="c-u" class="c-u" href="#">C U</a></li>
You can use more complex selectors
$('body:not(.user-is-touching) .c-u')
Or you could add "IF" statement inside handlers
etc:
if(!$('body').hasClass('user-is-touching')) { /* do stuff */ }
I have an issue with my product images. I have 2 images stacked and when hovering it fades out the top one and shows the bottom. This works good, but I discovered a small issue. If you repeatedly move your mouse over like 20 times, the animation will continue to happen, until all cycles are complete. How do I stop it to only do it once?
jQuery(function($) {
$('.product a.product-image .primary-img').hover(function() {
$(this).fadeTo(300, 0);
}, function() {
$(this).fadeTo(300, 1);
});
});
.product a.product-image {
position: relative;
display: block;
}
.product a.product-image .primary-img {
position: relative;
z-index: 10;
}
.product a.product-image .secondary-img {
position: absolute;
left: 0;
top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product">
<a class="product-image" href="#">
<img class="primary-img" src="http://d17ol771963kd3.cloudfront.net/148828/ma/r8-xsWDWKCM.jpg" alt="">
<img class="secondary-img" src="http://d17ol771963kd3.cloudfront.net/148821/ma/f2xjw32B2U4.jpg" alt="">
</a>
</div>
Try this:
jQuery(function($) {
$('.product a.product-image .primary-img').hover(function() {
$(this).stop(true).fadeTo(300,0);
}, function() {
$(this).fadeTo(300,1);
});
});
The true is a flag used to clear the queue.
.stop( [clearQueue ] [, jumpToEnd ] )
https://api.jquery.com/stop/
Just use CSS to toggle the imgs opacity on hover
.product a.product-image {
position: relative;
display: inline-block;
}
a.product-image:hover .primary-img {
opacity:0;
}
a.product-image:hover .secondary-img {
opacity:1;
}
a.product-image .secondary-img {
position: absolute;
left: 0; top: 0;
opacity:0;
}
.primary-img, .secondary-img{
transition:opacity 300ms;
}
<div class="product">
<a class="product-image" href="#">
<img class="primary-img" src="http://d17ol771963kd3.cloudfront.net/148828/ma/r8-xsWDWKCM.jpg" alt="">
<img class="secondary-img" src="http://d17ol771963kd3.cloudfront.net/148821/ma/f2xjw32B2U4.jpg" alt="">
</a>
</div>
I am trying to achieve an effect of looping through images if a div is hovered or not.
If mouseenter div then cycle through images
if mouseleave div then stop cycling through images and remove all images (only background image will be visible).
currently I am using a setTimeout to fire itself recursively but I am having trouble with jquery on detecting if the mouse is hovering or left the object.
function logoImageLoop() {
$(".one-box .social_gallery .social_img:first").show().next(".social_img").hide().end().appendTo(".one-box .social_gallery");
};
var oneBoxIsHover = false;
$(".one-box").mouseenter(function(){
timeout();
function timeout() {
setTimeout(function(){
logoImageLoop();
timeout();
}, 100);
};
});
Here is a codepen for reference: http://codepen.io/H0BB5/pen/xEpqbv
A similar effect I am trying to achieve can be seen when hovering the cargo logo on this website: http://cargocollective.com/
You just need to clear the timer on mouseleave.
var timer = null;
$(".one-box").mouseenter(function(){
timeout();
function timeout() {
timer = setTimeout(function(){
logoImageLoop();
timeout();
}, 100);
};
}).mouseleave(function(){
clearTimeout(timer);
});
Here's a codepen: http://codepen.io/anon/pen/rrpwYJ
I would use an interval, and the JQuery .hover() functionality. Simply replacing your $(".one-box").mouseenter() with this will run the loop while you're hovered and remove it once your mouse leaves the area.
The important bit:
var imageChangeInterval;
$(".one-box").hover(function() {
imageChangeInterval = setInterval(function() {
logoImageLoop();
}, 100);
}, function() {
clearInterval(imageChangeInterval);
});
Full example:
function logoImageLoop() {
$(".one-box .social_gallery .social_img:first").show().next(".social_img").hide().end().appendTo(".one-box .social_gallery");
};
var oneBoxIsHover = false;
// New code:
var imageChangeInterval;
$(".one-box").hover(function() {
imageChangeInterval = setInterval(function() {
logoImageLoop();
}, 100);
}, function() {
clearInterval(imageChangeInterval);
});
.one-box {
position: relative;
height: 300px;
width: 300px;
}
.one-box a {
width: 100%;
}
.one-box a img {
max-width: 100%;
}
/* .social_img { display: none; } */
a#social_logo {
background-image: url(https://s3-us-west-2.amazonaws.com/staging-site-assets/one-method/instagram-logo.png);
background-repeat: no-repeat;
background-position: 0 0;
display: block;
position: absolute;
width: 73px;
height: 73px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 99;
}
.one_box .social_gallery {
position: absolute;
left: 0;
top: 0;
opacity: 1;
display: none;
}
.nav_logo .social_gallery .social_img {
position: absolute;
float: none;
margin: 0;
opacity: 1;
filter: alpha(opacity=100);
overflow: hidden;
top: 0;
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one-box nav_logo">
<a id="social_logo" href="#" alt=""></a>
<div class="social_gallery img_wall gallery">
<div class="social_img wall_img">
<a class="social_link" href="#">
<img src="https://placeholdit.imgix.net/~text?txtsize=28&bg=222&txt=300%C3%97300&w=300&h=300" />
</a>
</div>
<div class="social_img">
<a class="social_link" href="#">
<img src="https://placeholdit.imgix.net/~text?txtsize=28&bg=fb2&txt=300%C3%97300&w=300&h=300" />
</a>
</div>
<div class="social_img">
<a class="social_link" href="#">
<img src="https://placeholdit.imgix.net/~text?txtsize=28&bg=777&txt=300%C3%97300&w=300&h=300" />
</a>
</div>
<div class="social_img">
<a class="social_link" href="#">
<img src="https://placeholdit.imgix.net/~text?txtsize=28&bg=fb2&txt=300%C3%97300&w=300&h=300" />
</a>
</div>
</div>
<div>
i am new learner of jquery and javaScript.
i want to create a slider with a big image section and a section of thumbs.
slider should slide automatically i have coded so far is working on click or hover but i dont know how to set it on auto please help me how to modify my code. code and slider screen shoot is given below.
slider image
$("document").ready(function()
{
$("#thumbs a").mouseenter(function()
{
var smallimgpath = $(this).attr("href");
$("#bigimage img").fadeOut(function()
{
$("#bigimage img").attr("src",smallimgpath);
$("#bigimage img").fadeIn();
});
return false;
});
});
</script>
#imagereplacement{
border: 1px solid red;
width:98%;
height:400px;
margin:auto;
padding-top:8px;
padding-left:10px;
}
#imagereplacement p{
text-align:inline;
}
#bigimage{
/* border: 1px solid green; */
margin:auto;
text-align:center;
float: left;
}
#thumbs{
/*border: 1px solid yellow;*/
margin: 110px 10px;
text-align:center;
width:29%;
float: right;
}
#thumbs img{
height:100px;
width:100px;
}
//This is where all the JQuery code will go
</head>
<body>
<div id="imagereplacement">
<p id="bigimage">
<img src="images/slider1.jpg">
</p>
<p id="thumbs">
<img src="images/slider1.jpg">
<img src="images/slider2.jpg">
<img src="images/slider3.jpg">
</p>
try with this example, please let me know in case of any more question from you :
$("document").ready(function(){
var pages = $('#container li'),
current = 0;
var currentPage, nextPage;
var timeoutID;
var buttonClicked = 0;
var handler1 = function() {
buttonClicked = 1;
$('#container .button').unbind('click');
currentPage = pages.eq(current);
if ($(this).hasClass('prevButton')) {
if (current <= 0)
current = pages.length - 1;
else
current = current - 1;
nextPage = pages.eq(current);
nextPage.css("marginLeft", -604);
nextPage.show();
nextPage.animate({
marginLeft: 0
}, 800, function() {
currentPage.hide();
});
currentPage.animate({
marginLeft: 604
}, 800, function() {
$('#container .button').bind('click', handler1);
});
} else {
if (current >= pages.length - 1)
current = 0;
else
current = current + 1;
nextPage = pages.eq(current);
nextPage.css("marginLeft", 604);
nextPage.show();
nextPage.animate({
marginLeft: 0
}, 800, function() {});
currentPage.animate({
marginLeft: -604
}, 800, function() {
currentPage.hide();
$('#container .button').bind('click', handler1);
});
}
}
var handler2 = function() {
if (buttonClicked == 0) {
$('#container .button').unbind('click');
currentPage = pages.eq(current);
if (current >= pages.length - 1)
current = 0;
else
current = current + 1;
nextPage = pages.eq(current);
nextPage.css("marginLeft", 604);
nextPage.show();
nextPage.animate({
marginLeft: 0
}, 800, function() {});
currentPage.animate({
marginLeft: -604
}, 800, function() {
currentPage.hide();
$('#container .button').bind('click', handler1);
});
timeoutID = setTimeout(function() {
handler2();
}, 4000);
}
}
$('#container .button').click(function() {
clearTimeout(timeoutID);
handler1();
});
timeoutID = setTimeout(function() {
handler2();
}, 4000);
});
* {
margin: 0;
padding: 0;
}
#container {
width: 604px;
height: 453px;
position: relative;
}
#container .prevButton {
height: 72px;
width: 68px;
position: absolute;
background: url('http://vietlandsoft.com/images/buttons.png') no-repeat;
top: 50%;
margin-top: -36px;
cursor: pointer;
z-index: 2000;
background-position: left top;
left: 0
}
#container .prevButton:hover {
background-position: left bottom;
left: 0;
}
#container .nextButton {
height: 72px;
width: 68px;
position: absolute;
background: url('http://vietlandsoft.com/images/buttons.png') no-repeat;
top: 50%;
margin-top: -36px;
cursor: pointer;
z-index: 2000;
background-position: right top;
right: 0
}
#container .nextButton:hover {
background-position: right bottom;
right: 0;
}
#container ul {
width: 604px;
height: 453px;
list-style: none outside none;
position: relative;
overflow: hidden;
}
#container li:first-child {
display: list-item;
position: absolute;
}
#container li {
position: absolute;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<center>
<h1>HTML Slideshow AutoPlay (Slide Left/Slide Right)</h1>
<br />
<br />
<div id="container">
<ul>
<li><img src="http://vietlandsoft.com/images/picture1.jpg" width="604" height="453" /></li>
<li><img src="http://vietlandsoft.com/images/picture2.jpg" width="604" height="453" /></li>
<li><img src="http://vietlandsoft.com/images/picture3.jpg" width="604" height="453" /></li>
</ul>
<span class="button prevButton"></span>
<span class="button nextButton"></span>
</div>
</center>
Here an example i've created that create an auto slider CodePen Demo and JSFiddle Demo
I've used an object literal pattern to create slide variable just to avoid creating many global function and variable. Inside document.ready i've initialised my slider just by calling slide.init({....}) this way it makes it easy to reuse and work like plugin.
$.extend(slide.config,option)
this code in simple words override you're default configuration defined in config key
as i mentioned in my above comment make a function slider() and place seTimeout(slide,1000) at bottom of your function before closing
Here in this code its done in animate key of slide object it is passed with two parameter cnt and all image array, If cnt is greater then image array length then cnt is set to 0 i.e if at first when cnt keeps on increment i fadeout all image so when i make it 0 the next time the fadeToggle acts as switch
if On then Off
if Off the On
and calling function slider after a delay makes it a recursive call its just one way for continuously looping there are many other ways i guess for looping continuous you can try
well i haven't check if all images Loaded or not which is most important in slider well that you could try on your own.
var slide = {
'config': {
'container': $('#slideX'),
'delay': 3000,
'fade': 'fast',
'easing': 'linear'
},
init: function(option) {
$.extend(slide.config, option);
var imag = slide.getImages();
slide.animate(0, imag);
},
animate: function(cnt, imag) {
if (cnt >= imag.length) {
cnt = 0;
}
imag.eq(cnt).fadeToggle(slide.config.fade, slide.config.easing);
setTimeout(function() {
slide.animate(++cnt, imag);
}, slide.config.delay);
},
getImages: function() {
return slide.config.container.find('img');
}
};
$(document).ready(function() {
slide.init({
'contianer': $('#slideX'),
'delay': 3000,
'fade': 'fast',
'easing': 'swing'
});
})
body {
margin: 0;
padding: 0;
}
.contianer {
width: 100%;
height: 100%;
position: relative;
}
.container > div,
.container > div >img {
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" id="slideX">
<div id="img1">
<img src="http://imgs.abduzeedo.com/files/articles/magical-animal-photography-gregory-colbert/5.jpg" />
</div>
<div id="img2">
<img src="http://cdn-5.webdesignmash.com/trial/wp-content/uploads/2010/10/great-dog-photography-016.jpg" />
</div>
<div id="img3">
<img src="http://onlybackground.com/wp-content/uploads/2014/01/marble-beautiful-photography-1920x1200.jpg" />
</div>
</div>
I'm adapting this vertical slider for an pessoal project, but when i click into up or down arrow this works but without any animation. I wanted it to happen a up or down glide smooth depending on the clicked button. This the adapted JS:
// JavaScript Document
$(function() {
$("section#canais").hover(function() {
$("section#buttonsubir").fadeIn();
$("section#buttondescer").fadeIn();
}, function(){
$("section#buttonsubir").fadeOut();
$("section#buttondescer").fadeOut();
});
$(".cnext").click(function(e) {
e.preventDefault();
$("section#canais ul").css({'height' : ''}).animate({top:275}, function(){
$("#canais ul li").last().after($("#canais ul li").first());
$(this).css({'down':'0', 'height':'auto'});
});
});
$(".cprev").click(function(e) {
e.preventDefault();
$("#canais ul li").first().before($("#canais ul li").last().css({'top':-275}) );
$("section#canais ul").css({'height':''}).animate({top:275}, function(){
$("#canais ul li").first().css({'margin-left':'0'});
$(this).css({'left':'0', 'height':'auto'});
});
});
});
Here's my JsFiddle. Thanks.
You need to change a few things - first you need the ul to be positioned absolutely:
#left-content #canais-links {
position:absolute;
}
Then you need to fix your jQuery (the animation should be 36px as that is the height of your lis: in your css)
$(".cnext").click(function (e) {
e.preventDefault();
$("section#canais ul").css({
'height': ''
}).animate({
top: 36 + "px"
}, function () {
$("#canais ul li").last().insertBefore($("#canais ul li").first());
$(this).css({
'top': 0
});
});
});
$(".cprev").click(function (e) {
e.preventDefault();
$("section#canais ul").css({
'height': ''
}).animate({
top: -36 + "px"
}, function () {
$("#canais ul li").first().insertAfter($("#canais ul li").last());
$(this).css({
'top': 0
});
});
});
Example
You may want to wrap your ul in a div with a set height and overflow hidden so you can't see the divs once it goes up / down
Updated Fiddle
Another option...which would allow you to display all five items at once would be to use clone() and then remove the hidden element after the animation was completed. An example is here: http://jsfiddle.net/jme11/5Y54k/
I like the approach from Pete a lot but some benefits of this approach is that it uses css for showing and hiding the up and down arrows, reducing your jQuery code and because it's not dependent on positioning, it winds up making your markup and css smaller as well.
HTML:
<div id="left-content">
<div id="img-canais"></div>
UP
<ul id="canais-links">
<li>
Page 1
</li>
<li>
Page 2
</li>
<li>
Page 3
</li>
<li>
Page 4
</li>
<li>
Page 5
</li>
</ul>
DOWN
</div>
CSS:
#left-content {
width: 203px;
}
.direction {
opacity: 0;
transition:opacity .25s linear;
text-align: center;
display: block;
width: 203px;
}
#left-content:hover .direction {
opacity: 1;
}
#canais-links {
list-style: none;
margin: 0 0 25px 0;
padding: 0;
height: 300px;
display:block;
overflow:hidden;
}
#canais-links li {
height: 36px;
width: 100%;
background-color: #253B6B;
display: block;
margin-top: 25px;
}
#canais-links li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 25px;
font-weight: bold;
color: #FFF;
text-decoration: none;
display: block;
height: 36px;
text-align: center;
}
jQuery:
$('.cprev').click(function () {
$('#canais-links li:first-child').clone().insertAfter('#canais-links li:last-child');
$('li:first-child').slideUp('slow', function(){
$('li:first-child').remove();
});
});
$('.cnext').click(function () {
var copieditem = $('#canais-links li:last-child').clone()
copieditem.insertBefore('#canais-links li:first-child').hide();
$('li:first-child').slideDown('slow', function(){
$('li:last-child').remove();
});
});