CODEWITHSUNDEEP
javascripthtmlcssslider
aziui
aziui

Reputation: 57

Images not aligning as I want with slick slider

I am trying to create this for a website I am building from scratch.
This is a grid with different images being on the same line, and we could slide them on the left in order to see the one that are hiddens (you can see here that there are more pics outside the frame):

enter image description here

So I made some researches and found about Slick slider, which I tried to use but couldn't get a good result of.

This is my HTML:

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hestia - Accueil</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/slick.css"/>
    <link rel="stylesheet" type="text/css" href="css/slick-theme.css"/>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>

    <!--Slick slider-->
    <div class="slider-villes">
        <img src="images/accueil/paris-1772x900.jpg" alt="paris">
        <img src="images/accueil/nice-1772x900.jpg" alt="nice">
        <img src="images/accueil/marseille-1772x900.jpg" alt="marseille">
        <img src="images/accueil/lyon-1772x900.jpg" alt="lyon">
        <img src="images/accueil/bordeaux-1772x900.jpg" alt="bordeaux">
        <img src="images/accueil/ajaccio-1772x900.jpg" alt="ajaccio">
        <img src="images/accueil/toulouse-1772x900.jpg" alt="toulouse">
    </div>
    <!--Slick slider-->
    
    <!--Scripts-->
    <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="js/slick.js" ></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('.slider-villes').slick({
                infinite: true,
                cssEase: 'linear',
                swipe: true,
                arrows: true,
                variableWidth: true
             });
        });
    </script>
    <!--Scripts-->
</body>
</html>

And here is my CSS:

.slider-villes {
    display: flex;
    overflow-x: scroll;
}

.slider-villes img {
    width: 20% !important;
    height: 20%;
    object-fit: cover;
}

And it looks like this:

enter image description here

So there are my pictures, I can slide them, but they will always keep their position to the very left of the screen and they do not seem to be willing to stay close together...

I don't really know what to do at this point... I hope someone will be able to help me.

Thanks.

Upvotes: 0

Views: 172

Answers (1)

lestop
lestop

Reputation: 58

by removing the css rules for ".slider-villes" and modifying that of ".slider-villes img" by:

.slider-villes img {
    height: 150px;
    width:auto;
    object-fit: cover;  
    padding: 20px 0 20px 40px;   
}

and putting this script:


       $(document).ready(function() {
            $('.slider-villes').slick({
                infinite: true,
                slidesToShow: 4,
                slidesToScroll: 4,
                variableWidth: true 
             });

I get this result.

I get this result.

Upvotes: 1

Related Questions