Как сделать галерею карточек в виде карусели

Пользователь создает карточки. Как можно реализовать идею, чтобы сформировывалась галерея карточек в виде карусели, чтобы пользователь мог листать их. На данном этапе карточки располагаются по горизонтали по 3 штуки, а дальше смещаются вниз.

html код

{% block contant %}
    {% if tasks %} 
    <div class="container">
        <div class="row"></div>
        {% for el in tasks %}
                    <div class="card col-sm-6">
                        <div class="front">
                            <div class="front-content middle">
                                <h2>{{ el.title }}</h2>
                            </div>
                        </div>
                        <div class="back">
                            <div class="back-content middle">
                                <h2>{{ el.task }}</h2>
                            </div>
                        </div>
                    </div>
        {% endfor %}
        </div>
    </div>
    {% else %}
    <div class="card middle"> 
        <div class="front-content middle" >
            <h2 class="text-white">У Вас нет карточек</h2>
        </div>
    </div>
    {% endif %}
{% endblock %}

css

*{
    margin: 0;
    padding: 0;
    text-decoration: none;
    font-family: "montserrat";
  }

body{
  background-image: url(https://sun9-2.userapi.com/impg/q-Eqf80s58QRuG_JYJB_pwySsSIvLInCD1SkRg/aj1e0-Vo6b0.jpg?size=1600x890&quality=95&sign=cfd9c0cdeb175a5666f8035229cac400&type=album);
  background-size: cover;
  /* background-position: center center;
  background-attachment: fixed; */
}

.middle{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.card{
  display: inline-block;
  margin-right: 40px;
  /* float: left; */
  cursor: pointer;
  width: 340px;
  height: 480px;
  margin-top: 15%;
}
.front,.back{
  width: 100%;
  height: 100%;
  overflow: hidden;
  backface-visibility: hidden;
  position: absolute;
  transition: transform .6s linear;
  padding: 5rem 2.5rem;

}
.front{
  border-radius: 5%;
  background: #f1f1f1;
  transform: perspective(600px) rotateY(0deg);
}
.back{
  border-radius: 5%;
  background: #f1f1f1;
  transform: perspective(600px) rotateY(180deg);
}

.front-content{
  color: #2c3e50;
  text-align: center;
  width: 100%;
}

.back-content{
  color: #2c3e50;
  text-align: center;
  width: 100%;
}

.card{
  background-color: rgba(189, 189, 189, 0);
  background-clip: border-box;
  border: none; 
  border-radius: 5%;
}

.card:hover > .front{
  transform: perspective(600px) rotateY(-180deg);
}
.card:hover > .back{
  transform: perspective(600px) rotateY(0deg);
}

Вернуться на верх