Develop Reference

I am trying to Horizontal timeline chart using slick plugin with the dates implemented in it

Issue:
I am trying to implement the horizontal timeline -Slick [https://codepen.io/perikan/pen/vjwXyg] but I got only one dot.
It is not meeting the functionality of implementation.
Goal:
As we click on the timeline dots the photos have to be moved in accordance with it.
Tried Code:
These are the following code I have tried.
<script type="text/javascript">
function slider_config() {
$('.slideshow').slick({
dots: true,
customPaging: function(slick,index) {
// Array conversion from the doc element
var dateList = [...document.querySelectorAll('.photo-date-info')].map(x => x.textContent);
return '<a>' + dateList[index] + '</a>';
},
infinite: false,
speed: 500,
fade: true,
cssEase: 'linear',
});
$(".loading-bar").slick({
centerMode: true,
// centerPadding: "80px",
dots: false,
infinite: false,
speed: 300,
slidesToShow: 6,
slidesToScroll: 3,
focusOnSelect: true,
asNavFor: ".labels"
});
$(".labels").slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
draggable: false,
asNavFor: ".loading-bar"
});
$('.slideshow').slickLightbox({
src: 'src',
itemSelector: 'img',
caption: 'caption',
slick: {infinite:false}
});
}
div += "></i><a href='"+photo+"' download><i class='fas fa-download' style ='float: right;padding-top: 7px;color: black;'></i></a><img style='object-fit: contain;height:400px' src='"+photo+"' data-caption='As on : "+photo_date+"'><h4>As on : <span class=\"photo-date-info\">" + photo_date + "</span></h4><h5>"+p_desc+"</h5></center><span class=\"loading-bar loading-bar-bullet\"></span></div>";
//The same CSS code as in code pen

How to rearrange Slider Elements in mobile with Jquery?

I want to rearrange my slider in mobile version.I want slider start not with first but with thirt elemenet of slider.i wrote startSlide function on position 2 but still doesnt work plase help guys .
jQuery('.js-a1-wlan-slider').slick({
// normal options...
infinite: false,
slidesToShow: 1,
centerMode: true,
centerPadding: "26px",
focusOnSelect: false,
arrows: true,
prevArrow: '<a class="a1-wlan-slider-boxes-prev deactive"></a>',
nextArrow: '<a class="a1-wlan-slider-boxes-next"></a>',
initialSlide : 2,
dots: true,
mobileFirst: true,
responsive: [
{
breakpoint: 1023,
settings: "unslick"
}
]
});

Change js variable value from php

I have team-member-slick.js file.
I it has below code ( full code ) :
$(document).ready(function(){
$('.vertical-center-4').slick({
centerMode: false,
slidesToShow: 2,
infinite: true,
rtl: (document.dir === 'rtl'),
slidesToScroll: 2,
//speed: 300,
autoplay: true,
autoplaySpeed: 3000,
variableWidth: false,
arrows: false,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
infinite: true,
dots: false,
arrows: false,
variableWidth: false,
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
arrows: false
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
arrows: false
}
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
});
});
as below an example code, I must change showing number value with php from a php file:
$('.multiple-items').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
all slidesToShow: 3, numbers must be depend a php variable because I will write a control panel this number.
So, how can I access js number variable from php file?
I will change the number with php saving ( after save button clicking ) then, the variable will load from server after re-load the customer page to change slide showing item number.

The width of react-slick slide does not change when I resize the browser

I create a testimonial slide by react-slick.
My code is:
const settings = {
dots: true,
adaptiveHeight: true,
swipeToSlide: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
autoPlay: true,
className: 'sample'
};
Everything works fine. However, when I resize my browser, the width of slide does not change. I check in my console.log, the width of slick-track is always 9900px. I think the width should be changed when I resize my browser.
Could anyone help me to solve this? I think I have a problem with re-render element when resizing browser in reactjs :(.
Thanks

If your goal is to change react-slick options when you resize the browser, use responsive option.
var settings = {
dots: true,
infinite: false,
speed: 500,
slidesToShow: 4,
slidesToScroll: 4,
initialSlide: 0,
responsive: [
{
breakpoint: 1024, // width to change options
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
initialSlide: 2
}
}
]
}
https://react-slick.neostack.com/docs/example/responsive/

slick.js How to make it visible for carousel thumbnail videos without hiding in mobile device

I can able to show 3 thumbnail carousel videos in desktop but I wanted to show all video thumbnails only in mobile device (I mean to show all carousel thumbnail videos), please help me out.
videoCarousel: function() {
$(".slider-for").slick({
slidesToShow: 1,
slidesToScroll: 1,
infinite: false,
initialSlide: 0,
arrows: false,
fade: !0,
asNavFor: ".slider-nav"
});
$(".slider-nav").slick({
slidesToShow: 3,
infinite: false,
slidesToScroll: 1,
swipeToSlide: true,
asNavFor: ".slider-for",
vertical: true,
arrows: false,
dots: false,
centerMode: false,
swipeToSlide: true,
focusOnSelect: true,
draggable: false,
responsive: [
{ breakpoint: 767 }
]
});
}