Unslider карусель «анимация:" замирание»

Question

Я пытаюсь сделать карусель с http://unslider.com как это:

$('.carousel').unslider({ 
    autoplay: true, 
    speed: 750, 
    delay: 3000, 
    nav: false, 
    infinite: true, 
    arrows: { 
    prev: '<div class="prev-btn"></div>', 
    next: '<div class="next-btn"></div>' 
    } 
}) 

Всех слайды стали невидимы, когда я добавил опцию animation: 'fade'. Я не могу понять, почему.

http://codepen.io/tjeu-kayim/pen/EgYYXN

Answer 1

Я нашел ответ сам:

Добавьте CSS .unslider-fade {height: 100%} и слайды Виль показать.

Answer 2

К сожалению, ответ на эту проблему относительно этой даты заключается в том, чтобы установить высоту для контейнера без льда. The GitHub repo нестандартного проекта имеет много вопросов относительно этой проблемы, но все ответы «добавьте ширину и высоту в контейнер».

Я думаю, что лучший селектор css для использования будет .unslider-fade, и я предлагаю вам добавить свой собственный класс в слайдер, чтобы он выглядел примерно как .unslider-fade.your-class{height:###px;}; таким образом, вы будете влиять только на слайдер с постепенным исчезновением на вашем веб-сайте, если у вас есть какой-либо другой слайдер, работающий с горизонтальной или вертикальной анимацией (или изображениями с другой высотой).

Answer 3

Измените яваскрипт немного:

$('.carousel').unslider({ 
    autoplay: true, 
    speed: 0, //change this line(previously 750) 
    delay: 3000, 
    nav: false, 
    infinite: true, 
    arrows: { 
    prev: '<div class="prev-btn"></div>', 
    next: '<div class="next-btn"></div>' 
} 
}) 

И добавьте в CSS:

.carousel ul li { 
    opacity: 0; 
    -webkit-transition: opacity .75s; // if you want 750ms 
    transition: opacity .75s; // if you want 750ms 
} 

.carousel ul li.unslider-active { 
    opacity: 1; 
} 

И вот, теперь у вас есть эффект "замирание". Наслаждайтесь!