Menu icon Foundation
Foundation 5 Orbit Slider Issues

I'm having a couple buggy issues with my Orbit slider in both Firefox 25.0.1 and Safari 7.0.

1. When the page loads, it displays all of the images stacked on top of each other with bullets next to the images, then they disappear and the slider displays properly. Not sure how to gracefully load here?

2. It seems that about 50% of the time, Orbit doesn't display the full height of the image and I have to re-load the page to try to show the full height of the image in the container. It will only show a thin strip of the images with the arrows and progress bar viewable.

Anyone know what I'm doing wrong here?

%ul.example-orbit{:'data-orbit' => ''}
  %li=image_tag 'tb_slider_1.jpg'
  %li=image_tag 'tb_slider_2.jpg'
  %li=image_tag 'tb_slider_3.jpg'
            

         

SassOrbitorbit sliderhaml

I'm having a couple buggy issues with my Orbit slider in both Firefox 25.0.1 and Safari 7.0.

1. When the page loads, it displays all of the images stacked on top of each other with bullets next to the images, then they disappear and the slider displays properly. Not sure how to gracefully load here?

2. It seems that about 50% of the time, Orbit doesn't display the full height of the image and I have to re-load the page to try to show the full height of the image in the container. It will only show a thin strip of the images with the arrows and progress bar viewable.

Anyone know what I'm doing wrong here?

%ul.example-orbit{:'data-orbit' => ''}
  %li=image_tag 'tb_slider_1.jpg'
  %li=image_tag 'tb_slider_2.jpg'
  %li=image_tag 'tb_slider_3.jpg'
            

         

Ghaida Zahran gave the most helpful answer for this post
Ghaida Zahran almost 4 years ago

For the JS plugins in Foundation to work, you will need to use the markup from the examples we provide for the plugin, including the presentational classes.

This post has been closed. No new replies can be added.

Ghaida Zahran almost 4 years ago

For the JS plugins in Foundation to work, you will need to use the markup from the examples we provide for the plugin, including the presentational classes.