Menu icon Foundation
Orbit with Foundation 6

Hello All,
I am trying to get the Orbit working with foundation 6, but I get a vertical list of images. What I am trying to get is a list for 4 images and up on sliding it will show one new image. See the code attached, and help will be appreciated.
Thank you
Roy

            
    <div class="orbit" role="region" aria-label="Categories Slider" data-orbit>
        <ul class="orbit-container">
            <button class="orbit-previous" aria-label="previous"><span class="show-for-sr">Previous Slide</span>&#9664;</button>
            <button class="orbit-next" aria-label="next"><span class="show-for-sr">Next Slide</span>&#9654;</button>
            <li class="orbit-slide is-active">
                <li class="orbit-slide">
                        <img src="//lorempixel.com/270/170/?gardening">
                        <strong>Gardening</strong>
                </li>
                        <img src="//lorempixel.com/270/170/?trimming">
                        <strong>Trimming</strong>
                </li>
                <li class="orbit-slide">
                        <img src="//lorempixel.com/270/170/?testing1">
                        <strong>Testing1</strong>
                </li>
                <li class="orbit-slide">
                        <img src="//lorempixel.com/270/170/?testing2">
                        <strong>Testing2</strong>
                </li>
                <li class="orbit-slide">
                        <img src="//lorempixel.com/270/170/?testing3">
                        <strong>Testing3</strong>
                </li>
                <li class="orbit-slide">
                        <img src="//lorempixel.com/270/170/?testing4">
                        <strong>Testing4</strong>
                </li>
            </ul>
        </div>
        <script>
            $(document).foundation({
                orbit: {
                    animation: 'slide',
                    timer_speed: 1000,
                    pause_on_hover: true,
                    animation_speed: 500,
                    navigation_arrows: true,
                    bullets: false
                }
            });
        </script>
         

Orbitfoundation 6

Hello All,
I am trying to get the Orbit working with foundation 6, but I get a vertical list of images. What I am trying to get is a list for 4 images and up on sliding it will show one new image. See the code attached, and help will be appreciated.
Thank you
Roy

            
    <div class="orbit" role="region" aria-label="Categories Slider" data-orbit>
        <ul class="orbit-container">
            <button class="orbit-previous" aria-label="previous"><span class="show-for-sr">Previous Slide</span>&#9664;</button>
            <button class="orbit-next" aria-label="next"><span class="show-for-sr">Next Slide</span>&#9654;</button>
            <li class="orbit-slide is-active">
                <li class="orbit-slide">
                        <img src="//lorempixel.com/270/170/?gardening">
                        <strong>Gardening</strong>
                </li>
                        <img src="//lorempixel.com/270/170/?trimming">
                        <strong>Trimming</strong>
                </li>
                <li class="orbit-slide">
                        <img src="//lorempixel.com/270/170/?testing1">
                        <strong>Testing1</strong>
                </li>
                <li class="orbit-slide">
                        <img src="//lorempixel.com/270/170/?testing2">
                        <strong>Testing2</strong>
                </li>
                <li class="orbit-slide">
                        <img src="//lorempixel.com/270/170/?testing3">
                        <strong>Testing3</strong>
                </li>
                <li class="orbit-slide">
                        <img src="//lorempixel.com/270/170/?testing4">
                        <strong>Testing4</strong>
                </li>
            </ul>
        </div>
        <script>
            $(document).foundation({
                orbit: {
                    animation: 'slide',
                    timer_speed: 1000,
                    pause_on_hover: true,
                    animation_speed: 500,
                    navigation_arrows: true,
                    bullets: false
                }
            });
        </script>
         
Jordan Bommelje over 3 years ago

Hey, Roy!

Try this:

$(document).foundation();
$(document).ready(function(){
    var slider = new Foundation.Orbit({
        animation: 'slide',
        timer_speed: 1000,
        pause_on_hover: true,
        animation_speed: 500,
        navigation_arrows: true,
        bullets: false
    });
});

I'm not much of a Javascript developer, so there might be another way of doing it, but I believe "$(document).foundation();" will initialize the foundation core, then in "$(document).ready(function()" you can adjust the objects. I tested this and it worked!

-Jordan

Roy Finaly over 3 years ago

Jordan,
Thank you for your help, it does works, I appreciate your help.
Roy