Menu icon Foundation
Orbit - images aren't full size

Hi,

I'm having troubles with orbit, the image slider. I have it take only half of the row (there will be text next to it), so my code is following:

 

<div class="small-12 medium-6 columns">

            <div class="orbit" role="region" aria-label="" data-orbit>
              <ul class="orbit-container">

                <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>&#9664;&#xFE0E;</button>
                <button class="orbit-next"><span class="show-for-sr">Next Slide</span>&#9654;&#xFE0E;</button>

                <li class="is-active orbit-slide">
                  <img class="orbit-image" src="assets/exteriery/img-02.jpg" alt="">
                </li>               

                <li class="orbit-slide">
                  <img class="orbit-image" src="assets/exteriery/img-06.jpg" alt="">
                </li>

                <li class="orbit-slide">
                  <img class="orbit-image" src="assets/exteriery/img-11.jpg" alt="">
                </li>
              </ul>
              <nav class="orbit-bullets">
                <button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>
                <button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
                <button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
                <button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
                <button data-slide="4"><span class="show-for-sr">Fifth slide details.</span></button>
                <button data-slide="5"><span class="show-for-sr">Sixth slide details.</span></button>

              </nav>
            </div> <!-- orbit -->
          </div> <!-- -->

<div class="small-12 medium-6 columns wrapper"></div>

 

The problem I'm having is that the images don't take the full size of the orbit container. This is what it looks like:

.orbit has red border

.orbit-container has green border and yellow background.

I have not styled .orbit or .orbit-container in any other way.

 

As the image shows, the image does not take the full width of .orbit, which makes the arrows not centred as well. I have tried to play with different widths, paddings, margins, but nothing seems to work. 

What do I need to do to fix this?

Thank you.

Orbitcsshtmlimagesfoundation 6

Hi,

I'm having troubles with orbit, the image slider. I have it take only half of the row (there will be text next to it), so my code is following:

 

<div class="small-12 medium-6 columns">

            <div class="orbit" role="region" aria-label="" data-orbit>
              <ul class="orbit-container">

                <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>&#9664;&#xFE0E;</button>
                <button class="orbit-next"><span class="show-for-sr">Next Slide</span>&#9654;&#xFE0E;</button>

                <li class="is-active orbit-slide">
                  <img class="orbit-image" src="assets/exteriery/img-02.jpg" alt="">
                </li>               

                <li class="orbit-slide">
                  <img class="orbit-image" src="assets/exteriery/img-06.jpg" alt="">
                </li>

                <li class="orbit-slide">
                  <img class="orbit-image" src="assets/exteriery/img-11.jpg" alt="">
                </li>
              </ul>
              <nav class="orbit-bullets">
                <button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>
                <button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
                <button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
                <button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
                <button data-slide="4"><span class="show-for-sr">Fifth slide details.</span></button>
                <button data-slide="5"><span class="show-for-sr">Sixth slide details.</span></button>

              </nav>
            </div> <!-- orbit -->
          </div> <!-- -->

<div class="small-12 medium-6 columns wrapper"></div>

 

The problem I'm having is that the images don't take the full size of the orbit container. This is what it looks like:

.orbit has red border

.orbit-container has green border and yellow background.

I have not styled .orbit or .orbit-container in any other way.

 

As the image shows, the image does not take the full width of .orbit, which makes the arrows not centred as well. I have tried to play with different widths, paddings, margins, but nothing seems to work. 

What do I need to do to fix this?

Thank you.

Rafi Benkual over 2 years ago

Have you tried making the images width 100%

.orbit-image img {
  width: 100%
}

Z K over 2 years ago

Yes, I have, and nothing has changed.

I tried to re-create the same situation on CodePen, and there the image shows full width. I don't understand why it does this on my local setup. I have even copied the code from Foundation docs (and inserted some images from google images), and it does the same, so the problem must be somewhere in my code.