Menu icon Foundation
Orbit Slider F6 control external links

Hi everyone

I have the next issue:

In Foundation we can create a Orbit Slider and control this with external links of the Orbit Slider like the next example: http://www.buendia.com/productos.html

 

I saw the documentation in the new Orbit Slider for F6 Sites and this option doesn't appear. Somebody knows how i can do this: Control the slider with external buttons.

 

Thanks

Orbitorbit sliderfoundation 6Orbit Controls

Hi everyone

I have the next issue:

In Foundation we can create a Orbit Slider and control this with external links of the Orbit Slider like the next example: http://www.buendia.com/productos.html

 

I saw the documentation in the new Orbit Slider for F6 Sites and this option doesn't appear. Somebody knows how i can do this: Control the slider with external buttons.

 

Thanks

Rafi Benkual 9 months ago

Hi Juan,

You can use the Orbit bullets to control it.

<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>
 </nav>

What's the design problem you are trying solve? Maybe we can point you in a better direction

Juan David Perafan 2 months ago

Hi Rafi, thanks for your help!

But my problem it´s i need a custom made buttons to control the Orbit Slider, like this: 

<ul class="list-buttons" data-deep-link="true">
                            <li class="button-container large-3 medium-3 small-6 columns">
                                <a class="button-list">
                                    <div class="ico-hand"> </div>
                                    <div class="elements-button">
                                        <h3 class="name-tool">Herramientas</h3>
                                        <div class="tool-container"><img class="tool-image" src="images/tool01-list.png"> </div>
                                    </div>
                                </a>
                            </li>
                            <li class="button-container large-3 medium-3 small-6 columns">
                                <a class="button-list">
                                    <div class="ico-hand"> </div>
                                    <div class="elements-button">
                                        <h3 class="name-tool">Herramientas</h3>
                                        <div class="tool-container"><img class="tool-image" src="images/tool02-list.png"> </div>
                                    </div>
                                </a>
                            </li>
                            <li class="button-container large-3 medium-3 small-6 columns">
                                <a class="button-list">
                                    <div class="ico-hand"> </div>
                                    <div class="elements-button">
                                        <h3 class="name-tool">Herramientas</h3>
                                        <div class="tool-container"><img class="tool-image" src="images/tool03-list.png"> </div>
                                    </div>
                                </a>
                            </li>
                            <li class="button-container large-3 medium-3 small-6 columns">
                                <a class="button-list">
                                    <div class="ico-hand"> </div>
                                    <div class="elements-button">
                                        <h3 class="name-tool">Herramientas</h3>
                                        <div class="tool-container"><img class="tool-image" src="images/tool04-list.png"> </div>
                                    </div>
                                </a>
                            </li>
                        </ul>

I this case, each <a> calls a slide in the Orbit Slide.

Before, in F5 we can use data-orbit-link to do this, how i can make the same with F6 ?

Thanks

Wyeth Myers 2 months ago

 You could try playing around with the markup and add to the CSS. Hope this helps.

HTML 

<ul class="orbit-container">
	<li class="orbit-previous"><span class="show-for-sr">Previous Slide</span>&#9664;&#xFE0E;</li>
	<li class="orbit-next"><span class="show-for-sr">Next Slide</span>&#9654;&#xFE0E;</li>
	<li class="is-active orbit-slide">
	</li>
	<li class="orbit-slide">
	</li>
	<li class="orbit-slide">
	</li>
</ul>

 CSS--> This is where you get to custom design your buttons.

.orbit-previous, .orbit-next {
    outline: 0;
    background: linear-gradient(rgba(43,44,45,0.7),rgba(43,44,45,0.7));
    color: white;
}

Juan David Perafan 2 months ago

Thanks Wyeth, but in my case i dont need to custom the Orbit, i need that other buttons, outside of the Orbit, can control the slider.

In foundation 5 you can do this through data-orbit-link and the id oh the slide, but in F6 this doesn't show this function.