Styling items on a webpage to scroll right to left in one row

Question

I have created a webpage that lists products from the database using for loop. The products are displayed in many rows where the user needs to scroll down to view them. Like this: current display

But I want the items to display on one row, where the user will scroll the items on that single row, right to left. So that it displays like this: desired display

Which code do I add so as to achieve the above? Below is my current code:

html

<div class="container my-5">
  <h2 class="my-5">Products</h2>
  <div class="row">
    {% for product in object_list %}
    <div class="col-md-6 col-sm-12 col-lg-3">
      <figure class="card card-product">
        <div class="img-wrap">
          <a href="{% url 'shopapp:productdetail' pk=product.pk %}"><img src="/media/{{ product.mainimage }}" style="width:100%; height:300px;"></a>
        </div>

        <figcaption class="info-wrap">
          <h6 class="title">{{ product.name }}</h6>
          <div class="action-wrap">
            <div class="price-wrap h5">
              <span class="price-new">${{ product.price|floatformat:2 }}</span>
              <span class="price-old"><strike>${{ product.oldprice|floatformat:2 }}</strike></span>
            </div>
          </div>
        </figcaption>

      </figure>
    </div>
    {% endfor %}
  </div>
</div>

css

.card{
    height: 385px;
    margin-bottom: 20px;
  }

  .card-product:after{
    content: ""
    display: table;
    clear: both;
    visibility: hidden;
  }

  .card-product .price-new, .card-product .price{
    margin-right: 5px;
    color: #0000FF;
  }

  .card-product .price-old{
    color: #ff0000;
  }

  .card-product .image-wrap{
    border-radius: 3px 3px 0 0;
    overflow: hidden;
    position: relative;
    height: 220px;
    text-align: center;
  }

  .card-product .img-wrap img{
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
  }

  .card-product .info-wrap{
    overflow: hidden;
    padding: 15px;
    border-top: 1px solid #eee;
  }

  .card-product .action-wrap{
    padding-top: 4px;
    margin-top: 4px;
  }

  .card-product .bottom-wrap{
    padding: 15px;
    border-top: 1px solid #eee;
  }

  .card-product .title{
    margin-top: 0px;
  }

What do I need to add to achieve the desired display?

score 1 · Answer 1 · answered Jul 08 '21 at 20:13

1

Display your products based on a range, then change that range when an arrow button is clicked.

answered Jul 08 '21 at 20:13

user3875913

245
2
11

This is a smart idea. Thank you. And how can I enable swipe. Such that, the range can change with a left/right swipe too, not only button click. Like for a mobile device, user can also slide right to left – Nduati Jul 09 '21 at 19:02
1

https://stackoverflow.com/questions/53192433/how-to-detect-swipe-in-javascript this should help – user3875913 Jul 16 '21 at 08:23

Styling items on a webpage to scroll right to left in one row

1 Answers1