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个滑块，它也不会一直处理下一个按钮。 1/10几率使懒惰加载失败并且占位符图像仍然显示。可能更少。但有时它仍会失败。以前几乎总是失败。多个滑块需要使用不同命名的变量更改函数或同一函数的倍数。此外，仅适用于单个滑块。当多个项目可见时，我发现它不起作用。我有一个响应式网站，最多3个可见，最小1个可见，因此根据屏幕大小，它从3变为2到1项。我有滚动设置为1项，所以3是可见的，它一次滚动，循环，1。预加载永远不会起作用，而是尝试在第二次滚动单击时工作，并抓取错误的图像，因为延迟加载函数的变量仍然是旧值。

carouFredSel slideTo/slideToPage events

这是尝试添加活动类来用于查找正确的索引以延迟加载正确的图像并获得每张幻灯片的正确图像源等。它对我来说也不适用于多个可见项目。< / p>

carouFredSel add class to active slide

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

然后，每次滑块滑动到下一张或上一张幻灯片时，您需要使用javascript（在CarouFredsel的onAfter或onBefore事件期间）再次延迟加载下一张和上一张幻灯片，分别对应新的当前幻灯片。我不是100％确定如何做到这一点，并且我自己正在努力，但很可能＆＃34;活跃＆＃34; class应该添加到所有可见项（即使在变量可见项（最小和最大）的情况下），然后JS应该用于检查具有活动类的项的索引，并延迟加载具有1个更高索引的项最后一项具有活动，并且延迟加载具有1个较低索引的项目，然后加载具有活动的第一个项目。

当我得到答复时，我会回复，但如果今天或明天有人要阅读此内容并获得答案，请让我们进来。还请务必提供samhdir原创版本的高度调整题。它似乎将滑块容器的高度固定为等于第一张幻灯片（希望他还将其与使所有幻灯片等同于最高幻灯片的脚本相结合）。我也需要这个。我的开发网站：uo-new.unaomnia.com和我的主要网站：unaomnia.com

轮播仅显示可见项目

1 个答案: