Slick adaptive height не работает

Adaptive height slides with expanding content. #1320

Comments

nerijusgood commented May 7, 2015

Hi, first of all great Slider, keep up the awesome work.

I am facing a situation where I have 1 Slide per screen slider with very different amount of content, thus adaptive height is necessary to avoid huge white space gaps.

On top of that, each slider has a toggle which shows/hides more content, which gives me an issue: adaptive height setting gives each slide a fixed height, thus making expandable extra content not fit the slide height and go under other elements.

How to address this issue?
First ideas were to: 1) on toggle click, unslick to remove fixed height 2) init slick right after. Which is not working as expected.

Is there a proper way to recalculate height, reinit slick or solve adaptive height without setting height?

The text was updated successfully, but these errors were encountered:

donum commented May 7, 2015

I have exactly the same problem I am currently working on.

What I just tried was to use the onAfterChange event to set the height of the outer container to auto after adaptive height has done it’s job.

The only issue is, onAfterChange gets triggered before setPosition which will set the height. (link to source code)

That feels odd. One would expect this event to be fired after everything else is done.

edit
Regarding your idea. It works if you do:

This was mentioned before by @apfelbox and worked fine for me. In my use case it doesn’t work nicely, because my slide content element collapses with an animation so I really would like to add height:auto to the outer container.

Best Regards,
Daniel

nerijusgood commented May 7, 2015

On the weekend ill try to make a live example and then we maybe could try various solutions.

donum commented May 7, 2015

I already posted two solutions.

• Either the onAfterChange event gets changed so we can use it to set the height to auto after it was defined via adaptiveHeight
• Or use the code snipped from above in your show/hide modules event

monkviper commented Jun 6, 2015

I am not great on javascript but this is how I fixed the same issue. I had to put multiple slider and expanding content in the main slick slider.

phylaxis commented Aug 14, 2015

I know this is closed, but I am having a somewhat similar issue that I can’t seem to solve and the onAfterChange fix is not working in my case. I have a page with two slick sliders. One for showing thumbnails and one that contains the full sized images in a Foundation 5 Reveal modal. I have some jQuery code that has an on.(‘click’) event that determines the slide index of the slide that was clicked uses a slickGoTo event to advance the slide in the modal. I then open the modal. You can see a working example here: http://03c7bc9.netsolhost.com/listing/wailea-seashore-suite-k507/#photos. The issue I’m having (which you will likely see in the demo) is that most of the time the first slide appears with a collapsed height. If you advance the slide or even just resize the browser window the slide will open to it’s full height and all is fine. I need a way to get the slide to refresh to the correct height reliably each time the modal is opened. Any ideas? Here is the full code I’m using to open the modal:

LiamTorrelli commented May 30, 2018

Good day, everyone. I had the same issue, and actually there are two ways to resolve this.

1. This way will work on desktop, unfortunately it does not solve the problem on mobile

1. This solution will also work on mobile

khushbupatel24 commented Aug 14, 2020

I have exactly the same problem I am currently working on.

What I just tried was to use the onAfterChange event to set the height of the outer container to auto after adaptive height has done it’s job.

The only issue is, onAfterChange gets triggered before setPosition which will set the height. (link to source code)

That feels odd. One would expect this event to be fired after everything else is done.

edit
Regarding your idea. It works if you do:

This was mentioned before by @apfelbox and worked fine for me. In my use case it doesn’t work nicely, because my slide content element collapses with an animation so I really would like to add height:auto to the outer container.

Hey, where should I include this line in my code?

This is the slider code. I have a read more button in caption, which expand caption detail on click. For that, I want height auto of slick-list div.

Источник

Change height of Slick Carousel

Here is a fiddle of Slick Carousel embedded in a Bootstrap thumbnail.

How can I make the carousel only 200px tall and ensure that the images are scaled proportionally? I can’t seem to get the carousel to fit inside a container who’s height I dictate.

