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"
}
]
});
Related
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
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.
When clicking on an image within the Slick Slider all slides are moved forward with high speed. How to get rid of that behaviour?
My JS settings:
$(document).ready(function(){
$('.sh_product_slider2').slick({
slidesToShow: 3,
slidesToScroll: 1,
arrows: true,
dots: true,
centerMode: false,
variableWidth: true,
infinite: true,
focusOnSelect: true,
cssEase: 'linear',
touchMove: false,
prevArrow:'<button class="slick-prev"> < </button>',
nextArrow:'<button class="slick-next"> > </button>',
responsive: [
{
breakpoint: 600,
settings: {
centerMode: false,
variableWidth: true,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2500,
pauseOnHover: false,
pauseOnFocus: false,
arrows:false
}
},
]
});
});
Im not sure but seems work according to your sample
just override the css class
.sh_product_slider2 .slick-slide:after {
position: relative;
}
let me know if not works,
thanks
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/
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 }
]
});
}