Fit image to screen using CSS with Slick Carousel

Question

Fit image to screen using CSS with Slick Carousel

109 Views Asked by Becker At 21 October 2023 at 13:02

I am making an image carousel using Slick. I want to fit the width of the image along screen and the height is scaled with the width. Below is my index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>slick test</title>

    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
    <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
</head>
<body>
    
        <div class="carousel-container">
            <div >
                <img class="carousel" src="images/1.jpg">
            </div>
            <div >
                <img class="carousel" src="images/2.jpg">
            </div>
            <div >
                <img class="carousel" src="images/3.jpg">
            </div>
    
        </div>

    
    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript" src="slick/slick.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
</body>
</html>

Below is my attempt in style.css:

.carousel-container {
    margin: 0;
    padding: 0;
    max-width: 100%;
    width: 100%;
}

carousel {
    width: 100%;
    height: auto;
}

The images seem to be printed at its original resolution.

How to make it right? Do I need to change anything in slick.css or something else?

Original Q&A

There are 1 best solutions below

**Joseph Samuel** · Accepted Answer · 2023-10-21T13:35:13.073000

I did not understand this line

the height is scaled with the width

Hope this is what you want.

.carousel-container {
  margin: 0;
  padding: 0;
  max-width: 100%;
  width: 100%;
}

.carousel {
  width: 100vw;
  height: auto;
}
.img-carousel{
  width: 100%; height: 100%; object-fit: cover
}
body{
  padding: 0;
  margin: 0;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>slick test</title>

    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>

</head>
<body>
    
        <div class="carousel-container">
            <div class="carousel" >
                <img class="img-carousel" src="https://picsum.photos/600/300">
            </div>
            <div class="carousel">
                <img class="img-carousel" src="https://picsum.photos/100/300">
            </div>
            <div class="carousel">
                <img class="img-carousel" src="https://picsum.photos/200/100">
            </div>
    
        </div>

    
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
    <script>
      $('.carousel-container').slick({
        arrows:false            
      });
    </script>
</body>
</html>

here to make the image fill entire scree I have made div to 100wv then added width: 100%; height: 100%; object-fit: cover to the img tag.

added few settings to slick

<script>
  $('.carousel-container').slick({
    arrows:false,
  });
</script>

arrows:false, to hide arrows.

Fit image to screen using CSS with Slick Carousel

There are 1 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in SLICK

Trending Questions

Popular # Hahtags

Popular Questions