NOTE: Resize your browser after loading this fiddle! This works around a known bug where the plugin layout is not initializing on page load. This is not the issue I’m needing solved. Ignore this issue.

6 Answers 6

I was having to set the height eg .slick-carousel because adaptive height wasnt working and slick was making the carousel as tall as the img s (before it was resized by css). but after messing around with it for a while. this is what works for me.

Try removing slidesToScroll from the config. The following simple combination worked for me without any additional CSS fudgery.

Set the container div’s height to the desired height for example 60% and the slick’s and the 2 following div’s height to 100% .

EXAMPLE:

CSS:

JS:

Apparently the issue with adaptive height it’s a bug as the source code says: https://github.com/kenwheeler/slick/issues/790

I have faced the same problem more or less, using images in Slick is tricky. So when I had a webpage on desktop everything was very smooth. But on mobile the slide was to small. The suggestion with scale(2) did not work hence it would make the image bigger then te screen.

After going back and forward I decided, to crop the images to be more vertical instead of horizontal.

Then In Jquery I did:

I hope this answer is relevant for those who came here with the same problem.

Источник

Slick Slider adaptiveHeight десинхронизирует слайдеры, подключенные через asNavFor

У меня есть три слайдера Slick, один из которых выглядит как вкладки браузера, а два других находятся ниже и меняются, щелкая вкладки. Это отлично работает с помощью asNavFor . Иногда содержимое слайдов нижнего слайдера меняется. Иногда это создает пробелы между ползунком и элементом под ним.

Я попытался добавить adaptiveHeight: true в нижний ползунок. Теперь высота адаптируется к содержимому, и пробелы исчезают. Но теперь ползунки больше не синхронизируются. Первый щелчок по кнопке «Далее» перемещает на один слайд нижние ползунки, но не ползунок вкладок. Еще одно нажатие на «Далее» перемещает ползунок вкладок, но не верхний ползунок.

Кто-нибудь знает, почему это происходит или как я могу решить эту проблему?

Вот мой код слайдера:

Изменить: я получаю этот код ошибки в своей консоли при первом щелчке:

Uncaught TypeError: i. $ List.animate не является функцией

Изменить 2: я использую jquery версии 3.5.1 и Slick Slider версии 1.8.1.

Также вот разметка моего HTML:

1 ответ

Честно говоря, я никогда не пробовал эту конкретную настройку , но всегда использовал adaptiveHeight вместе со стрелками fade (как и вы) и , показанными на большом Ползунок, а не на маленьком. Я мог представить себе некоторые странные коллизии или проблемы несовместимости между многослайдером со стрелками и одинарным слайдером с AdaptiveHeight.

Некоторые вопросы относительно вашей установки:

1. Какую версию Slick вы используете?
2. Какую версию jQuery вы используете?
3. Вы используете изображения непосредственно в качестве слайдов или они заключены в другие элементы?

Третий вопрос связан с тем, что в текущей версии Slick (1.8.1) есть проблема при использовании непосредственно в качестве слайдов. В этом случае свойство slidesToScroll работает некорректно и ведет себя как кратное slidesToShow . Кроме того, свойство infinite в этом случае также не работает.

Я создал ручку Slick Slider — Multiple Synced, которая, кажется, работает правильно. Надеюсь, это хоть немного поможет.

Источник

How can I make Slick Slider height responsive?

