CODEWITHSUNDEEP
javascriptjqueryhtmlcssslick.js
Nicolas Racine
Nicolas Racine

Reputation: 1061

Slick Slider not showing anything

Slick slider does not init propely I think that slick is getting his parent width incorectly. But I am unsure of what is happening. Im under this impresion because when i "inspect element" I see width:35000 px;

I written this simple code for simplicity

<div style="text-align: center;">
        <div id="AboutUsSlider" style="width: 90%; display: inline-block;">
            <div><img src="/images/banners/727X300.jpg"></div>
            <div><img src="/images/banners/727X300.jpg"></div>
            <div><img src="/images/banners/727X300.jpg"></div>
            <div><img src="/images/banners/727X300.jpg"></div>
            <div><img src="/images/banners/727X300.jpg"></div>
            <div><img src="/images/banners/727X300.jpg"></div>
            <div><img src="/images/banners/727X300.jpg"></div>
        </div>
</div>
<script>
$(document).ready(function(){
    $("#AboutUsSlider").slick({
        rtl:true,
        infinite:true,
        centerMode: true,
        variableWidth: true,
        dots: true,
        speed: 500,
        cssEase: 'linear',
        autoplay: true,
        autoplaySpeed: 6000,
        arrows: true
    });
});
</script>

If you guys would like to see it live, new.jccayer.com/test.php

any one has an idea why this is happening ? Any help/comment is apreciated!

EDIT

I took the example they ship in the downloaded "Slick" .zip posted online at new.jccayer.com/test.html We can compare it to new.jccayer.com/test.php Witch is mine

Both pages use files on my server. So no cdn. and both same files. Meaning that only the source code in this page is somewhere wrong. ( because example work )

Still I can't figure out what is diferent from the two file. Im I becoming blind because of how long I have been trying to make this work ?

Any one?

Upvotes: 0

Views: 19197

Answers (2)

leopold
leopold

Reputation: 2061

I've found that setting the CSS parent's overflow to hidden can help occasionally, too.

.parent-foo{
postion:relative; /* not always necessary */ 
overflow:hidden;
}

Upvotes: 2

Daelune
Daelune

Reputation: 161

I've managed to get this working locally by getting rid of the rtl option - Can you test and see if getting rid of that option works for you? So the code would just be:

$(document).ready(function(){
    $("#AboutUsSlider").slick({
        infinite:true,
        centerMode: true,
        variableWidth: true,
        dots: true,
        speed: 500,
        cssEase: 'linear',
        useTransform:false,
//      autoplay: true,
//      autoplaySpeed: 6000,
        arrows: true
    });
});

If you don't want to get rid of any options, see the slick documentation at http://kenwheeler.github.io/slick/ to see how to handle right-to-left -

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

So then, your div would just have dir="rtl" in the tag. Both work. If you have any issues let me know!

Upvotes: 5

Related Questions