2016-10-25 5 views
2

Я создал слайдер с логотипом, который похож на шатер. Что я хочу сделать, это добавить стрелки next/prev, которые могут ускорить скорость ползунка, когда щелкните следующую стрелку и отмените слайдер, когда нажимаете стрелку prev. В настоящее время я использую гладкую карусель, чтобы сделать это.Как изменить скорость слайдера с помощью стрелки в кастрюле Slick?

Также я понятия не имею, почему иногда моя карусель останавливается на секунду, а затем продолжает, может ли кто-нибудь помочь мне с этим?

$(document).ready(function($) { 
 
    $('.marquee-logo').slick({ 
 
    autoplay: true, 
 
    infinite: true, 
 
    autoplaySpeed: 0, 
 
    slidesToScroll: 1, 
 
    slidesToShow: 5, 
 
    arrows: false, 
 
    cssEase: 'linear', 
 
    speed: 6500, 
 
    initialSlide: 1, 
 
    draggable: false, 
 
    }); 
 
});
<div class="marquee-logo"> 
 
    <div class="slider-logo"> 
 
    <img src="http://placehold.it/350x150"> 
 
    </div> 
 
    <div class="slider-logo"> 
 
    <img src="http://placehold.it/350x150"> 
 
    </div> 
 
    <div class="slider-logo"> 
 
    <img src="http://placehold.it/350x150"> 
 
    </div> 
 
    <div class="slider-logo"> 
 
    <img src="http://placehold.it/350x150"> 
 
    </div> 
 
    <div class="slider-logo"> 
 
    <img src="http://placehold.it/350x150"> 
 
    </div> 
 
</div>

http://codepen.io/takumi24/pen/JRzEjA

ответ

1

Это может использоваться, чтобы сделать слайдер медленно

$("#slowbutton").click(function(){ 

$('.marquee-logo').slick('unslick'); 

$('.marquee-logo').slick({ 
    autoplay: true, 
    infinite: true, 
    autoplaySpeed: 0, 
    slidesToScroll: 1, 
    slidesToShow: 5, 
    arrows: false, 
    cssEase: 'linear', 
    speed: 10000, 
    initialSlide: 1, 
    draggable: false, 
    });}); 

Это делает для более быстрого

$("#nextbutton").click(function(){ 
    $('.marquee-logo').slick('unslick'); 

$('.marquee-logo').slick({ 
    autoplay: true, 
    infinite: true, 
    autoplaySpeed: 0, 
    slidesToScroll: 1, 
    slidesToShow: 5, 
    arrows: false, 
    cssEase: 'linear', 
    speed: 300, 
    initialSlide: 1, 
    draggable: false, 
    }); 
}); 

http://codepen.io/anon/pen/yawgra

На кнопку мыши сначала уничтожить ползунок и добавить ползунок снова увеличить/уменьшить скорость

Вы также можете попробовать этим $('.marquee-logo').slick('slickSetOption', 'speed', 500,true); с вне разрушив ползунок

Но изменение скорости по методу slickSetOption причины задержка: выпуск https://github.com/kenwheeler/slick/issues/2334

+0

Я еще не пробовал, обновит результат, как только я это сделаю в ближайшее время – Takumi

+0

Это сработало !!!! – Takumi

 Смежные вопросы

  • Нет связанных вопросов^_^