0

I am using a tempalte downloaded from tabler and you can see the demo of that template at https://preview.tabler.io/ and i want to scroll small cards left and right at present they are 6 if i will increased its count then they are displaying below but i want them in a row that can be scrollable horizontally.

<div class="row row-cards">
          <div class="col-6 col-sm-4 col-lg-2">
            <div class="card">
              <div class="card-body p-3 text-center">
                <div class="text-right text-green">
                  6%
                  <i class="fe fe-chevron-up"></i>
                </div>
                <div class="h1 m-0">43</div>
                <div class="text-muted mb-4">New Tickets</div>
              </div>
            </div>
          </div>
          <div class="col-6 col-sm-4 col-lg-2">
            <div class="card">
              <div class="card-body p-3 text-center">
                <div class="text-right text-red">
                  -3%
                  <i class="fe fe-chevron-down"></i>
                </div>
                <div class="h1 m-0">17</div>
                <div class="text-muted mb-4">Closed Today</div>
              </div>
            </div>
          </div>
          <div class="col-6 col-sm-4 col-lg-2">
            <div class="card">
              <div class="card-body p-3 text-center">
                <div class="text-right text-green">
                  9%
                  <i class="fe fe-chevron-up"></i>
                </div>
                <div class="h1 m-0">7</div>
                <div class="text-muted mb-4">New Replies</div>
              </div>
            </div>
          </div>
          <div class="col-6 col-sm-4 col-lg-2">
            <div class="card">
              <div class="card-body p-3 text-center">
                <div class="text-right text-green">
                  3%
                  <i class="fe fe-chevron-up"></i>
                </div>
                <div class="h1 m-0">27.3K</div>
                <div class="text-muted mb-4">Followers</div>
              </div>
            </div>
          </div>
          <div class="col-6 col-sm-4 col-lg-2">
            <div class="card">
              <div class="card-body p-3 text-center">
                <div class="text-right text-red">
                  -2%
                  <i class="fe fe-chevron-down"></i>
                </div>
                <div class="h1 m-0">$95</div>
                <div class="text-muted mb-4">Daily Earnings</div>
              </div>
            </div>
          </div>
          <div class="col-6 col-sm-4 col-lg-2">
            <div class="card">
              <div class="card-body p-3 text-center">
                <div class="text-right text-red">
                  -1%
                  <i class="fe fe-chevron-down"></i>
                </div>
                <div class="h1 m-0">621</div>
                <div class="text-muted mb-4">Products</div>
              </div>
            </div>
          </div>
        </div>
Rajesh Krishna
  • 5
  • 3

2 Answers2

0

I would suggest that you use the tag containing images, within an IFrame, to allow scrolling:

Index.htm

<iframe src="images.htm"></iframe>

images.htm

<span><img src="IMAGE.png"></img><img src="IMAGE.png"></img><img src="IMAGE.png"></img></span>

This is just a thing I wrote off the top of my head, it may have problems

Jake t
  • 141
  • 2
  • 13
0

Based on Overflow-x not working

.row {
  width: 100%; /* Your choice*/
  overflow-x: auto;
  white-space: nowrap;
}

.row>div {
  border: 1px solid;
  min-width: 150px; /* Your choice*/
  display: inline-block;
}
<div class="row row-cards">
  <div class="col-6 col-sm-4 col-lg-2">
    <div class="card">
      <div class="card-body p-3 text-center">
        <div class="text-right text-green">
          6%
          <i class="fe fe-chevron-up"></i>
        </div>
        <div class="h1 m-0">43</div>
        <div class="text-muted mb-4">New Tickets</div>
      </div>
    </div>
  </div>
  <div class="col-6 col-sm-4 col-lg-2">
    <div class="card">
      <div class="card-body p-3 text-center">
        <div class="text-right text-red">
          -3%
          <i class="fe fe-chevron-down"></i>
        </div>
        <div class="h1 m-0">17</div>
        <div class="text-muted mb-4">Closed Today</div>
      </div>
    </div>
  </div>
  <div class="col-6 col-sm-4 col-lg-2">
    <div class="card">
      <div class="card-body p-3 text-center">
        <div class="text-right text-green">
          9%
          <i class="fe fe-chevron-up"></i>
        </div>
        <div class="h1 m-0">7</div>
        <div class="text-muted mb-4">New Replies</div>
      </div>
    </div>
  </div>
  <div class="col-6 col-sm-4 col-lg-2">
    <div class="card">
      <div class="card-body p-3 text-center">
        <div class="text-right text-green">
          3%
          <i class="fe fe-chevron-up"></i>
        </div>
        <div class="h1 m-0">27.3K</div>
        <div class="text-muted mb-4">Followers</div>
      </div>
    </div>
  </div>
  <div class="col-6 col-sm-4 col-lg-2">
    <div class="card">
      <div class="card-body p-3 text-center">
        <div class="text-right text-red">
          -2%
          <i class="fe fe-chevron-down"></i>
        </div>
        <div class="h1 m-0">$95</div>
        <div class="text-muted mb-4">Daily Earnings</div>
      </div>
    </div>
  </div>
  <div class="col-6 col-sm-4 col-lg-2">
    <div class="card">
      <div class="card-body p-3 text-center">
        <div class="text-right text-red">
          -1%
          <i class="fe fe-chevron-down"></i>
        </div>
        <div class="h1 m-0">621</div>
        <div class="text-muted mb-4">Products</div>
      </div>
    </div>
  </div>
</div>
Zechariah Raman
  • 17
  • 1
  • 7