I am using angular.js and making use of the slick carousel. I have about 9 items in the carousel, and have only slightly modified the styles (mainly moving the prev/next buttons around), and I am getting what looks like 4-5 blank slides
Here is my slick config
(coffeescript)
$scope.firstSlickConfig = {
arrows: true
slidesToShow: 5
rows: 1
draggable: false
slidesToScroll: 1
infinite: true
dots: false
variableWidth: true
responsive: [
{
breakpoint: 1450
settings:
slidesToShow: 1
infinite: true
slidesToScroll: 1
slidesPerRow: 1
}
{
breakpoint: 960
settings:
enabled: true
draggable: true
slidesToShow: 3
slidesToScroll: 1
rows: 1
infinite: true
arrows: true
}
{
breakpoint: 786
settings:
enabled: true
draggable: true
slidesToShow: 2
slidesToScroll: 1
rows: 1
infinite: true
arrows: true
}
{
breakpoint: 415
settings:
enabled: true
draggable: true
slidesToShow: 2
slidesToScroll: 1
rows: 1
infinite: true
arrows: true
mobileFirst: true
}
]
}
does anyone know how I can get rid of these 'ghost' slides?
I had similar issues when I was working with the Slick slider not long ago and it can take a bit of fiddling around to get right.
If you have both
infinite: true
variableWidth: true
you may also want to add
centerMode: true
slidesToShow: 1
Which can help the slider recycle. Because you've got "Slides to show = 5" it will keep going to the end till 5 slides are showing. But if some of the slides are different widths AND you have it set as infinite the recycling can be an issue from my experience. Otherwise try turning Infinite off.
I found slick's angular docs (https://github.com/devmark/angular-slick-carousel) and saw an event function I can tie into. I have 9 placeholder elements, so I just put
event:
afterChange: (event, slick, currentSlide, nextSlide) ->
if currentSlide == 8
slick.slickGoTo(1)
return
definitely dirty and wish it handled this better, but it works for now.
Related
I have created a slick slider navigation that has an offset of one slide so that it does not repeat the same image as the main slider.
When I click the next arrow on the main slider it does not change the navigations active slide to the next available slide. However, it changes the active slide on the main slider. The navigations slide will only then change on the second click.
JavaScript for the navigation and main slider
jQuery('.slick-slider.vans-gallery').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
fade: true,
lightbox: true,
asNavFor: '.vans-gallery-nav'
});
jQuery('.slick-slider.vans-gallery-nav').slick({
slidesToShow: 2,
slidesToScroll: 1,
asNavFor: '.vans-gallery',
dots: false,
arrows: false,
vertical: true,
centerMode: false,
initialSlide: 1,
focusOnSelect: true,
});
Page that the slider has been implemented on
https://snapstaging.co.uk/coolkitnew/vans/maxus-edeliver9-l3h2-lwb-fwd-fully-electric-18-freezer-van-88-55kwh-battery-90kw-motor-ulez-caz-zez-charge-exempt-single-charge-point-connection/
Please would someone be able to advise how I can make the navigations slider move to the next slide on the first click. Thanks in advance.
I think the problem is, that the main image has a data-slick-index="0", but the first visible image in the nav has a data-slick-index="1". Therefor you should show the same image in the nav (which has the same data-slick-index) - maybe it can be done with initialSlide: 0 for the jQuery('.slick-slider.vans-gallery-nav').slick(...)};
jQuery('.slick-slider.vans-gallery-nav').slick({
slidesToShow: 2,
slidesToScroll: 1,
asNavFor: '.vans-gallery',
dots: false,
arrows: false,
vertical: true,
centerMode: false,
initialSlide: 0, //set this to 0
focusOnSelect: true,
});
I used slick slider on my React project, i have breakpoints, if on 480 screens infinity loop is true selected clone element, i want my first element in slider started not clone. Who i can it ?
var settings = {
dots: false,
infinite: false,
initialSlide: 0,
speed: 300,
slidesToShow: 4,
slidesToScroll: 1,
adaptiveHeight: true,
variableWidth: true,
arrows: products.length > 4 ? true : false,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 4,
slidesToScroll: 4,
infinite: true,
dots: false,
}
},
{
breakpoint: 600,
settings: {
infinite: true,
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
infinite: true,
slidesToShow: 1,
slidesToScroll: 1
}
}
]
};
You can catch the breakpoint event and then check if the window width is less or equal than 480px. Then, you set the slide you need.
(Call it at least once to check if it's starting at a >480px device).
I assume you are using jQuery because of Slick Slider.
$my-slider.on('breakpoint', function(eventick, breakpoint) { // if breakpoint change
setSlide();
});
function setSlide() {
if ($(window).width() <= 480) {
$('.my-slider').slick('slickGoTo', 1); // the number of slide you need
}
}
setSlide(); // call it once at least
Hope it help you somehow.
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've got the following slick initialization code. Basically these are two synced blocks:
the first is the content carousel showing only one block at a time.
the second is a menu carousel showing several options at a time.
this.slick1 = $('.slider-content1').slick({
arrows: false,
asNavFor: '.carousel-menu1',
adaptiveHeight: true,
fade: true,
speed: 1100
});
this.slick2 = $('.carousel-menu1').slick({
arrows: false,
asNavFor: '.slider-content1',
centerMode: true,
slidesToShow: 5,
speed: 1100,
responsive: [
{
breakpoint: 1001,
settings: {
slidesToShow: 3
}
},
{
breakpoint: 751,
settings: {
slidesToShow: 2
}
}
]
});
The problem is that the document is scrolled to slick2 when window is resized over the responsive breakpoint.
What may cause it? I definetely do not want the document to be scrolled each time I resize the window.
Ive been reading up on opera mini and running javascript on it.
https://dev.opera.com/articles/opera-mini-and-javascript/
The opera website says you can add an event listener to your scripts and have them resume on a user initiated action.
What actions would be supported by opera mini that i can use to resume a script and how do i integrate the event listener into my current js?
For example i have this image carousel which had this script on my page:
<script type="text/javascript">
$(document).ready(function(){
$('.responsive-mq').slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 4,
slidesToScroll: 4,
lazyLoad: 'ondemand',
autoplay: true,
autoplaySpeed: 2000,
mobileFirst: true,
responsive: [
{
breakpoint: 1024,
settings: {
speed: 300,
slidesToShow: 5,
slidesToScroll: 5,
infinite: true,
dots: true,
autoplay: true,
autoplaySpeed: 2000
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 3,
slidesToScroll: 2
}
},
{
breakpoint: 500,
settings: {
dots: true,
infinite: true,
speed: 300,
slidesToShow: 2,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 3,
slidesToScroll: 3
}
},
{
breakpoint: 199,
settings: {
dots: true,
infinite: true,
speed: 300,
slidesToShow: 2,
slidesToScroll: 2,
autoplay: true,
autoplaySpeed: 2000
}
}
]
});
});
But then has its own js file with heaps of scripting in it.
Would i only have to use the listener on the on page script?
I'm only a beginner with js so please keep that in mind.
Basically when you load a webpage in Opera Mini, then you get something like a screenshot of it. This screenshot may be reloaded on user action (like click or form submit), but will not reload automatically, so it would be best if you disabled carousel for Opera Mini users. You can just stack slides one under each other. This way users don't have to reload the page to see the content.
You could probably modify your code like so:
var isOperaMini = Object.prototype.toString.call(window.operamini) === "[object OperaMini]";
if (!isOperaMini) {
$('.responsive-mq').slick(...);
}
But remember to check this in Opera Mini as I'm not entirely sure it will work with your site and this Slick plugin.