Hello,

I have a question about availability. Everything fits almost perfectly, but when you change the slide for a split second, the slide remains available to all users (aria-hidden=”false”), while the linked content is temporarily removed from keyboard navigation (tabindex= “-1”). This means that the link is present in the accessibility tree but is unavailable via keyboard navigation.
Have you encountered such a situation?

<div class="featured-article-slider-content focus-inset slick-slide slick-current slick-active" data-slick-index="1" aria-hidden="false" tabindex="-1" role="tabpanel" id="slick-slide11" aria-labelledby="slick-slide-control11" style="width: 720px; position: relative; left: -720px; top: 0px; z-index: 1000; opacity: 1; transition: opacity 500ms ease 0s;">
<div class="article-tag-button">
? <a href="/blogs/blog-1/tagged/profiles" class="text-button focus-inset" tabindex="-1">
?? Profiles
? </a>
</div>

this is the code caught in that split second

not working for me – is it still maintained?

Hi,

On a slick slider when i click and drag and the cursor goes outside of the container, the click event is been released and the slider that is most close to the center is been snaped.

how can i disable that? to remove the drag boundaries, regardless how off the container i drag, not be released untill i release the click.

regards

Hi there,

I’m facing an issue when reaching the last slide on slick slider and trying to scroll back to the previous slide. Below I am sharing a video depicting the issue.

https://drive.google.com/file/d/1-OiLFLDiVymq_QXoQMavsE4sqq86fUm4/view?usp=drive_link

As you will see below the last slider I am trying to make the footer show, which is not a part of the slider. But when scrolling back from the last slide, the transition is not smooth and I don’t know how to fix it.

Also, I am using the below script for the slider:

// debounce from underscore.js
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};

// use x and y mousewheel event data to navigate flickity
function slick_handle_wheel_event(e, slick_instance, slick_is_animating) {
// do not trigger a slide change if another is being animated
if (!slick_is_animating) {
// pick the larger of the two delta magnitudes (x or y) to determine nav direction
var direction =
Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY;

//console.log("wheel scroll ", e.deltaX, e.deltaY, direction);

if (direction > 0) {
  // next slide
  slick_instance.slick("slickNext");
} else {
  // prev slide
  slick_instance.slick("slickPrev");
}

}
}

// debounce the wheel event handling since trackpads can have a lot of inertia
var slick_handle_wheel_event_debounced = debounce(
slick_handle_wheel_event
, 100, true
);

// init slider
const slick_2 = $(“.elementor-139”);
slick_2.slick({
dots: true,
vertical: true,
// verticalSwiping: true,
speed: 1000,
initialSlide: 1,
easing: ‘linear’,
adaptiveHeight: true,
arrows: false,
draggable: false,
swipeToSlide: false,
waitForAnimate: false,
infinite: false
});
var slick_2_is_animating = false;

slick_2.on(“afterChange”, function(index) {
//console.log(“Slide after change ” + index);
slick_2_is_animating = false;
});

slick_2.on(“beforeChange”, function(index) {
//console.log(“Slide before change ” + index);
slick_2_is_animating = true;
});

slick_2.on(“wheel”, function(e) {
slick_handle_wheel_event_debounced(e.originalEvent, slick_2, slick_2_is_animating);
});

$(document).ready(function(){

 $('.elementor-139').on('afterChange', function(event, slick, currentSlide){
  // Hide all content elements
  //$('#main-footer').hide();
     $("#main-footer").css({"visibility": "hidden","display": "none"});

  // Show content only for the last slide
  if (currentSlide === slick.slideCount - 1) {
    //$('#main-footer').show();
      $("#main-footer").css({"visibility": "visible","display": "flex"});
      //$('.elementor-139').slick('unslick');
  }
});

});

Thank you in advance

Hello!
I am using your plugin to make a slider on my website however I have a problem that when I go to the page the image is always not showing at the start. It usually takes a while to show up, you can see the picture below. Please check and help me fix it
Thank you very much
https://prnt.sc/h-NzgNovfLwY

• This topic was modified 2 years, 5 months ago by kienvictory.

Hi,

We’ve been using slick code to do a custom slider and there are some bugs that we dont know how to solve.

1. When you click on next image (arrow) some pictures lagging on scroll (appear next to left image)
2. We want scollable images on loop (left and right).

