I have created a slick slider and am trying to implement functionality that does not seem to be available through the ui. What I am after is to allow the visitor to navigate to the next slide by clicking on the active slide. I am also using Swipe, so I would want both to function simultaneously (swiping and clicking). Any suggestions? I am using the most current version of Slick (1.9.0) which functions fine otherwise.

Comments

mossel created an issue. See original summary.

mossel’s picture

mossel commented
Assigned: mossel » Unassigned

accidentally assigned myself

gausarts’s picture

gausarts commented
Status: Active » Needs work

We do have UI for this. You may want "focusOnSelect" option at your optionset UI.
Feel free to re-open if that is not the case.

gausarts’s picture

gausarts commented
Component: Code » Documentation
Status: Needs work » Fixed
mossel’s picture

mossel commented

Thanks gausart. Unfortunately FocusOnSelect does not do what I need. What I am looking for is the option to click the active (visible) slide so the carousel advances to the next (hidden) slide. NB. I only have one slide visible at a time and am not using thumbnails or dots for navigation.

mossel’s picture

mossel commented
Status: Fixed » Active
mossel’s picture

mossel commented
Status: Active » Needs work
gausarts’s picture

gausarts commented
Status: Needs work » Fixed

I made a fiddle:
http://jsfiddle.net/o4toq31q/1075/

Change the last param to false to keep the sliding animation:
$slider.slick('slickGoTo', curSlide, false);

Feel free to re-open if still an issue.

mossel’s picture

mossel commented
Status: Fixed » Needs work

Thanks for the work gausarts, much appreciated. The only issue I'm now faced with is that I have multiple carousels on one page. Clicking one results in all the carousels to move to the next image.

I'm not sure how to rewrite your fiddle so that only the one carousel is addressed?

gausarts’s picture

gausarts commented
Status: Needs work » Fixed

Please consider below:

  1. Override slick.load.min.js to your heart content at the risk of being left behind from upstream changes. Or better extend using hook_library_info_alter(), or via themes, or hook_page_attachments(), whatever is easier for you.
  2. You will have no problem with multiple carousels, as long as you do the proper loop as already done at slick.load.min.js.

No need to always reinvent the wheel. Start from any given or available source, and DIY as needed.

I will leave the rest for you as an exercise ;)
Feel free to share your findings to benefit others, but let's keep it closed, then, as the original issue was already addressed.

mossel’s picture

mossel commented

Thanks.

I ended up adding 

b.on("mouseup",".slick-slide", function () { b.slick("slickNext");});

to slick.load.min.js

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.