CODEWITHSUNDEEP
javascriptjqueryhtmlslick.js
Ulmer
Ulmer

Reputation: 1580

Slick Carousel Not formatting

I'm trying to get four photos to automatically play through on the carousel but Slick isn't formatting the photos or anything. Could someone show me what I am doing wrong and what I can do to fix it? 

<!DOCTYPE html>

<head>
<meta charset="UTF-8">

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css"/>

<style>
photo-show {
	width: 40%;
}
</style>


</head>

<body>

<div class="photo-show">
<div><img src="./src/cat1.jpg" alt=""></div>
<div><img src="./src/cat2.jpg" alt=""></div>
<div><img src="./src/cat3.jpg" alt=""></div>
<div><img src="./src/cat4.jpg" alt=""></div>
</div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js"></script>

<script type="text/javascript">
    $(document).ready(function(){
      $('.photo-show').slick({
        slidesToShow: 4,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 2000,
      });
    });
</script>


</body>

Upvotes: 1

Views: 231

Answers (1)

Scott
Scott

Reputation: 3765

Making a guess here, it looks like you are trying to apply a style to your Slick photos. Your CSS is wrong and wouldn't format any of your images.

Try this CSS instead:

<style>
.photo-show img {
    width: 40%;
}
</style>

Notice that I added a "." before photo-show and specific img so that you can stylize your images within your photo-show container.

Upvotes: 1

Related Questions