滑動滑塊 - 同步自動播放和主動導航

我想使用光滑的滑塊來創建滑塊，該滑塊允許用戶選擇節的標題並查看幻燈片，但也可以選擇讓它自動播放。滑動滑塊 - 同步自動播放和主動導航

東西工作正常。但我需要一些方法來對應，使其在自動播放時與相應的活動導航對應，並將其更改爲彩色。

現在它只顯示活動幻燈片標題的新顏色，如果用戶點擊它。我希望它在自動播放上也這樣做

我該怎麼做？

這是現在我已經工作的代碼

我唯一改變的是不上漂亮的滑塊的演示存在即自動播放選項

$('.slider-for').slick({ 
slidesToShow: 1, 
slidesToScroll: 1, 
arrows: false, 
fade: true, 
asNavFor: '.slider-nav', 
autoplay:true 

    }); 
$('.slider-nav').slick({ 
slidesToShow: 3, 
slidesToScroll: 1, 
asNavFor: '.slider-for', 
dots: true, 
centerMode: true, 
focusOnSelect: true 
});

來源

2014-12-02 new_frontenddev

http://jsfiddle.net/bpbaz10L/

$('.slider-for').slick({ 
    slidesToShow: 1, 
    slidesToScroll: 1, 
    arrows: false, 
    fade: true,   
    autoplay:true, 
    //trigger after the slide appears 
    // i is current slide index 
    onAfterChange:function(slickSlider,i){ 
     //remove all active class 
     $('.slider-nav .slick-slide').removeClass('slick-active'); 
     //set active class for current slide 
     $('.slider-nav .slick-slide').eq(i).addClass('slick-active');   
    } 

}); 


//set active class to first slide 
$('.slider-nav .slick-slide').eq(0).addClass('slick-active');

來源

2014-12-03 01:43:57 dm4web

這真是棒極了..謝謝。如果你有時間，你能否解釋我和角色的作用。？只是這樣我才能學會如何在將來有效地使用它 – 2014-12-03 16:43:45

onAfterChange返回i - 當前幻燈片的索引。對於eq看到這個[鏈接]（http://api.jquery.com/eq/）。「_將匹配元素的集合縮減爲指定索引_處的元素。」當他找到當前的索引時，我們可以知道導航中的幻燈片應該被設置爲活動 – dm4web 2014-12-03 17:02:35

對於任何碰到這個問題的人+瘋狂地搜索解決方案+想知道爲什麼'onAfterChange'不工作：請參閱https：/ /github.com/kenwheeler/slick#events onAfterChange回調現在已被棄用，以支持'afterChange'事件。 – simmer 2015-06-22 06:09:58

dm4web answe如果您顯示導航滑塊中的所有幻燈片，則r是完美的。如果您具有隱藏更多幻燈片（比如你有12張幻燈片，但只有8個在你的資產淨值一次顯示），你可以，如果你使用的是油滑滑蓋版做類似的事情，比如

$('.slider-nav').on('afterChange', function(){ 

    $('.slider-nav .slick-slide').removeClass('current'); 
    $('.slider-nav .slick-active:first').addClass('current'); 
}); 

//set active class to first slide 
$('.slider-nav .slick-active:first').addClass('current');

來源

2015-04-27 23:11:51 mlaroy

：1.5。 5 您需要在on（）之後調用。

// function event,slick and index 
 
// version 1.5+ uses slick-current stead of slick-active 
 
$('.slider-for').on('afterChange', function(event,slick,i){ 
 
    $('.slider-nav .slick-slide').removeClass('slick-current'); 
 
    $('.slider-nav .slick-slide').eq(i).addClass('slick-current');  \t \t \t \t 
 
}); 
 

 
// remember document ready on this 
 
$('.slider-nav .slick-slide').eq(0).addClass('slick-current'); \t

來源

2015-07-30 21:47:40 colOchimba

function _Slider(){ 
     $('#hm-slider ul').slick({ 
      dots: false, 
      infinite: true, 
      arrows:false, 
      autoplay: true, 
      autoplaySpeed: 5000, 
      fade: true, 
      slidesToShow: 1, 
      slidesToScroll: 1, 
      asNavFor: '#slider-dots', 
     }); 
     $('#slider-dots').slick({ 
      slidesToShow: 5, 
      slidesToScroll: 1, 
      asNavFor: '#hm-slider ul', 
      dots: false, 
      centerMode: false, 
      focusOnSelect: true, 
      variableWidth: true, 
      centerMode: true, 
      useCSS:true 
     }); 

     //set active class to first slide 
     $('#slider-dots .slick-slide').removeClass('slick-active'); 
     $('#slider-dots .slick-slide').eq(0).addClass('slick-active'); 
     $('#hm-slider ul').on({ 
      beforeChange: function(event, slick, current_slide_index, next_slide_index) { 
       //remove all active class 
       $('#slider-dots .slick-slide').removeClass('slick-active'); 
       //set active class for current slide 
       $('#slider-dots .slick-slide[data-slick-index='+next_slide_index+']').addClass('slick-active'); 
      } 
     }); 

    }

來源

2015-10-15 14:19:17

滑動滑塊 - 同步自動播放和主動導航

回答

相關問題