Browser compatibility list?

[jeremyckahn]

Hi, I wasn't able to find an official list of supported browsers for Slick. Is there a list of browsers that Slick is known to support?

[kenwheeler]

I can get you a formal list. Generally speaking, it works IE8+ and IE7+ with some tweaking, but I'll run some tests and put a confirmed list up for you.

[jeremyckahn]

Awesome, thank you! This would be a great thing to have in the README.

[sirhc15]

Not sure if this is necessarily relevant, but in regards to compatibility there are some issues with IE9 due to CSS animations not working. A workaround is needed to get it to work smoothly with that browser. In case anybody is running into this issue.

[kenwheeler]

@sirhc15 I actually have detection in there to support IE9. It falls back to jQuery .animate(). Is it not for you?

[sirhc15]

Yeah actually on my IE it shows it scroll through the dots, but the slide isn't actually changing and then on my coworkers the slides all show at once on screen, stacked on each other like
slide1
slide2
slide3

[kenwheeler]

Is there an error in your console?

[sirhc15]

No, oddly enough no console errors. The active tag is moving throughout the slides in html, it's just not rotating the slide

[kenwheeler]

Are you using the latest version?

[sirhc15]

Okay so I download the files again yesterday and replaced all the slick.js and css files in my project and I still get the same results. It might be something else on my side, but not sure :/

[sirhc15]

I know you said in an earlier comment about it working in IE7 or 8 with some tweaking, what part in particular needed to be tweaked and why?

[sirhc15]

I just set it up on a clean IE9 vm and it's working so it's probably just something I'm doing on my end. Thanks for the help though.

[mlnisd]

How did you resolve the stacking of slides issue? It stacks on IE9 for me.

[mlnisd]

SCRIPT438: Object doesn't support property or method 'slick'
scripts.js, line 131 character 5

Error from the console

[kenwheeler]

@mlnisd sounds like slick isn't loading. are you including it and jquery prior to calling it?

[mlnisd]

@kenwheeler not sure how it fixed it, but I guess if there are any issues with it slick slides stacking, just to remove slick, clear caches, and add it back again. Thanks for the help loving slick.

[garyyau]

@kenwheeler I was curious whether you ended up adding that browser compatibility list. Thanks!

[kenwheeler]

It's coming @gky2 , been busy with a newborn.

[garyyau]

No probs @kenwheeler. Grats!

[valnub]

Also still looking for a compatibility list, especially interested if Windows Phone (IE) is supported.

[DarkMerge]

And Opera Mini

[EvilRegal]

Is the slick slider compatible with all version of IE? I'm having trouble primarily with the arrows working. This is a problem because I will need them on other slideshows throughout the site.

[leggomuhgreggo]

Hey @EvilRegal it should be mostly compatible with LTE IE8. There could be some style issues, and actually come to think of it, the arrows use transform: translate(0,-50%) now to vertically center, which wont work in IE8. If you add a negative margin of the arrow height it should correct that. Other common arrow problems include, z-index on the prev arrow, and icon font loading.

If you make a test case I might be able to take a look.

[EvilRegal]

Thanks for getting back to me so quickly!!! So I definitely have some of z-indexing going on particularly with the arrows. Because this project is for a client, I will show you the basic codes that I am using for this part. If you want to see the actual code in action, I can send you the link via private message.

The html code:

                    <div class="rightarrowOff"><img src="assets/Buttons/right-arrow-off" width="46" height="60" /></div>
                    <div class="single-item">
                        <div><img src="assets/Images/HomeSlideshow/slide1-Shows.jpg" width="100%" /></div>
                        <div><img src="assets/Images/HomeSlideshow/slide2-Sports.jpg" width="100%" /></div>
                        <div><img src="assets/Images/HomeSlideshow/slide3-Wedding.jpg" width="100%" /></div>
                        <div><img src="assets/Images/HomeSlideshow/slide4-Portraits.jpg" width="100%" /></div>
                        <div><img src="assets/Images/HomeSlideshow/slide5-Events.jpg" width="100%" /></div>
                    </div>

Script Code:
jQuery('.single-item').slick({
autoplay: true,
autoplaySpeed:3000,
infinite: true,
dots: true,
arrows: true,
speed: 500,
fade: true,
cssEase: 'linear'
});

