转盘仅显示可见项目

Question

我想只针对caroufredsel转盘中的可见项目，并将不可见项目设置为显示：none；以最小化页面加载时间。

我已经看到了几个关于这方面的帖子，但没有发现任何有效的东西。有人能帮我吗？

注意-我在Drupal中实现，所以我使用jQuery代替$。

HTML:

<div class="homepageHeroCarousel"><!-- class of slide for animation -->
  <div class="carousel-inner">
    <ul>
      <li>
        <div class="item">
          <img class="img-responsive" src="sites/all/themes/visit_mendocino/assets/images/hero01.jpg" width="2000" height="900" alt="" />
          <div class="container">
            <div class="caption">
              <h2><a href="#">Scenic Drive on Highway 1</a></h2>
              <p>Getting here is only part<br/>of the experience.</p>
              <a href="#" class="btn btn-primary" tabindex="7">Learn More</a>
            </div>
          </div><!-- end caption -->
        </div>
      </li>
      <li>
        <div class="item">
          <img class="img-responsive" src="sites/all/themes/visit_mendocino/assets/images/hero02.jpg" width="2000" height="900" alt="" />
          <div class="container">
            <div class="caption">
              <h2><a href="#">Fern Canyon Waterfall</a></h2>
              <p>Meander through lush ground and connect with the sounds of the forest.</p>
              <a href="#" class="btn btn-primary" tabindex="8">Learn More</a>
            </div>
          </div><!-- end caption -->
        </div>
      </li>
    </ul>
  </div>
  <a class="prev" id="home_prev" href="#"><i class="fa fa-angle-left fa-3x">&#8203;</i></a>
  <a class="next" id="home_next" href="#"><i class="fa fa-angle-right fa-3x">&#8203;</i></a>
  <!-- <div class="controls"></div> -->
</div>

jQuery:

jQuery(window).load(function(){
  var carousel = jQuery(".homepageHeroCarousel .carousel-inner ul");
  carousel.carouFredSel({
    circular: true,
    infinite: false,
    responsive: true,
    items: {
      visible: 1,
      minimum: 1,
      width: 1170
    },
    scroll: {
      fx: "scroll",
      easing: "linear",
      duration: 1000,
      onAfter: function() {
        var vis = jQuery(".homepageHeroCarousel .carousel-inner ul").triggerHandler("currentVisible");       //get all visible items
        jQuery(".homepageHeroCarousel .carousel-inner ul").children().removeClass("active");                 // remove all .active classes
        vis.filter(":eq(1)").addClass("active");
      }
    },
    auto: false,
    prev : "#home_prev",
    next : "#home_next",
    //pagination: ".homepageHeroCarousel  .controls",
    onCreate: function () {
      jQuery(window).on('resize', function () {
        carousel.parent().add(carousel).height(carousel.children().first().height());
      }).trigger('resize');
      var vis = jQuery(".homepageHeroCarousel .carousel-inner ul").triggerHandler("currentVisible");       //get all visible items
      jQuery(".homepageHeroCarousel .carousel-inner ul").children().removeClass("active");                 // remove all .active classes
      vis.filter(":eq(1)").addClass("active");
    }
  });
});
jQuery(document).ready(function() {  
     jQuery(".homepageHeroCarousel .carousel-inner ul").swiperight(function() {  
        jQuery('#home_prev').click();  
        });  
     jQuery(".homepageHeroCarousel .carousel-inner ul").swipeleft(function() {  
        jQuery('#home_next').click();
   });  
});

Answer 1

我想你想做的是懒惰加载图像，对吗？或者图像没有占用那么多空间或加载时间？如果是这样的话，我正在努力完成同样的事情。我找到了很多方法来懒惰地加载下一个图像。

http://coolcarousels.frebsite.nl/c/14/

我试过这个例子，但如果你按下上一个按钮，它似乎不太好用。它也只是有点小故障。即使只有一个滑块，它也不会一直作用于下一个按钮。1/10的机会或大约使得惰性加载失败并且占位符图像仍然显示。也许更少。但有时还是会失败。以前几乎总是失败。多个滑块需要对函数进行更改，或者使用不同名称的变量对同一函数进行多次更改。此外，仅适用于单个滑块。当多个项目可见时，我发现它不起作用。我有一个响应网站，最大3个可见，最小1个可见，所以根据屏幕大小，它从3到2再到1个项目。我把滚动设置为1个项目，所以3个是可见的，它滚动，圆形，一次1个。预加载从不起作用，相反，它试图在第二次滚动点击时起作用，并抓取错误的图像，因为惰性加载函数的变量仍然是旧值。

carouFredSel幻灯片To/slideToPage事件

这是一次尝试添加活动类以查找正确的索引，从而延迟加载正确的图像并为每张幻灯片获取正确的图像源等。对于多个可见项目，这也不适用。

carouFredSel将类添加到活动幻灯片

我也没能做到这一点。总的来说，我认为这个想法是始终实际加载第一个图像，而不是延迟加载，或者加载时应该有任何可见的项目。然后，您也可以包括下一张和上一张幻灯片，或者在页面加载后不久延迟加载它们，这几乎没有什么区别——无论哪种方式，加载下一张还是上一张都需要做好准备。

然后，每次滑块滑动到下一张或上一张幻灯片时，您都需要使用javascript（在CarouFredsel的onAfter或onBefore事件期间）再次延迟加载下一张和前一张幻灯片，分别加载到新的当前幻灯片。我不100%确定如何做到这一点，我自己也在努力，但很可能应该将"活动"类添加到所有可见项中（即使是可变可见项（最小和最大）），然后应该使用JS来检查具有活动类的项的索引，并懒惰地加载索引比具有活动的最后一个项高1的项，并且延迟加载索引比活动的第一个项目低1的项目。

当我有答案时，我会回信，但如果有人今天或明天读到这篇文章并得到答案，请让我们进来。此外，请确保包括对samhdir原始问题的正确调整。它似乎将滑块容器的高度固定为等于第一张幻灯片（希望他也将其与一个脚本相结合，使所有幻灯片都等于最高的幻灯片）。我也需要这个。我的开发站点：uo-new.unaomnia.com和我的主站点：unaomnia.com