If you assign your dates of the games in a PHP or JavaScript variable, then you can compare them to the current date and place that variable in the "initialSlide" call.
Example below is based on day of the week, but the concept is still the same. I have a client who has specials at their bar 6 days a week Monday - Saturday. So with the script below, it will make the current day of the week "center".
You could also do this matching the date instead of the day of the week.
jQuery(document).ready(function(){
var d = new Date();
var day = d.getDay();
var slide;
if (day == 1) {
slide = 0;
}else if (day == 2) {
slide = 1;
}else if (day == 3) {
slide = 2;
}else if (day == 4) {
slide = 3;
}else if (day == 5) {
slide = 4;
}else if (day == 6) {
slide = 5;
}else{
slide = 0;
}
$('.specials').slick({
centerMode: true,
centerPadding: '40px',
adaptiveHeight: true,
slidesToShow: 3,
initialSlide: slide,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});
});
Here is an example using PHP.
<?php
//Get current Date/Time
date_default_timezone_set('America/Los_Angeles');
$date = new DateTime();
// Set day variable global for initial slide
global $day;
//$date->format('l') - this gets the "Day" of the week by name.
// if current day of the week matches either set days of the week, then match that slide as the initialSlide.
if ($date->format('l') == "Monday"){
$day = "0";//slide 0
}else if ($date->format('l') == "Tuesday"){
$day = "1";//slide 1
}else if ($date->format('l') == "Wednesday"){
$day = "2";//slide 2
}else if ($date->format('l') == "Thursday"){
$day = "3";//slide 3
}else if ($date->format('l') == "Friday"){
$day = "4";//slide 4
}else if ($date->format('l') == "Saturday"){
$day = "5";//slide 5
}else{
$day = "0";//slide 0
}
?>
jQuery(document).ready(function(){
$('.specials').slick({
centerMode: true,
centerPadding: '40px',
adaptiveHeight: true,
slidesToShow: 3,
initialSlide: <?php echo $day; ?>,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});
});