карусель отображать только видимые предметы

Я хотел бы настроить только видимые элементы в карусели 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();
   });  
});