[英]How can I make this jQuery carousel scroll right instead of left?
I'm trying to make an image carousel/slider that automatically scrolls smoothly and loops using jQuery. 我正在尝试制作一个图像轮播/滑块,该图像可以自动平滑滚动并使用jQuery循环。 Here's the function I'm using:
这是我正在使用的功能:
function spinCarousel() {
$("ul li:first-child").animate({ marginLeft: -200 }, 3000, 'linear', function () {
$("ul li:first-child").appendTo('ul');
$("ul li:last-child").css('margin-Left', 0);
spinCarousel();
});
}
And here's an illustration: https://jsfiddle.net/T_Recks/aa43n7g0/ 这是一个例子: https : //jsfiddle.net/T_Recks/aa43n7g0/
I tried adding it to a local development site (replacing the text and colored backgrounds with images) and it seems to work nicely. 我尝试将其添加到本地开发站点(将文本和彩色背景替换为图像),并且看起来效果很好。 However, I'd like to make a version that scrolls right instead of left, but haven't been able to figure it out.
但是,我想制作一个向右滚动而不是向左滚动的版本,但是还没有弄清楚。 I've tried changing ".append" to ".prepend" and playing with the margin changes, but no luck so far.
我尝试将“ .append”更改为“ .prepend”,并进行边距更改,但到目前为止还没有运气。
Any suggestions? 有什么建议么?
I forked and retooled your JSFiddle to make it scroll from left to right. 我分叉并重新整理了您的JSFiddle,使其从左向右滚动。 Check it out here: https://jsfiddle.net/1jw8xpqe/
在这里查看: https : //jsfiddle.net/1jw8xpqe/
Had to change a few things to get it working. 必须进行一些更改才能使其正常运行。 First, the list is parsed to reverse the order of the slides and shift a couple of them so the leftmost one is "Item #1" when the slider initializes:
首先,解析列表以反转幻灯片的顺序并移动几张幻灯片,以便在滑块初始化时最左边的是“ Item#1”:
// reverse items
var list = $('ul');
var listItems = list.children('li');
list.append(listItems.get().reverse());
// rearrange last two items so first slide starts on left
list.prepend($('ul li:last-child').prev('li').andSelf());
Then a few CSS/JS tweaks: The slide animates the first li
from -200px
(defined in the CSS) to 0
, and after each cycle, prepends the last item of the ul
to the start at -200px
. 然后进行一些CSS / JS调整:幻灯片将第一个
li
从-200px
(在CSS中定义)动画-200px
0
,然后在每个循环之后,将ul
的最后一项添加到-200px
。 Hope this helps! 希望这可以帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.