How to set timers differently for each pictures in the slider? - php

Question

I am implementing a page on which when page loads, the slideshow starts. The pictures for that slideshows are coming form back-end(database). Each picture has its own timer as there are some pictures with the content while some with only heading or logos. At present, I have the same time interval set to each pictures, but now I want to set the time intervals according to their values in database.
here is the code that I have for now with the same time interval:
index.php
<section class='images'>
<? foreach($model->slides as $slide){ ?>
<div class='image'>
<img class='image' src="<?= $slide->image ?.'/pictures/'.$slides->image : '' ?>">
</div>
<? } ?>
</section>
<script type="text/javascript">
$(document).ready(function(){
$('.images').slick({
slidesToShow: 1,
autoplay: true,
autoplaySpeed: 10000,
});
});
</script>
In indexController.php(Controller)
public function index(Array $params = []){
$this->view->slides = \Model\Slide_Picture::getList(['orderBy'=>"image_order asc"]);
$this->loadView($this->view);
}
My table 'slide_images' consist of 3 fields: image, image_order and timer.
As mentioned earlier, this code helps me to get the image slideshow with the time interval of 10s, but now I want to set it different for each images. Say for example, there are 3 images in the database, Picture 1 has a timer value 30s, picture 2 has that of 10s, and picture 3 has value of 40s. So is this possible? If yes, how can I achieve it. Thanks in advance. Appreciate the help.

Answer 1

You would need to add your timing to the database for each image, then once you do that you can return the timing value, and use it in a data attribute. (seems you have done that timer)
Then utilise the afterChange event to get the value and then dynamically change the autoplaySpeed speed.
Below is an example, you would need to integrate it.
$(document).ready(function() {
var images = $('.images');
images.slick({
slidesToShow: 1,
autoplay: true,
autoplaySpeed: 1000,
}).on("afterChange", function(e, slick) {
var slideTime = $('div[data-slick-index="' + slick.currentSlide + '"]').data("timer");
images.slick("setOption", "autoplaySpeed", slideTime);
});
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" />
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<section class='images'>
<div class='image' data-timer="2000">
<img class='image' src="http://via.placeholder.com/350x150">
</div>
<div class='image' data-timer="100">
<img class='image' src="http://via.placeholder.com/350x150">
</div>
<div class='image' data-timer="1000">
<img class='image' src="http://via.placeholder.com/350x150">
</div>
<div class='image' data-timer="3000">
<img class='image' src="http://via.placeholder.com/350x150">
</div>
<div class='image' data-timer="1000">
<img class='image' src="http://via.placeholder.com/350x150">
</div>
</section>
Run the snippet to see it in action.
So your loop would look something like:
<section class="images">
<?php foreach ($model->slides as $slide): ?>
<div class="image"<?= !empty($slide->timer) ? ' data-timer="'.$slide->timer.'"' : null ?>>
<img class="image" src="<?= $slide->image ? '/pictures/'.$slides->image : null ?>">
</div>
<?php endforeach ?>
</section>