React slick width problem

GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together. Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community. Already on GitHub? Sign in to your account. I implemented a slider sometime in the past but now it's broken. It's like the calculation of the slick container takes max-width of the parent element as the width, so it fails to size itself down when its container is sized down.

It used to scale fine before. I have scoured for any side effects in my css but I fail to find any, this happens no matter what I set as my slides, too, even simple naked div with a string inside it. Issue persists, I am not using flex, but it appears further up the ancestor tree. However i break out of flex before the slider depth. Anyhow, setting those to all elements up the tree does not solve the issue. Closing this issue. I'm currently suffering from this issue - basically the slider works perfectly until you embed it in a Flex view.

Quite difficult to work around in some situations. This worked for me. I didn't actually need max-height:0 for my horizontal slider, just min-width:0. When resize, the slider will get the right width.

So currently I trigger a resize event to fix this. We're seeing this also as creeperyang described. It appears that the amount by which the slide's width is incorrect is equal to the amount of padding applied to the grandchild of each slide but that might be coincidence. I'm still encountering this problem of 'too wide' slides. The slick-slide elements all have styles directly on the div that impose large widths. I even tried setting a fixed width in the settings, but it still refuses to work.

I also ave dynamically created slides, so that might be the problem although i don't know why. I used flexboxgrid and fixes from this thread dont helped me. What To Do?! I had a similar, but different issue where. Perhaps it will help some of you. Skip to content. Dismiss Join GitHub today GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.

Sign up. New issue. Jump to bottom. Slider width being set to a larger number? Copy link Quote reply. Feb 4, This comment has been minimized. Sign in to view.GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together. Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community. Already on GitHub? Sign in to your account.

ERROR in. It is a build setup issue. Nothing specific to this library. Please try asking in stackoverflow. Try using style-loader in a combination with css-loadernot as a fallback. You might need a file-loader additionally in order to resolve fonts from the linked css files. Skip to content. Dismiss Join GitHub today GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.

Sign up.

Official bugatti automotive website

New issue. Jump to bottom. Copy link Quote reply. I am using webpack. This comment has been minimized. Sign in to view. Sign up for free to join this conversation on GitHub.

Already have an account?

react slick width problem

Sign in to comment. Linked pull requests. You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window.GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account. Hi, I am using slick slider v.

I really like the slider so thanks for all the hard work Mr. For some reason my three images just stack on top of each other like something in the.

The page works correctly using other browsers, firefox, chrome, opera and safari all work correctly. JSLint shows some problems, but it works in other browsers so the errors must not be too great. Of course IE plays by their own rules so.

react slick width problem

Nothing in the console? Does the slick demo page work? I don't have access to ie11 at the moment, but I can look tomorrow. Hi Ken, thanks for responding so quickly. This morning I am getting something in the console.

Issue seems to be more with foundation 5 and ie11 not slick slider and ie The error being in foundation. I am checking foundation 5 forum and google for an answer. If you have time to check in ie11 that would be great. BTW, my IE 11 is running in compatibility mode. I forgot to mention that the slick demo page does work.

The Last React Carousel You'll Ever Need!

I haven't found a solution in the foundation 5 forum. Still searching. All the scripts are being loaded so it is not a path problem as stated in the forum. For the life of me, I cannot get slick slider to work on ie Works fine on other browsers but then that doesn't surprise me at all. Unfortunately, that is a deal breaker.

Unless you provide a JSFiddle of your settings my hands are kind of tied.GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community. Already on GitHub? Sign in to your account. Hey i am using react-carousel to show multiple items and in my one slide there are many variable width divs.

The problem is when there is only one div inside one slide then the single div get left aligned and not center aligned. Any suggestions to solve the issue? Have you used flexbox before? It does a stellar job at aligning items. You'd probably need to wrap your many divs in a parent div. Then target that parent div with something like:. No matter how many child divs are in your parent div justify-content: space-around will center them and space them evenly.