Hi,
I’m working with html,css,js for slick-slider. I followed directions on https://kenwheeler.github.io/slick/ and it is working well.
What i am trying to do now is to set the my two row image slider to full browser height.
I managed to set the overflow-x free with “variableWidth: true” but the images won’t resize to cover full-height.
Do you have any idea how i could achieve that?

Dear Philipp

I am using your plugin for years now, always without any issues. It simply does what I need and therefore it is one that I hardly would like to miss.

Out of a sudden it stopped working on all of my pages. Images are not shown, only empty placeholder frames are visible.The site that I have linked with this post is actually not a productive site but my wordpress sandbox. Nevertheless it gives you an impression of the issue. The first gallery is the slick slider, the second has the slick_active=”false” tag set.

Unfortunately I had to disable it on all my productive page.

I have also tried to rollback WP to version 5.5.3 without success. I have also disabled all other plugins, again without success. It just looks like the js isn’t working anymore.

I would be really happy if you could have a look into it and hopefully fix the plugin.

Best regards
Ivo

Hi there,

i’m facing an issue that the images inside my slick-slider gets blurry after the first image slide. And that’s only on my chrome browser. Safari and Firefox works fine. Any idea for a solution?

Best, Sven

I recently implemented the slick carousel into the “FEATURED COLLECTION” of my shopify website, when I scroll back to the first item the tabindex value automatically switch from 0 to -1, I really appreciate if there is a solution for my problem

thank you

 <a class="grid-view-item__link grid-view-item__image-container full-width-link" href="/collections/cad-%E3%83%A2%E3%83%87%E3%83%AA%E3%83%B3%E3%82%B0/products/rhinoceros-6" tabindex="0">

 <a class="grid-view-item__link grid-view-item__image-container full-width-link" href="/collections/cad-%E3%83%A2%E3%83%87%E3%83%AA%E3%83%B3%E3%82%B0/products/rhinoceros-6" tabindex="-1">

• This topic was modified 3 years, 10 months ago by t0mu.
• This topic was modified 3 years, 10 months ago by t0mu.

Hi,

Can we have custom arrow styles outside the container? Upload a custom png/svg arow instead of the given conventional ones used in this demo samples https://kenwheeler.github.io/slick/…

Hi,

We have this problem in mobile when we click on the actual slider, it won’t show as the main picture however, the slider next to it will. For example, see this screenshot: https://prnt.sc/u6wzz4. I was clicking the white bed but the red bed shows as the main picture. I was not using a plugin, I am using slick js from this documentation. https://kenwheeler.github.io/slick/. This is the site link. https://franksalt.com.mt/properties/712957

Please help as I don’t where to get answers.

Thank you,
Mariah

Hi, I have some markup in a page.php template file. I am wondering if it’s possible to install this plugin but target a class in the html to create a slider from there?

Example:
<div class=”myslider slick-class-target”>



</div>

Hi,
I was just hoping that an update could be pushed to this plugin in the WordPress repository to mark it as compatible with WordPress 5.X+. I don’t think I have any problems using it on WordPress 5 but as the plugin hasn’t had an update for quite some time it is now getting flagged by security plugins such as WordFence as being out of date and a possible security risk.

Thanks!

• This topic was modified 5 years ago by Rick Curran.

Hi,

I’m looking into using this plugin in a WordPress environment and had just a few questions:

1) Is it possible to render the slider such that if 3 images are shown at any time, the focused one is larger and the images on the left and right are smaller and have part of their view overlapped by the center image?

Sort of like this effect:https://coolcarousels.frebsite.nl/c/59/

2) Can we also have text below each image that pertains only to that image as well as put the nav arrows under the image next to this content?

Thanks!