I have a working Slick Slider (http://kenwheeler.github.io/slick/), but can not get the height to be responsive. The images always stay the same height, no matter what size I shrink the browser to. I thought the «mobileFirst» setting would solve this but it doesn’t seem to. Does anyone know how to make the slider and images inside it be responsive? Here’s my code:

5 Answers 5

If you know the width and height of your images, calculate the aspect ratio of your image(s) and create a variable:

Then you can use this simple solution:

This makes the slider width change depending on the viewport height, and the slider height will change proportionally. Just change the value(s) as needed.

I had the same issue — removing variable width resolved the issue and the content scaled to the browser window. Through the responsive option you can have different options for the plugin for different breakpoints. So you could keep the variable width for larger screens and change accordingly when it needs to be responsive.

I’m not quite sure how Slick Slider does it’s markup, but I had to add another function to force the browser to redraw the image on window resize, when I used a similar js plugin.

Here’s the funtion I used:

The CSS for the image is just:

Keep in mind that to give an element a relative height ( a height in percentages ), it’s parent element must have a defined height.

To have an element take up 100% of the browser, that element and all of it’s parents, up to body and html , need to have height:100%; in their css styles.

Источник

slick

the last carousel you’ll ever need

slick

the last carousel you’ll ever need

Features

• Fully responsive. Scales with its container.
• Separate settings per breakpoint
• Uses CSS3 when available. Fully functional when not.
• Swipe enabled. Or disabled, if you prefer.
• Desktop mouse dragging
• Infinite looping.
• Fully accessible with arrow key navigation
• Add, remove, filter & unfilter slides
• Autoplay, dots, arrows, callbacks, etc.

Single Item

Multiple Items

Responsive Display

Variable Width

Adaptive Height

Data Attribute Settings

In slick 1.5 you can now add settings using the data-slick attribute. You still need to call $(element).slick() to initialize slick on the element.

Center Mode

Lazy Loading

Autoplay

Add & Remove

Filtering

Destroy

If you really want to be that guy.

Slider Syncing

Right to Left

Note: the HTML tag or the parent of the slider must have the attribute «dir» set to «rtl».

and a whole lot more.

Getting Started

Set up your HTML markup.

Move the /slick folder into your project

Add slick.css in your

Add slick.js before your closing tag, after jQuery (requires jQuery 1.7 +)

Initialize your slider in your script file or an inline script tag

When complete, your HTML should look something like:

NOTE: I highly recommend putting your initialization script in an external JS file.

Settings

Setting	Type	Default	Description
accessibility	boolean	true	Enables tabbing and arrow key navigation
adaptiveHeight	boolean	false	Enables adaptive height for single slide horizontal carousels.
autoplay	boolean	false	Enables Autoplay
autoplaySpeed	int(ms)	3000	Autoplay Speed in milliseconds
arrows	boolean	true	Prev/Next Arrows
asNavFor	string	null	Set the slider to be the navigation of other slider (Class or ID Name)
appendArrows	string	$(element)	Change where the navigation arrows are attached (Selector, htmlString, Array, Element, jQuery object)
appendDots	string	$(element)	Change where the navigation dots are attached (Selector, htmlString, Array, Element, jQuery object)
prevArrow	string (html|jQuery selector) | object (DOM node|jQuery object)	Previous	Allows you to select a node or customize the HTML for the «Previous» arrow.
nextArrow	string (html|jQuery selector) | object (DOM node|jQuery object)	Next	Allows you to select a node or customize the HTML for the «Next» arrow.
centerMode	boolean	false	Enables centered view with partial prev/next slides. Use with odd numbered slidesToShow counts.
centerPadding	string	’50px’	Side padding when in center mode (px or %)
cssEase	string	‘ease’	CSS3 Animation Easing
customPaging	function	n/a	Custom paging templates. See source for use example.
dots	boolean	false	Show dot indicators
dotsClass	string	‘slick-dots’	Class for slide indicator dots container
draggable	boolean	true	Enable mouse dragging
fade	boolean	false	Enable fade
focusOnSelect	boolean	false	Enable focus on selected element (click)
easing	string	‘linear’	Add easing for jQuery animate. Use with easing libraries or default easing methods
edgeFriction	integer	0.15	Resistance when swiping edges of non-infinite carousels
infinite	boolean	true	Infinite loop sliding
initialSlide	integer	0	Slide to start on
lazyLoad	string	‘ondemand’	Set lazy loading technique. Accepts ‘ondemand’ or ‘progressive’
mobileFirst	boolean	false	Responsive settings use mobile first calculation
pauseOnFocus	boolean	true	Pause Autoplay On Focus
pauseOnHover	boolean	true	Pause Autoplay On Hover
pauseOnDotsHover	boolean	false	Pause Autoplay when a dot is hovered
respondTo	string	‘window’	Width that responsive object responds to. Can be ‘window’, ‘slider’ or ‘min’ (the smaller of the two)
responsive	object	none	Object containing breakpoints and settings objects (see demo). Enables settings sets at given screen width. Set settings to «unslick» instead of an object to disable slick at a given breakpoint.
rows	int	1	Setting this to more than 1 initializes grid mode. Use slidesPerRow to set how many slides should be in each row.
slide	element	»	Element query to use as slide
slidesPerRow	int	1	With grid mode intialized via the rows option, this sets how many slides are in each grid row. dver
slidesToShow	int	1	# of slides to show
slidesToScroll	int	1	# of slides to scroll
speed	int(ms)	300	Slide/Fade animation speed
swipe	boolean	true	Enable swiping
swipeToSlide	boolean	false	Allow users to drag or swipe directly to a slide irrespective of slidesToScroll
touchMove	boolean	true	Enable slide motion with touch
touchThreshold	int	5	To advance slides, the user must swipe a length of (1/touchThreshold) * the width of the slider
useCSS	boolean	true	Enable/Disable CSS Transitions
useTransform	boolean	true	Enable/Disable CSS Transforms
variableWidth	boolean	false	Variable width slides
vertical	boolean	false	Vertical slide mode
verticalSwiping	boolean	false	Vertical swipe mode
rtl	boolean	false	Change the slider’s direction to become right-to-left
waitForAnimate	boolean	true	Ignores requests to advance the slide while animating
zIndex	number	1000	Set the zIndex values for slides, useful for IE9 and lower

Events

In slick 1.4, callback methods have been deprecated and replaced with events. Use them as shown below:

Event	Arguments	Description
afterChange	slick, currentSlide	Fires after slide change
beforeChange	slick, currentSlide, nextSlide	Fires before slide change
breakpoint	event, slick, breakpoint	Fires after a breakpoint is hit.
destroy	event, slick	When slider is destroyed, or unslicked.
edge	slick, direction	Fires when an edge is overscrolled in non-infinite mode.
init	slick	Fires after first initialization.
reInit	slick	Fires after every re-initialization
setPosition	slick	Fires after position/size changes
swipe	slick, direction	Fires after swipe/drag
lazyLoaded	event, slick, image, imageSource	Fires after image loads lazily
lazyLoadError	event, slick, image, imageSource	Fires after image fails to load

Methods

Methods are called on slick instances through the slick method itself in version 1.4, see below:

This new syntax allows you to call any internal slick method as well:

Method	Arguments	Description
slickCurrentSlide	none	Returns the current slide index
slickGoTo	int : slide number, boolean: dont animate	Navigates to a slide by index
slickNext	none	Navigates to the next slide
slickPrev	none	Navigates to the previous slide
slickPause	none	Pauses autoplay
slickPlay	none	Starts autoplay
slickAdd	html or DOM object, index, addBefore	Add a slide. If an index is provided, will add at that index, or before if addBefore is set. If no index is provided, add to the end or to the beginning if addBefore is set. Accepts HTML String || Object
slickRemove	index, removeBefore	Remove slide by index. If removeBefore is set true, remove slide preceding index, or the first slide if no index is specified. If removeBefore is set to false, remove the slide following index, or the last slide if no index is set.
slickFilter	Selector or Function	Filters slides using jQuery .filter()
slickUnfilter	index	Removes applied filtering
slickGetOption	option : string	Gets an individual option value.
slickSetOption	option : string, value : depends on option, refresh : boolean	Sets an individual value live. Set refresh to true if it’s a UI update.
unslick	none	Deconstructs slick
getSlick	none	Get Slick Object

WordPress

Go Get It

You can also use slick with the jsDelivr CDN!

If you like slick, and also like Sass, try my Guff mixin library!

Источник