There are other options too. Also, align-items may or may not be needed in your case. Take a look at this to help you out: Flexbox guide.

Hey rtmalone. Thank you for your response. Actually i am using already using flex and i have fixed the problem now. Though the problem was something else. I fixed this using custom classes and then setting css for the particular classes.

Skip to content. Dismiss Join GitHub today GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.

Sign up. New issue. Jump to bottom.

Ashita gearswap

How to control the width of slick-track? Copy link Quote reply. This comment has been minimized. Sign in to view. ExtremeRights closed this Dec 9, Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment.By using our site, you acknowledge that you have read and understand our Cookie PolicyPrivacy Policyand our Terms of Service.

Dx6 printhead

The dark mode beta is finally here. Change your preferences any time. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information. I have implemented React Slick Slider for my website, it works proper for desktop view and take proper width accordingly, but if I switch to responsive view the width of the container is not proper and it looks all distorted.

Note: Attaching the image to show the result. Finally I was able to figure out the issue, the container for slider was inside the same row where other elements on the pages were, this was causing the issue where slider was unable to calculate the width.

The structure was like this before :. Learn more. Asked 1 year ago. Active 1 year ago. Viewed 2k times. Following is the container : slick-track and below is the inline css being added : width: 2. I want 2 columns in a row for responsive slick slider. Husain H.

Slick JS Slider: Learn how to easily add a carousel to your site

Husain 97 13 13 bronze badges. Active Oldest Votes. Sign up or log in Sign up using Google. Sign up using Facebook. Sign up using Email and Password. Post as a guest Name. Email Required, but never shown. The Overflow Blog. Featured on Meta.GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community. Already on GitHub? Sign in to your account. Hey guys, react-slick is calculating the width of the slick-slide incorrectly. It's inside of a container with px and I have slidesToShow: 5, and it's calculating the width as px per card when it should be px.

Crave code for roku

Not sure what's going on here. I'm on a screen size of px and there's 50px of padding on slick-list so it looks like it's almost trying to get the full screen size? Found the issue. I'm using an external library for styling called Aphrodite. It seems like it doesn't render the aphrodite CSS quickly enough for react-slick to pick up on the initial width. The answer of KuriatoV helped me a lot. Thanks to him You'll find a more precise answer below. You just have to make sure that you pass down a prop to the slider in order to trigger the "componentWillReceiveProps" function.

The solution here didn't quite work, but I was able to have the slider properly re-render using this method here in I had this issue when using a "scale" css animation in a modal in Chrome. It calculates the initial size based on the pre-animation scale size. In a window resize event, it calculates the width of each item in the slider based on the currently scaled size during the animation.

I'm facing this problem right now, the slide's width is not calculated until resize. My solution, for those that don't want to rely on setTimeouts or put the slider in another component:. Note: you still have to have a ref to slick like in jchapelle 's answer above. Issue is still actual. Updated my project to React v16 and react-slick to v0. Carousel now looks bad after dynamic changing of items because of incorrect width calculating.

Subscribe to RSS

After emulating window resize event everything works fine. Best solution for me was using onLoad attribute on my img tags inside the slider. The answer from mmakarios is by far the best! Changes will be released soon.In slick 1.

Note: the HTML tag or the parent of the slider must have the attribute "dir" set to "rtl". Use them as shown below:. If you like slick, and also like Sass, try my Guff mixin library!

Features Fully responsive. Scales with its container. Separate settings per breakpoint Uses CSS3 when available. Fully functional when not. Swipe enabled.

react slick width problem

Or disabled, if you prefer. Desktop mouse dragging Infinite looping. Single Item 1. Add Slide Remove Slide. 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. Use with odd numbered slidesToShow counts. See source for use example. Use with easing libraries or default easing methods edgeFriction integer 0. 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.


thoughts on “React slick width problem”

Leave a Reply

Your email address will not be published. Required fields are marked *