CSS:
/slideshow styles go here/
.homeSlideshow{
position:relative;
clear:both;
min-width:1151px;
padding:1.563em 0;
z-index:0;
}

.homeSlideshow img{
    border-radius: .938em;
    -moz-border-radius: .938em;
    -webkit-border-radius: .938em;
    -border-radius: .938em;
}

    /* Arrows start*/
    .homeSlideshow .leftarrowOff,
    .homeSlideshow .rightarrowOff{
        position:absolute;
        z-index:10;
        top:45%;
        font-size: 0;
        line-height: 0;
        display: block;
        width: 46px;
        height: 60px;
        margin:0px;
        padding:0px;
        -webkit-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
        transform: translate(0, -50%);
        cursor: pointer;
        border: none;
        outline: none;
    }

    .homeSlideshow .slick-prev,
    .homeSlideshow .slick-next{
        position:absolute;
        z-index:12;
        top:45%;
        font-size: 0;
        line-height: 0;
        display: block;
        width: 46px;
        height: 60px;
        margin:0px;
        padding:0px;
        -webkit-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
        transform: translate(0, -50%);
        cursor: pointer;
        border: none;
        outline: none;
    }

    .homeSlideshow .leftarrowOff{
        position:absolute;
        left:0;
        margin:0px;
        padding:0px;
        z-index:11;
    }   

    .homeSlideshow .rightarrowOff{
        position:absolute;
        right:0;
        margin:0px;
        padding:0px;
        z-index:11;
    }

    .homeSlideshow .slick-prev,
    .homeSlideshow .slick-prev:link,
    .homeSlideshow .slick-prev:visited{
        left:0;
        margin:0px;
        padding:0px;
        background:none;
        z-index:14;
    }

    .homeSlideshow .slick-prev:hover,
    .homeSlideshow .slick-prev:focus{
        top:44.5%;
        left:0;
        margin:0px;
        padding:0px;
        background:url(../assets/Buttons/left-arrow.gif);
        z-index:15;
    }

    .homeSlideshow .slick-next,
    .homeSlideshow .slick-next:link,
    .homeSlideshow .slick-next:visited
    {
        right:0;
        margin:0px;
        padding:0px;
        background:none;
        z-index:14;
    }

    .homeSlideshow .slick-next:hover,
    .homeSlideshow .slick-next:focus
    {
        top:44.5%;
        right:0;
        margin:0px;
        padding:0px;
        background:url(../assets/Buttons/right-arrow.gif);
        z-index:15;
    }
    /*arrows end*/

    /*dots start*/
    .homeSlideshow .slick-dots
    {
        position: absolute;
        width: 100%;
        height:20px;
        left:1.250em;
        bottom:1.250em;
        display: block;
        padding: 0;
        margin: 0;
        list-style: none;
        text-align: left;
    }

    .homeSlideshow .slick-dots li
    {
        position: relative;
        display: inline-block;
        width: 20px;
        height: 20px;
        margin: 0 .5em 0 0;
        padding: 0;
        cursor: pointer;
    }

    .homeSlideshow .slick-dots li button
    {
        font-size: 0;
        line-height: 0;
        display: block;
        width: 25px;
        height: 25px;
        padding: 5px;
        cursor: pointer;
        color: transparent;
        border: 0;
        outline: none;
        background: transparent;
    }

    .homeSlideshow .slick-dots li button:hover,
    .homeSlideshow .slick-dots li button:focus
    {
        background:url(../assets/Buttons/slide-button-on.png)
    }

    .homeSlideshow .slick-dots li button:hover:before,
    .slick-dots li button:focus:before
    {
        background:url(../assets/Buttons/slide-button-off.png);
        opacity: 1;
    }

    .homeSlideshow .slick-dots li button:before
    {
        background:url(../assets/Buttons/slide-button-off.png);
        line-height: 20px;
        position: absolute;
        top: 0;
        left: 0;
        width: 25px;
        height: 25px;   
        content: '•';
        text-align: center;
        opacity:.90;
        color: dd8025;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .homeSlideshow .slick-dots li.slick-active button:before
    {
        opacity:1;
        background:url(../assets/Buttons/slide-button-on.png)
    }
    /*dots end*/

[leggomuhgreggo]

Closing: dormant

[mathxlee]

how about the new version?

[shivamjtg]

@kenwheeler Do we have a browser support matrix yet? Can you point me to it if yes?