<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Carrousell</title>
    <!-- Reset styles -->
    <link rel="stylesheet" href="https://unpkg.com/modern-css-reset/dist/reset.min.css" />
    
    <!-- Google Fonts Muli -->
    <link href="https://fonts.googleapis.com/css2?family=Muli:wght@300;400;700&display=swap" rel="stylesheet"> 
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
    <!-- Custom style -->
    <link rel="stylesheet" href="styles.css">
    <!-- Glide css -->
    <link rel="stylesheet" href="https://unpkg.com/@glidejs/glide@3.3.0/dist/css/glide.core.min.css">
<body>

    <div class="glide__container">
    <div class="glide">
        <div class="glide__track" data-glide-el="track">
          <ul class="glide__slides">
            <li class="glide__slide">
                <div class="card">
                    <div class="img__container">
                        <img src="https://images.unsplash.com/photo-1592417817098-8fd3d9eb14a5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="salad" class="card__img">
                    </div>
                    <p class="card__txt">Crispy Crouton Salad</p>
                </div>
            </li>
            <li class="glide__slide">
                <div class="card">
                    <div class="img__container">
                        <img src="https://images.unsplash.com/photo-1544726982-b414d58fabaa?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="pancake" class="card__img">
                    </div>
                    <p class="card__txt">Pancake</p>
                </div>
            </li>
            <li class="glide__slide">
                <div class="card">
                    <div class="img__container">
                        <img src="https://images.unsplash.com/photo-1516919549054-e08258825f80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt="donuts" class="card__img">
                    </div>
                    <p class="card__txt">Crispy and Creamy Doughnuts</p>
                </div>
            </li>
            <li class="glide__slide">
                <div class="card">
                    <div class="img__container">
                        <img src="https://images.unsplash.com/photo-1589627461407-6257b1acf0fd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="pancakes"  class="card__img">
                    </div>
                    <p class="card__txt">Pancakes with yogurt</p>
                </div>
            </li>
            <li class="glide__slide">
                <div class="card">
                    <div class="img__container">
                        <img src="https://images.unsplash.com/photo-1528137871618-79d2761e3fd5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt="pizza" class="card__img">
                    </div>
                    <p class="card__txt">Perfect Neapolitan Pizza</p>
                </div>
            </li>
            <li class="glide__slide">
                <div class="card">
                    <div class="img__container">
                        <img src="https://images.unsplash.com/photo-1542344807-21226ec94b39?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="hot dog" class="card__img">
                    </div>
                    <p class="card__txt">German Hot Dogs Buns</p>
                </div>
            </li>
            <li class="glide__slide">
                <div class="card">
                    <div class="img__container">
                        <img src="https://images.unsplash.com/photo-1567446991062-e8a1209f70b4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt="hamburger" class="card__img" >
                    </div>
                    <p class="card__txt">Double Patty Burgers</p>
                </div>
            </li>
            <li class="glide__slide">
                <div class="card">
                    <div class="img__container">
                        <img src="https://images.unsplash.com/photo-1528740096961-3798add19cb7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt="oreo shake" class="card__img" >
                    </div>
                    <p class="card__txt">Oreo Shake</p>
                </div>
            </li>
            <li class="glide__slide">
                <div class="card">
                    <div class="img__container">
                        <img src="https://images.unsplash.com/photo-1579954115545-a95591f28bfc?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="shake" class="card__img" >
                    </div>
                    <p class="card__txt">Strawberry Shake</p>
                </div>
            </li>
            
          </ul>
        </div>
        <div class="glide__arrows" data-glide-el="controls">
            <button class="glide__arrow glide__arrow--left" data-glide-dir="<"><i class="fas fa-chevron fa-chevron-left"></i></button>
            <button class="glide__arrow glide__arrow--right" data-glide-dir=">"><i class="fas fa-chevron fa-chevron-right"></i></button>
        </div>
      </div>              

    </div>
  </body>
.glide__container{
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #F1E8E6;
            color: #000;
  font-family: 'Muli', sans-serif;
        }
        .glide{
            max-width: 1200px;
            background-color: #fff;
            border-radius: 2em;
            padding: 2em 4em;
            -webkit-box-shadow: 0px 17px 34px -20px #f55951;
          box-shadow: 0px 17px 34px -20px #f55951;
        }
        .glide__arrow{
            position: absolute;
            border: none;
            border-radius: 50%;
            padding: 1em;
            cursor: pointer;
            top: 45%;
        }
       
        .glide__arrow:hover,
        .glide__arrow:focus{
            transform: scale(0.7);
            outline: none;
            
        }
        .glide__arrow--left{
            left: 8px;
        }
        .glide__arrow--right{
            right: 8px;
        }
        .fa-chevron{
            font-size: 1.5rem;
            border-radius: 50%;
            color: #f55951;
            width: 1em;
            height: 1em;
            text-align: center;
            display: inline-block;
            
            transition:0.5s;
        }
.card {
  width: 180px;
  height: 250px;
  padding: 1.5em 1em 2em 1em;
  text-align: center;
}

.card:hover {
  border: 1.5px solid #F1E8E6;
  border-radius: 0.5em;
}

.card__img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin-bottom: 1em;
  -o-object-fit: cover;
     object-fit: cover;
}

.card__txt {
  font-size: 0.8rem;
  font-weight: 700;
}
<!-- Glide js -->
    <script src="https://cdn.jsdelivr.net/npm/@glidejs/glide"></script>
    <script>
        new Glide('.glide', {
            type: 'carousel',
            startAt: 0,
            perView: 5
            }).mount()
      </script>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.jsdelivr.net/npm/@glidejs/glide