Menu Close

Slick Slider Basic With Example

Jennifer
slider

Slick slider helps to improve responsive html layouts with an easy manner. The below example shows the basic image slick slider with complete html layout.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css"/>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style2.css"/>
    <title>Slick Slider Basic</title>
</head>
<body>
<div class="main">
  <div class="slider slide-show">
    <div class="img-wish">
        <img src="img1.png" >
            </div>
    <div class="img-wish">
        <img src="img2.png" >
            </div>
    <div class="img-wish">
        <img src="img3.png" >
            </div>
    </div>
</div>
</body>   
    <script>
        $('.slide-show').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: true, 
        dots: true,
        fade: true,
    });
    </script>
</html>

Create external stylesheet and add it to the above example

body{
  background:#ccc;
}
.main {
  font-family:Arial;
  width:500px;
  display:block;
  margin:0 auto;
}
.img-wish{text-align: center !important;}
.img-wish img{display: inline;}

More examples from slick slider codepen – click here

Popular Posts
Total Views: 7,608

Share

Posted in HTML, jQuery
Tagged , , , , ,

You can also read...