javascript - I can't get my Slick slider to work at all

I'm trying to get a fading, Slick slider to work on my website. But I'm having no luck. This is Slick: /

If you scroll down, you'll see the instructions on how to implement. I've attached my screenshot, so hopefully someone can see what I'm doing wrong.

<html>
    <head>
    <title>My Now Amazing Webpage</title>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr/jquery.slick/1.3.11/slick.css"/>
    </head>
    <body>

    <div class="fade">
   <div><img src=";text=[ img 1 ]" /></div>
  <div><img src=";text=[ img 1 ]" /></div>
  <div><img src=";text=[ img 1 ]" /></div>
    </div>

    <script type="text/javascript" src="//code.jquery/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="//code.jquery/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr/jquery.slick/1.3.11/slick.min.js"></script>


    <script type="text/javascript">
        $(document).ready(function(){       
$('.fade').slick({
  dots: true,
  infinite: true,
  speed: 500,
  fade: true,
  slide: '> div',
  cssEase: 'linear'
});
    
        });
</script>

    </body>
</html>

I'm trying to get a fading, Slick slider to work on my website. But I'm having no luck. This is Slick: http://kenwheeler.github.io/slick/

If you scroll down, you'll see the instructions on how to implement. I've attached my screenshot, so hopefully someone can see what I'm doing wrong.

<html>
    <head>
    <title>My Now Amazing Webpage</title>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr/jquery.slick/1.3.11/slick.css"/>
    </head>
    <body>

    <div class="fade">
   <div><img src="http://placehold.it/1000x400&text=[ img 1 ]" /></div>
  <div><img src="http://placehold.it/1000x400&text=[ img 1 ]" /></div>
  <div><img src="http://placehold.it/1000x400&text=[ img 1 ]" /></div>
    </div>

    <script type="text/javascript" src="//code.jquery./jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="//code.jquery./jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr/jquery.slick/1.3.11/slick.min.js"></script>


    <script type="text/javascript">
        $(document).ready(function(){       
$('.fade').slick({
  dots: true,
  infinite: true,
  speed: 500,
  fade: true,
  slide: '> div',
  cssEase: 'linear'
});
    
        });
</script>

    </body>
</html>

I'm new to Javascript and Jquery so I feel like I'm messing something up there.

When I load my page, all I see are the 3 test images, one below the other.

Anyone know what I'm doing wrong?

Share Improve this question edited Oct 10, 2014 at 22:00 Neel Kumar 1801 silver badge9 bronze badges asked Oct 10, 2014 at 1:47 Alan Scarpa 3,5704 gold badges29 silver badges49 bronze badges

Can you make a jsFiddle of your code, to see if there are any errors with it? – Yoann Commented Oct 10, 2014 at 2:10
Post your code, not a screenshot of it! It is just simple copy and paste, easy and quick. – Macsupport Commented Oct 10, 2014 at 4:41
Added the code. Sorry about that. – Alan Scarpa Commented Oct 10, 2014 at 5:34
Slick Slider Working Example code2night./Blog/MyBlog/Slick-Slider – Shubham Commented Sep 13, 2020 at 13:27

Add a ment |

1 Answer 1

Sorted by: Reset to default 8

The problem is in the slide setting (element query to select the slider)

For example changing:

$('.fade').slick({
  dots: true,
  infinite: true,
  speed: 500,
  fade: true,
  slide: '> div',
  cssEase: 'linear'
});

$('.fade').slick({
    dots: true,
    infinite: true,
    speed: 700,
    autoplay:true,
    autoplaySpeed: 2000,
    arrows:false,
    slidesToShow: 1,
    slidesToScroll: 1
 });

Works, just play around with the settings. You were defining slide as > div (inmediate children of div), so if you remove it (defaults to div), it works.

<html>
    <head>
    <title>My Now Amazing Webpage</title>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr/jquery.slick/1.3.11/slick.css"/>
    </head>
    <body>

    <div class="fade">
   <div><img src="http://placehold.it/1000x400&text=[ img 1 ]" /></div>
  <div><img src="http://placehold.it/1000x400&text=[ img 1 ]" /></div>
  <div><img src="http://placehold.it/1000x400&text=[ img 1 ]" /></div>
    </div>

    <script type="text/javascript" src="//code.jquery./jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="//code.jquery./jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr/jquery.slick/1.3.11/slick.min.js"></script>


    <script type="text/javascript">
        $(document).ready(function(){       
$('.fade').slick({
    dots: true,
    infinite: true,
    speed: 700,
    autoplay:true,
    autoplaySpeed: 2000,
    arrows:false,
    slidesToShow: 1,
    slidesToScroll: 1
 });
    
        });
</script>

    </body>
</html>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - I can't get my Slick slider to work at all - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)