Menu icon Foundation
Orbit slider problems

Hi

I try to make a Orbit slider with the new Foundation 6 but this doesnt works, the animations dont start and dont show all the slides. Can somebody Help me?

This is the HTML code

<div class="slider-container-contents orbit" aria-label="" data-orbit>
    							<ul class="slider-works 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="slide-work work-cafebuendia1 orbit-slide is-active"> </li>
									<li class="slide-work work-cafebuendia2 orbit-slide"> </li>
									<li class="slide-work work-cafebuendia3 orbit-slide"> </li>
								</ul>
							</div>
            

         

This is the CSS Classes

.slider-container-contents{
    display: block;
	float: left;
	width: 100%;
	height: auto;
	height: 100%;
	z-index: 2;
}
.slider-works{
	display: block;
	float: left;
	width: 100%;
	height: 100%;
}
.slide-work{
	display: block;
	float: left;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
}
            

         

Im already Call the JS and CSS:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    	<script src="js/foundation.min.js"></script>
		<script>
			$(document).foundation();
		</script>
            

         

Thanks for all the Help

OrbitsliderWebsite

Hi

I try to make a Orbit slider with the new Foundation 6 but this doesnt works, the animations dont start and dont show all the slides. Can somebody Help me?

This is the HTML code

<div class="slider-container-contents orbit" aria-label="" data-orbit>
    							<ul class="slider-works 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="slide-work work-cafebuendia1 orbit-slide is-active"> </li>
									<li class="slide-work work-cafebuendia2 orbit-slide"> </li>
									<li class="slide-work work-cafebuendia3 orbit-slide"> </li>
								</ul>
							</div>
            

         

This is the CSS Classes

.slider-container-contents{
    display: block;
	float: left;
	width: 100%;
	height: auto;
	height: 100%;
	z-index: 2;
}
.slider-works{
	display: block;
	float: left;
	width: 100%;
	height: 100%;
}
.slide-work{
	display: block;
	float: left;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
}
            

         

Im already Call the JS and CSS:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    	<script src="js/foundation.min.js"></script>
		<script>
			$(document).foundation();
		</script>
            

         

Thanks for all the Help

Brian Tan over 3 years ago

Hi Juan,

Orbit requires motion-ui for animation. You should include motion-ui.css. A sass generated app.css would include motion-ui.css

Or you can try adding data-use-m-u-i="false" or data-options="useMUI:false" to your data-orbit div.

Juan David Perafan over 3 years ago

Thanks Brian for your help. We Already Use Motion-ui.css and works perfect!!

Thanks a lot

Steffen Matthes about 2 years ago

Hello,

is there an update for the orbit slider under foundation 6 with the basic template? The motion-ui.css is included and the ather options dosn't work. :|

Many thanks, Steffen