Question

我有一个来自http电话的ul列表，它显示图像和一些文字制作某种卡片。

根据屏幕的宽度，我可以显示最多4张这些卡片，但我总是收到更多的卡片，所以假设我有5张卡片

CARD CARD CARD CARD |卡片卡

我还有两个按钮（一个在左边，一个在右边），使ul成为一个滑块。

所以，当我按下左键的时候，最后一个li是从ul的结尾处开始的，然后是第一个

function btnSlideLeft(ulId){
var cards = $('#' + ulId + ' li');
$('#' + ulId).prepend(cards[(cards.length -1)]);}

现在，我需要的是整个列表（所有li项目）顺利向右移动。

我试过添加一些css：

.card-event{ //class of the li items
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;}

$(cards).each(function(){
    $(this).css({
    "-webkit-transform":"translate(" + (cardFinalWidth + 10) + "px)",
    "-ms-transform":"translate(" + (cardFinalWidth + 10) + "px)",
    "transform":"translate(" + (cardFinalWidth + 10) + "px)"
  });
});

我也尝试过使用jquery ui插件

cards[(cards.length -1)].style.display = 'none';

$(cards[(cards.length -1)]).show("slide", { direction: "left" }, 1000);

但是，在最后一个选项中，我唯一得到的是“附加”卡片的转换，但其余的卡片只是从一个位置移动到另一个位置。

总之，我试图让它成为一个真正的滑块，不幸的是，使用像浮油这样的插件不是一种选择。

关于如何实现转换效果的任何想法？

这是HTML

<div id="carousel-pop-events" class="slick-container hidden-xs">
            <ul id="ul-pop-events-slider" class="wrapper wrapper-swiper swiper-wrapper relposition centered" style="width: 2000px;">
            </ul>
          <button class="ul-pop-events-slider slider-button slider-button-left ng-hide" type="button" onclick="btnSlideLeft('ul-pop-events-slider')"><i class="fa fa-angle-left" aria-hidden="true"></i></button>
          <button class="ul-pop-events-slider slider-button slider-button-right ng-hide" type="button" onclick="btnSlideRight('ul-pop-events-slider')"><i class="fa fa-angle-right" aria-hidden="true"></i></button>
        </div>

以及创建li项目的函数

function parseEvents(events, ulSlider){
try{
    $(events).each(function(){

        var data = this;
        var eventId = data["id"];
        if(data["images"].length > 0){
            var images = data["images"];
            $(images).each(function(){
                if(this["pivot"]["prinpal"] == "true"){

                    $('#' + ulSlider).append('<li class="popular-events noStyle card-event" onclick="getEvent(\''+ eventId +'\')"><img src="' + host + this["file_name"] + '"><div class="text-left"><b>Title</b><br>' + data["name"] + '</div></li>');
                }

            });
        }

    });
} catch (err){
    console.log(err);
}

toExecuteAfterJson();}

谢谢！

当使用JQuery在左边添加一个项目时，使其他项目从左到右动画

0 个答案: