I'm using Slick Carousel in my project. It's working, though, so my project requires the slides to have different tempos.
I'm not getting it and I do not know if you have that option either. Someone, please?
Follow the code below:
<header>
<div class="mx-topo">
<p>
MX-DIVULGAÇÃO-TOPO
</p>
</div>
</header>
</div>
</div>
</div>
<footer>
<div class="mx-rodape"><p>
MX-DIVULGAÇÃO-RODAPÉ
</p></div>
</footer>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script><scripttype="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script><scripttype="text/javascript" src="slick/slick.min.js"></script>
<script>
var tempo = 0;
var slider;
$.ajax(
{
url: 'http://localhost:8080/marketdigital/wss',
type: 'POST',
headers: {
dataType: 'json',
'Content-Type': 'application/json; charset=utf-8'
},
data: JSON.stringify({action: 'midia', token: 'ERWQJNJKRK8432978423'}),
timeout: 3000,
dataType: "json",
async: false,
success: function (o) {
console.log(o.data);
for(var i in o.data){
console.log("chegou");
var item = o.data[i];
var part;
console.log(item.tipo);
if(item.tipo == "VIDEO"){
part = "<video width='100%' video autoplay><source src='"+item.url+"' type='video/mp4'/></video>";
tempo = 0;
} else {
part = "<img src='"+item.url+"' style='width:100%;'/>";
tempo = item.tempo*1000;
}
$('.comercial').append('<div class="citem" >'+part+'</div>');
}
console.log('sucess');
console.log(o);
},
error: function (e) {
console.log('error');
console.log(data);
}
}
);
$(document).ready(function(){
slider = $('.comercial').slick({
autoplay: true,
arrows: false,
fade: true,
speed: tempo,
adaptiveHeight: true,
infinite: true,
cssEase: 'linear'
});
$('.comercial').on('afterChange', function(event, slick, slide ) {
var video = $($('.citem')[slide]).find('video');
if(video.length > 0){
$('.comercial').slick('slickPause');
console.log(video[0]);
video[0].play();
}
});
$('video').on('ended', function() {
$('.comercial').slick('slickPlay');
});
});
</script>