White space between orbit slides

4

Replies

Follow
by

Alan Smithee
- Framework: Sites
- Tags: Orbit slider padding images

I've got an orbit slider that shows white space between slides. I'm stumped as to why this is happening.

* there is no padding/margin being applied
* the images are all exaclty the same size and dimensions
* the white space is not uniform - it sometimes appears wider, and sometimes doesn't appear at all.

Any thoughts?

<ul class="orbit dishes" data-orbit data-options="timer: false; timer_container_class: hide; timer_paused_class: paused; timer_progress_class: hide; slide_number_class: hide; bullets: false;">
  <li>
    <div>
      <img src="/images/rooms-01@2x.jpg">
    </div>
  </li>

  <li>
    <div>
      <img src="/images/rooms-02@2x.jpg">
    </div>
  </li>

  <li>
    <div>
      <img src="/images/rooms-03@2x.jpg">
    </div>
  </li>

</ul>

4

Replies

Follow
White space between orbit slides

by

Alan Smithee Wednesday, January 29, 2014 at 2:22 PM EST

Orbit slider padding images

I've got an orbit slider that shows white space between slides. I'm stumped as to why this is happening.

Any thoughts?

<ul class="orbit dishes" data-orbit data-options="timer: false; timer_container_class: hide; timer_paused_class: paused; timer_progress_class: hide; slide_number_class: hide; bullets: false;">
  <li>
    <div>
      <img src="/images/rooms-01@2x.jpg">
    </div>
  </li>

  <li>
    <div>
      <img src="/images/rooms-02@2x.jpg">
    </div>
  </li>

  <li>
    <div>
      <img src="/images/rooms-03@2x.jpg">
    </div>
  </li>

</ul>

Rafi Benkual over 5 years ago

I made a codepen with your code and slowed down the transition. I see a tiny whitespace but its really hard to tell at faster speeds. Removing the <div's in the <li's seems to clean it up.

http://cdpn.io/vmqhu (click edit pen to see code)