캐 러셀 만 표시 항목 표시

Question

caroufredsel 캐 러셀에서 보이는 항목 만 대상으로하고 보이지 않는 항목을 표시하도록 설정했습니다. 페이지로드 시간을 최소화합니다.

나는 이것에 관한 여러 게시물을 보았지만 아무 것도 발견하지 못했습니다. 나 좀 도와 줄 사람?

주 - 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

난 당신이 뭘 하려는지 생각입니까? 또는 이미지가 너무 많은 공간을 차지하지 않거나로드 시간을 갖지 않습니까? 그것이 있다면, 나는 똑같은 일을 성취하려고 노력하고있다. Lazy Load로 다음 이미지를로드하는 많은 메소드를 찾았습니다.

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

나는이 예제를했지만, 이전 버튼을 누르면이 잘 작동하지 않는 것 같습니다. 그것은 또한 전부 일종의 glitchy입니다. 단 하나의 슬라이더에서도 항상 다음 버튼에서 작동하지 않습니다. 게으른로드가 실패하고 자리 표시 자 이미지가 계속 표시 될 가능성이 1/10 정도입니다. 어쩌면 덜. 그러나 때때로 그것은 때때로 실패합니다. 이전은 거의 항상 실패합니다. 여러 슬라이더에는 동일한 함수의 배수가 변경되거나 다른 이름의 변수가 필요합니다. 또한 단일 슬라이더에서만 작동합니다. 여러 항목을 볼 때 작동하지 않는 것 같습니다. 최대 3 개의 보이는 최소 1 개의 반응 형 사이트가 있으므로 화면 크기에 따라 3에서 2로 1 항목이 변경됩니다. 스크롤이 1 항목으로 설정되어 있으므로 3이 표시되고 한 번에 하나씩 원형으로 스크롤됩니다. 프리로드는 절대로 작동하지 않고, 지연로드 함수의 변수가 이전 값으로 남아 있기 때문에 두 번째 스크롤 클릭에 대한 작업을 시도하고 잘못된 이미지를 가져옵니다.

carouFredSel slideTo/slideToPage events

이 게으른 부하에 올바른 이미지를 올바른 인덱스를 찾기 위해 사용하고 여러 볼을 위해 나를 위해 작동하지 않는 슬라이드 등 당 올바른 이미지 소스를 이용 활성 클래스를 추가하는 시도였다 항목 중 하나.

carouFredSel add class to active slide

나도 작동이되지 않았다. 전반적으로, 아이디어는 항상 게으른로드가 없거나로드 할 때 보이는 항목이 무엇이든 항상 첫 번째 이미지를로드하는 것입니다. 그런 다음 다음 슬라이드와 이전 슬라이드를 포함하거나 페이지가로드 된 직후로드가 지연됩니다.로드가 조금이라도 다르면 다음 슬라이드와 이전 슬라이드를 준비해야합니다.

그런 다음 슬라이더가 다음 슬라이드 나 이전 슬라이드로 슬라이드 할 때마다 javacript (onAfter 또는 CarouFredsel의 이벤트)를 사용하여 새 슬라이드에 맞춰 다음 슬라이드와 이전 슬라이드를 다시로드해야합니다. 나는 이것을 어떻게 할 수 있는지 100 % 확신 할 수는 없지만, 직접 작업하고있다.하지만 보이는 모든 항목 (심지어는 변수가 보이는 항목 (최소 및 최대)의 경우)에 "활성"클래스가 추가되어야하고 JS 활성 클래스가있는 항목의 색인을 검사하고, 색인이 1 개인 항목과 활성 항목이있는 항목을 지연로드하고 색인이 1 인 항목을 활성화한 다음 활성 항목이있는 항목을 지연로드합니다.

답변이있을 때 답장을 보내 겠지만, 오늘이나 내일 읽고 누구나 답변을 얻으려면 회신 해주십시오.또한 samhdir의 원래 질문에서 조정 된 사항을 포함 시키십시오. 첫 번째 슬라이드와 같도록 슬라이더 컨테이너의 높이를 고정하는 것으로 보입니다 (모든 슬라이드를 가장 큰 슬라이드와 동일하게 만드는 스크립트와이 스크립트를 연결하면 좋겠지 만). 나는 또한 이것을 필요로 할 것이다. 내 개발 사이트 : uo-new.unomnia.com과 내 메인 사이트 : unaomnia.com