CODEWITHSUNDEEP
css
jviotti
jviotti

Reputation: 18939

Problems implementing a carousel

I'm trying to implement a responsive carousel by myself for a webpage I'm designing. I'm having some issues that may be thousends times easier to ilustrate with some screenshots, so here it goes:

enter image description here

So as you see, I have two arrows to slice the items and a horizontall scrollbar.

The arrows are floated to the left and right respectively, and the items are just inline-block divs inside a div.items container, which has a width of 90% (and overflow-x: scroll or course).

SO now, if I append another item to the DOM, I end with this:

enter image description here

Why did the fourth item go below? I'm not floating the items, and as I specified and horizontal scroll, I would expect it to be at the back and to be able to see it with the scrollbar.

What am I missing?

I'll paste relevant code:

HTML:

<div class="grid">
  <div class="left-arrow"></div>
  <div class="items">

    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>

  </div>
  <div class="right-arrow"></div>
</div>

CSS:

div.grid {
  margin-top: 20px;
  padding: 10px 75px;
  text-align: center;
  z-index: 1000;
}

div.grid .left-arrow, div.grid .right-arrow {
  position: relative;
  top: 70px;
}

div.grid .left-arrow {
  float: left;
  width: 0;
  height: 0;
  margin: 0 30px 0 -50px;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-right: 35px solid #ddd;
}

div.grid .right-arrow {
  float: right;
  width: 0;
  height: 0;
  margin: 0 -50px 0 30px;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 35px solid #ddd;
}

div.items {
  display: inline-block;
  z-index: 100;
  width: 90%;
  overflow-x: scroll;
}

div.item {
  margin: 10px;
  display: inline-block;
  position: relative;
  left: 0;  
}

EDIT: Oreilly has exactly what I'm looking forward to achieve:

http://shop.oreilly.com/category/browse-subjects/programming.do

Upvotes: 1

Views: 3085

Answers (1)

Jeffrey Blake
Jeffrey Blake

Reputation: 9709

The container is growing in height to accommodate the additional items. I believe that you should be able to get the effect you are looking for by setting a specific height on the container element.

Edit: After testing some more, it turns out setting the height won't actually have any impact on this. You need to set white-space: nowrap; to get it to actually work.

Here's the full CSS for the div.items (which is all I changed to get this to work in my tests):

div.items {
  display: inline-block;
  z-index: 100;
  width: 90%;
  overflow-x: scroll;
  white-space: nowrap;
}

Upvotes: 1

Related Questions