Make a slider on cards with three indicator dots

Question

I need to make a slider on the cards with three indicator dots. I have 4 cards on the page, I want me to add cards, and they just scroll, and not go to a new line.

.row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto;
  max-width: 1000px;
}

.card {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
  margin: 10px;
  padding: 10px;
  text-align: center;
  width: calc(25% - 20px);
  background-color: #fff;
  border: 3px solid #000;
}

.card img {
  max-width: 100%;
}

.card p {
  font-size: 20px;
  font-weight: bold;
  margin-top: 10px;
}

<div class="slider">
  <div class="row">
    <div class="card">
      <img src="https://via.placeholder.com/300x200" alt="Product 1">
      <p>$19.99</p>
    </div>
    
    <div class="card">
      <img src="https://via.placeholder.com/300x200" alt="Product 2">
      <p>$29.99</p>
    </div>
  </div>

Answer 1

You'll want to use a width on the parent with overflow-x:scroll and flex-wrap: nowrap;

.wrapper {
    width: 100%;
    overflow-x: scroll;
    border: 1px solid blue;
    background: wheat;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.card {
    border: 1px solid red;
    padding: 80px;
    margin: 0 10px;
    
}

<div class="wrapper">
  <div class="card">
    Card 1
  </div>
  <div class="card">
    Card 2
  </div>
  <div class="card">
    Card 3
  </div>
  <div class="card">
    Card 4
  </div>
  <div class="card">
    Card 5
  </div>
  <div class="card">
    Card 6
  </div>
  <div class="card">
    Card 7
  </div>
  <div class="card">
    Card 8
  </div>
</div>

https://jsfiddle.net/slingtruchoice/v8Lkp9zm/

If you want it to move on its own with indicator dots, you'll need to use javascript. There are thousands of prebuilt ones you can find online if you search "scrolling carousel"