Как я могу сделать эту карусель jQuery правой, а не левой?

Question

Я пытаюсь сделать карусель изображений/слайдер, который автоматически прокручивает плавно, а циклы - с помощью jQuery. Вот функция, я использую:

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(); 
    }); 
} 

И вот пример: https://jsfiddle.net/T_Recks/aa43n7g0/

Я пытался добавить его в локальный сайт развития (заменив текст и цветные фоны с изображениями), и это, кажется, работает хорошо , Тем не менее, я хотел бы сделать версию, которая прокручивается вправо, а не налево, но не смог понять это. Я пытался изменить «.append» на «.prepend» и играть с изменениями полей, но пока не повезло.

Любые предложения?

Answer 1

Я разветвил и переустановил ваш JSFiddle, чтобы он прокручивал слева направо. Проверьте это здесь: https://jsfiddle.net/1jw8xpqe/

Пришлось изменить несколько вещей, чтобы заставить его работать. Во-первых, список анализируется, чтобы изменить порядок слайдов и переложить пару из них, так что крайний левый один «Пункт # 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()); 

Затем несколько CSS/JS твики: слайд анимирует первый li от -200px (определенный в CSS) до 0 и после каждого цикла добавляет последний элемент ul к началу на -200px. Надеюсь это поможет!