Hello,
add_filter( ‘slick_slider_html’, ‘slick_slider_clone_slider’, 10, 2 );
function slick_slider_clone_slider( $output, $post_id ) {
remove_filter( ‘slick_slider_html’, ‘slick_slider_clone_slider’ );
$atts = array_merge(
get_post_gallery( $post_id, false ),
[
‘size’ => ‘thumbnail’,
‘sl_fade’ => ‘false’,
‘sl_focusonselect’ => ‘true’,
‘sl_asnavfor’ => ‘#slick-slider-1’,
‘sl_slidestoshow’ => 4,
]
);
$atts_string = ”;
foreach ( $atts as $key => $value ) {
if ( ‘src’ === $key ) {
continue;
}
$atts_string .= ” $key=$value”;
};
$output .= do_shortcode( ‘[gallery’ . $atts_string . ‘]’ );
return $output;
};
`
I have inserted the above code into functions.php file that it does not work, please help me

I am using [WP Slick Slider and Image Carousel] plugin for my website for Desktop and Mobile banners. I see that Mobile banner part is not visible on some of the devices.

What could be the issue? Any help will be appreciated.

Hello,

I use the wordpress RC theme:
https://demo.wphunters.com/rc/

Who uses the slick slider.
Locally I have no worries. On the other hand once on my host, the images are stretched. Only on IOS.

When I inspect the code, I see that the width of the images = the full width of the slider.
Locally, the image width is correct.

Do you have an idea ?

Hello,

I have the pro version and i update it today and everything messed up.
I provided the link. Please i really need your help.
How can i solve it.

Regards.
Amadou

Hi, I recently took over this page from an someone else. It has a beautiful slider at the top of home page. However, there is NO reference to it anywhere to edit etc. In fact the only way i know its from slick slider is by viewing the page source. the Slick slider plugin had apparently been deleted. I just tried reinstalling it, to see if magically it would appear during a page edit but.. nope!
Any suggestions for what the heck to do here?

Thanks!

Barb

Hi,

My website is currently in maintenance mode so not visible, but I will do my best to describe what I’m trying to do.

I would like an image carousel which contains portrait and landscape images. The full sized images are different heights, but ideally I would like them all to be the same height within the slider. So they would be seen as a continuous strip of images which slide, same height but different widths.

I have tried ticking and unticking the Adaptive height option but this does not affect this.

I could resize images to have the same original size height and have different versions in the media library, but I wondering if it’s possible to avoid doing this.

Any help would be much appreciated,
Many thanks

Sally

Hi!
I’ve been using your great plugin for a while now but sadly it doesn’t seem to be compatible with last wp update or Gutenberg.
Do you know if you’ll work on an update ?
thx a lot

Hello!

I want to make a slider wide for the whole screen, but I only get 1000 pixels, how to make it full width?

Hi, I’m wondering is there “rain animation”?

Hi Philiphe, can i do this (2 rows carousel) with your plugin? https://codepen.io/creativekinetix/pen/RWYPeY
i think is the same library (slickjs)
Thanks

Hi Philipp,

I have a custom field that stores the gallery shortcode:

[gallery link="none" size="full" slick_active="true" ids="1915,1916,1917,1918,1919" sl_show_caption="true"]

I am looking to process the shortcode via ajax and put the HTML response in a container on the page.

I am retrieving the value when the user clicks on a selection and responding with a JSON object:

PHP

    $return = array(
        'acquired' => get_post_meta($id, '_property_acquired', true),
        'address'  => get_post_meta($id, '_property_address', true),
        'property' => get_post_field('post_title', $id),
        'rsf'      => get_post_meta($id, '_property_rsf', true),
        'sold'     => get_post_meta($id, '_property_sold', true),
        'slider'   => do_shortcode(get_post_meta($id, '_property_transformation_slider', true))
    );

    wp_send_json($return);

JS
$('#transformation-slider').html(data.slider).slick()

The HTML string that I get back from the JSON response is of the normal WP gallery, and NOT one formatted for Slick slider. If I do do_shortcode(get_post_meta($id, '_property_transformation_slider', true)) directly in the page template the slider renders as expected. I am adding the Slick CSS and JS to the page via the method described in your FAQ under ‘Is it possible to use slick’s JS and CSS independently?’

Hope this is clear. Any help would be appreciated. I should be able to put up a page if noting sticks out. Thanks.

Greetings:
I’ve been playing around with different slider apps yesterday. I’ve chosen Slick Slider. Once I’ve gotten used to how it works, I’ve decided that this is the app that I will use for the web site I’m finishing up.

I”m using the Reykjavik theme, so not sure if my question is theme-specific. In my testing, I tried out images of different sizes and dimensions. What I’d like to do is to have a “default” image size so that the slides will move seamlessly and not seem jarring with different sizes. What do you recommend for image size for photographs? I wouldn’t have any trouble cropping them as needed, but I’d like to go for consistency.

Thanks for your time, and for your helpful plugin.
Velanche

Hello,
i have problem with infinite loop. When my slider hits the end and last slide, it goes back to previous one. So its not getting from slide 1.

When installing the plugin with WordPress 4.9.6 I get a fatal error message.

Hi there,
I’ve been using this plugin for a while, but it is now untested with the current WordPress version. Will there be an update soon?
Thank you.