0
I’m using Slick Carousel in my project. It’s working though, my project requires that slides have different times.
I’m not getting it and I also don’t know if you have that option. Someone, please?
Follows 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>
<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="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>
Where set the slide time?
– Sam
See if this can help
– Pedro Pinto
@Dvdsamm the time I am bringing a variable time of an ajax requisicao. the client makes the image registration including the time he wants. I just didn’t touch, that slider = $('.commercial'). Slick is called only once, so even if I raise the value of the variable time, it will not change the Carousel time :(
– Willian Tártaro
@Pedropinto I will investigate and try to implement! Grateful!
– Willian Tártaro
I think that this link is +- what is in the search,found from of this other question
– alexqoliveira