CODEWITHSUNDEEP
jqueryhtmlcsscarousel
DearBee
DearBee

Reputation: 426

Create carousel out of two rows (lists) with CSS, jQuery

I'm working on a closed platform (JetShop) and while I can add scripts of any type, I can't access the prebuilt ones to change them to my client needs.

I need to make a carousel out of related products that are placed into two rows, like this:

<div class="all-products">
  <ul class="one-row first-row">
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
  </ul>
  <ul class="one-row second-row">
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
  </ul>
</div>

And CSS that follows:

.one-row {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.second-row {
  margin-top: 20px;
}

.item {
  display: inline-block;
  width: 22%;
  height: 100px;
  margin-right: 3%;
  background: gray;
}

.item:nth-of-type(4n+0) {
  margin-right: 0;
}

This is how it behaves: https://jsfiddle.net/sr3rnm84/

So to be clear, I can't edit any HTML on this page and I need to place all 8 items into one line by using CSS. Only then I can use jQuery to make carousel out of it.

Any thoughts?

Upvotes: 2

Views: 898

Answers (1)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167192

The answer is white-space: nowrap:

.one-row {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  white-space: nowrap;
}

If you want to place all the 8 items in a single row, please use the same for .all-products as well:

.all-products {
  white-space: nowrap;
}

Fiddle: https://jsfiddle.net/5p6xo6fh/ and https://jsfiddle.net/zdmxcb5g/

Upvotes: 1

Related Questions