Question

我有一个网站，我在其中显示一些用户＆＃39;图片。图片具有方形和固定大小（100x100像素）。如果没有足够的空间在一行中显示所有用户的图片，我想创建一个旋转木马。如果我调整浏览器的窗口大小，我希望激活/停用此轮播。

我不知道是否可以轻松实现，如果bootstrap的旋转木马是最佳选择！

提前感谢任何建议！

Answer 1

这是你想要达到的目标吗？

Large

var smalls = new List<Small>
{
    new Small{Name = "Aa", Id = 1, Value = "v1"},
    new Small{Name = "Bb", Id = 1, Value = "v2"},
    new Small{Name = "Cc", Id = 1, Value = "v3"},
    new Small{Name = "Dd", Id = 1, Value = "v4"},
    new Small{Name = "Ee", Id = 1, Value = "v5"},
    new Small{Name = "Ff", Id = 1, Value = "v6"},
    new Small{Name = "Gg", Id = 1, Value = "v7"}
};

var bigs =
    smalls
        .GroupBy(x => x.Id)
        .Select(g => CreateLargeFromSmalls(g.Key, g))
        .ToList();

var isCarouselPaused = false;

$( window ).on( 'load resize', function() {
  if ( document.documentElement.clientWidth >= 768 ) {
    if ( !isCarouselPaused ) {
      $( '#myCarousel' ).carousel('pause');
      isCarouselPaused = true;
    }
  } else {
    if ( isCarouselPaused ) {
      $( '#myCarousel' ).carousel('cycle');
      isCarouselPaused = false;
    }
  };
});

Bootstrap轮播和响应性

1 个答案: