Question

我制作了一个最小的旋转木马，当有3个或更多幻灯片时似乎工作正常，但是一旦我移除了一些幻灯片，事情就会开始破碎。我注意到的一些事情是：

删除＆＃39; next＆＃39;
这将使我的div闪烁
它会完全打破动画

我研究了第一张幻灯片中处理def product_stock_list(request, subcategory_id=None): subcategory = None subcategories = Subcategory.objects.all().order_by('family', 'name') products = Product.objects.filter(available=True).exclude(subcategory=1) if subcategory_id: subcategory = get_object_or_404(Subcategory, id=subcategory_id) products = products.filter(subcategory=subcategory) if request.GET: try: ean13 = request.GET.get('ean13') ean13 = ean13.upper() p = products.get(ean13=ean13) return redirect(reverse('products:detail', kwargs=({'id': p.id, 'slug': p.slug}))) except: products = None return render( request, 'products/stock_list.html', { 'subcategory': subcategory, 'subcategories': subcategories, 'products': products, } )的一些可能的解决方案，然后.clone()处理容器的末尾，这使得它有点工作，但它通常只会进行1次旋转然后被卡在slide2上。

这是我处理点击上一个/下一个按钮的逻辑

.append()

这是我处理自动动画的逻辑

var before_clone = $(elm + ':first').clone();
var after_clone = $(elm + ':last').clone();
$('#buttons a').click(function(e) {
    //slide the item
    if (container.is(':animated')) {
        return false;
    }
    if (e.target.id == previous) {
        container.stop().animate({
            'left': 0
        }, 1500, function() {
            //container.find(elm + ':first').before(container.find(elm + ':last'));
            container.append(after_clone);
            container.find(elm + ':last');
            resetSlides();
        });
    }
    if (e.target.id == next) {
        container.stop().animate({
            'left': item_width * -1
        }, 1500, function() {
            //container.find(elm + ':last').after(container.find(elm + ':first'));
            container.append(before_clone);
            container.find(elm + ':first');
            resetSlides();
        });
    }
    //cancel the link behavior            
    return false;
});

以下是帮助诊断问题的两个小提琴

my current attempt

my original code(make sure to remove/comment out 2 of the lis)

感谢您提供解决此问题的任何帮助！谢谢！

Answer 1

看看this小提琴。

我将您的next更改为以下内容：

  if (e.target.id == next) {
    container.find(elm + ':last').after(container.find(elm + ':first'));
    container.css({
      'left': 0
    });
    container.stop().animate({
      'left': item_width * -1
    }, 1500, function () {
      resetSlides();
    });
  }

当有3个或更多幻灯片时，轮播可以工作，但只有2个幻灯片时轮播会被破坏

1 个答案: