Menu icon Foundation
Click on Orbit Content Slider

I am using the Orbit Slider extention but i have a problem whem i click on slide.

After the click, the slide go to a empty slide.

Obs. Using Content Sliders.

I saw the same problem in DOCS of Fundation. Content Sliders

Orbit after click

      <ul class="orbit" data-orbit>
        <li data-orbit-slide="pressao">
          <div class='center_text device_header_ok'>
            <span id='lblPressaoTitle'>Pressão</span>
          </div>
          <div class='center_text device_div'>
            <span id='lblPressaoValue' class=' device_font_value_ok device_font_value_size'>0 <small> bar</small></span>
          </div>
          <div class='center_text device_footer device_footer_color_ok' >
            <span id='lblPressaoDataHora'><small>&nbsp;</small></span>
          </div>
          <div class="panel">
            <div id="chartContainer_Pressao"  style="width: 100%"></div>
          </div>
          <div class="orbit-caption">
            Pressão
          </div>
        </li>
        <li data-orbit-slide="bateria">
          <div class='center_text device_header_ok'>
            <span id='lblBateriaTitle'>Bateria</span>
          </div>
          <div class='center_text device_div'>
            <span id='lblBateriaValue' class=' device_font_value_ok device_font_value_size'>0 <small> v</small></span>
          </div>
          <div class='center_text device_footer device_footer_color_ok' >
            <span id='lblBateriaDataHora'><small>&nbsp;</small></span>
          </div>
          <div class="panel">
            <div id="chartContainer_Bateria" style="width: 100%;"></div>
          </div>
          <div class="orbit-caption">
            Bateria
          </div>
        </li>
      </ul>
            

         

      <ul class="orbit" data-orbit>
        <li data-orbit-slide="pressao">
          <div class='center_text device_header_ok'>
            <span id='lblPressaoTitle'>Pressão</span>
          </div>
          <div class='center_text device_div'>
            <span id='lblPressaoValue' class=' device_font_value_ok device_font_value_size'>0 <small> bar</small></span>
          </div>
          <div class='center_text device_footer device_footer_color_ok' >
            <span id='lblPressaoDataHora'><small>&nbsp;</small></span>
          </div>
          <div class="panel">
            <div id="chartContainer_Pressao"  style="width: 100%"></div>
          </div>
          <div class="orbit-caption">
            Pressão
          </div>
        </li>
        <li data-orbit-slide="bateria">
          <div class='center_text device_header_ok'>
            <span id='lblBateriaTitle'>Bateria</span>
          </div>
          <div class='center_text device_div'>
            <span id='lblBateriaValue' class=' device_font_value_ok device_font_value_size'>0 <small> v</small></span>
          </div>
          <div class='center_text device_footer device_footer_color_ok' >
            <span id='lblBateriaDataHora'><small>&nbsp;</small></span>
          </div>
          <div class="panel">
            <div id="chartContainer_Bateria" style="width: 100%;"></div>
          </div>
          <div class="orbit-caption">
            Bateria
          </div>
        </li>
      </ul>
            

         

      <ul class="orbit" data-orbit>
        <li data-orbit-slide="pressao">
          <div class='center_text device_header_ok'>
            <span id='lblPressaoTitle'>Pressão</span>
          </div>
          <div class='center_text device_div'>
            <span id='lblPressaoValue' class=' device_font_value_ok device_font_value_size'>0 <small> bar</small></span>
          </div>
          <div class='center_text device_footer device_footer_color_ok' >
            <span id='lblPressaoDataHora'><small>&nbsp;</small></span>
          </div>
          <div class="panel">
            <div id="chartContainer_Pressao"  style="width: 100%"></div>
          </div>
          <div class="orbit-caption">
            Pressão
          </div>
        </li>
        <li data-orbit-slide="bateria">
          <div class='center_text device_header_ok'>
            <span id='lblBateriaTitle'>Bateria</span>
          </div>
          <div class='center_text device_div'>
            <span id='lblBateriaValue' class=' device_font_value_ok device_font_value_size'>0 <small> v</small></span>
          </div>
          <div class='center_text device_footer device_footer_color_ok' >
            <span id='lblBateriaDataHora'><small>&nbsp;</small></span>
          </div>
          <div class="panel">
            <div id="chartContainer_Bateria" style="width: 100%;"></div>
          </div>
          <div class="orbit-caption">
            Bateria
          </div>
        </li>
      </ul>
            

         

Orbitsliderclick

I am using the Orbit Slider extention but i have a problem whem i click on slide.

After the click, the slide go to a empty slide.

Obs. Using Content Sliders.

I saw the same problem in DOCS of Fundation. Content Sliders

Orbit after click

      <ul class="orbit" data-orbit>
        <li data-orbit-slide="pressao">
          <div class='center_text device_header_ok'>
            <span id='lblPressaoTitle'>Pressão</span>
          </div>
          <div class='center_text device_div'>
            <span id='lblPressaoValue' class=' device_font_value_ok device_font_value_size'>0 <small> bar</small></span>
          </div>
          <div class='center_text device_footer device_footer_color_ok' >
            <span id='lblPressaoDataHora'><small>&nbsp;</small></span>
          </div>
          <div class="panel">
            <div id="chartContainer_Pressao"  style="width: 100%"></div>
          </div>
          <div class="orbit-caption">
            Pressão
          </div>
        </li>
        <li data-orbit-slide="bateria">
          <div class='center_text device_header_ok'>
            <span id='lblBateriaTitle'>Bateria</span>
          </div>
          <div class='center_text device_div'>
            <span id='lblBateriaValue' class=' device_font_value_ok device_font_value_size'>0 <small> v</small></span>
          </div>
          <div class='center_text device_footer device_footer_color_ok' >
            <span id='lblBateriaDataHora'><small>&nbsp;</small></span>
          </div>
          <div class="panel">
            <div id="chartContainer_Bateria" style="width: 100%;"></div>
          </div>
          <div class="orbit-caption">
            Bateria
          </div>
        </li>
      </ul>
            

         

      <ul class="orbit" data-orbit>
        <li data-orbit-slide="pressao">
          <div class='center_text device_header_ok'>
            <span id='lblPressaoTitle'>Pressão</span>
          </div>
          <div class='center_text device_div'>
            <span id='lblPressaoValue' class=' device_font_value_ok device_font_value_size'>0 <small> bar</small></span>
          </div>
          <div class='center_text device_footer device_footer_color_ok' >
            <span id='lblPressaoDataHora'><small>&nbsp;</small></span>
          </div>
          <div class="panel">
            <div id="chartContainer_Pressao"  style="width: 100%"></div>
          </div>
          <div class="orbit-caption">
            Pressão
          </div>
        </li>
        <li data-orbit-slide="bateria">
          <div class='center_text device_header_ok'>
            <span id='lblBateriaTitle'>Bateria</span>
          </div>
          <div class='center_text device_div'>
            <span id='lblBateriaValue' class=' device_font_value_ok device_font_value_size'>0 <small> v</small></span>
          </div>
          <div class='center_text device_footer device_footer_color_ok' >
            <span id='lblBateriaDataHora'><small>&nbsp;</small></span>
          </div>
          <div class="panel">
            <div id="chartContainer_Bateria" style="width: 100%;"></div>
          </div>
          <div class="orbit-caption">
            Bateria
          </div>
        </li>
      </ul>
            

         

      <ul class="orbit" data-orbit>
        <li data-orbit-slide="pressao">
          <div class='center_text device_header_ok'>
            <span id='lblPressaoTitle'>Pressão</span>
          </div>
          <div class='center_text device_div'>
            <span id='lblPressaoValue' class=' device_font_value_ok device_font_value_size'>0 <small> bar</small></span>
          </div>
          <div class='center_text device_footer device_footer_color_ok' >
            <span id='lblPressaoDataHora'><small>&nbsp;</small></span>
          </div>
          <div class="panel">
            <div id="chartContainer_Pressao"  style="width: 100%"></div>
          </div>
          <div class="orbit-caption">
            Pressão
          </div>
        </li>
        <li data-orbit-slide="bateria">
          <div class='center_text device_header_ok'>
            <span id='lblBateriaTitle'>Bateria</span>
          </div>
          <div class='center_text device_div'>
            <span id='lblBateriaValue' class=' device_font_value_ok device_font_value_size'>0 <small> v</small></span>
          </div>
          <div class='center_text device_footer device_footer_color_ok' >
            <span id='lblBateriaDataHora'><small>&nbsp;</small></span>
          </div>
          <div class="panel">
            <div id="chartContainer_Bateria" style="width: 100%;"></div>
          </div>
          <div class="orbit-caption">
            Bateria
          </div>
        </li>
      </ul>
            

         
Shawn Hansen over 5 years ago

I can confirm this behavior, but have not been able to fix it.

Ben Goodman over 5 years ago

There was a fix posted here; http://foundation.zurb.com/forum/posts/1395-next_on_click-false-not-working

It didn't work for me though and they closed my post, so I'm unable to reply and tell them though.

I have tweeted them, hopefully we can all get this fixed.

EDIT:

I think I've fixed it.

I applied the fix posted above and then re-added the code for the slider, but this time using the image slider and not the content slider.

It seems to be a problem with the data-orbit-slide="headline-1", data-orbit-slide="headline-2" etc.

Without that, no slide when clicked.

Henry Miller over 5 years ago

Can confirm that removing the ' data-orbit-slide ' values on < li >'s seems to sort this.

Removed them to leave just plain < li ></ li >'s and I no longer get a scroll-when-click with an empty slide.