Menu icon Foundation
Orbit slider not loading

Hi,

 

Ive been stuck for the past few hours with the latest download of foundation.

I have created a standard HTML page and wanted to use Orbit with some content inside.

I have used orbit before with previous versions of foundation and have never had a problem but for some reason its just not initialising. Can anyone figure out whats going wrong?

 

<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Amex</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/app.css"> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>


</head>
<body>

<nav class="header-container">
<div class="row">
  <ul class="menu">
   <li class="menu-text float-right"> <a href="about.html" class="twitter-btn button inline">Share</a>
<a href="#features" class="fbook-btn button inline">Share</a> </li>
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
    <li><a href="#">Four</a></li>
  </ul>
 
</div>

</nav>

<section>
<div class="row">

<ul class="example-orbit" data-orbit>
  <li>
    <img src="../assets/img/examples/satelite-orbit.jpg" alt="slide 1" />
    <div class="orbit-caption">
      Caption One.
    </div>
  </li>
  <li class="active">
    <img src="../assets/img/examples/andromeda-orbit.jpg" alt="slide 2" />
    <div class="orbit-caption">
      Caption Two.
    </div>
  </li>
  <li>
    <img src="../assets/img/examples/launch-orbit.jpg" alt="slide 3" />
    <div class="orbit-caption">
      Caption Three.
    </div>
  </li>
</ul>

</div>
</section>


<script src="js/vendor/jquery.js"></script>   

<script src="js/vendor/foundation.min.js"></script>    

<script src="js/vendor/what-input.js"></script> 

<script src="js/app.js"></script>



  <script>
  (function($) {
	$(document).foundation({
		orbit: {
			slide_number: false,
			resume_on_mouseout: true,					
			next_on_click: false,
			timer_speed: 3000,
			animation_speed: 200
		}
	});	
	})(jQuery);		
</script>  

</body>
</html>

 

foundation orbit slider

Hi,

 

Ive been stuck for the past few hours with the latest download of foundation.

I have created a standard HTML page and wanted to use Orbit with some content inside.

I have used orbit before with previous versions of foundation and have never had a problem but for some reason its just not initialising. Can anyone figure out whats going wrong?

 

<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Amex</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/app.css"> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>


</head>
<body>

<nav class="header-container">
<div class="row">
  <ul class="menu">
   <li class="menu-text float-right"> <a href="about.html" class="twitter-btn button inline">Share</a>
<a href="#features" class="fbook-btn button inline">Share</a> </li>
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
    <li><a href="#">Four</a></li>
  </ul>
 
</div>

</nav>

<section>
<div class="row">

<ul class="example-orbit" data-orbit>
  <li>
    <img src="../assets/img/examples/satelite-orbit.jpg" alt="slide 1" />
    <div class="orbit-caption">
      Caption One.
    </div>
  </li>
  <li class="active">
    <img src="../assets/img/examples/andromeda-orbit.jpg" alt="slide 2" />
    <div class="orbit-caption">
      Caption Two.
    </div>
  </li>
  <li>
    <img src="../assets/img/examples/launch-orbit.jpg" alt="slide 3" />
    <div class="orbit-caption">
      Caption Three.
    </div>
  </li>
</ul>

</div>
</section>


<script src="js/vendor/jquery.js"></script>   

<script src="js/vendor/foundation.min.js"></script>    

<script src="js/vendor/what-input.js"></script> 

<script src="js/app.js"></script>



  <script>
  (function($) {
	$(document).foundation({
		orbit: {
			slide_number: false,
			resume_on_mouseout: true,					
			next_on_click: false,
			timer_speed: 3000,
			animation_speed: 200
		}
	});	
	})(jQuery);		
</script>  

</body>
</html>

 

Brian Tan over 3 years ago

Foundaiton 6 changed orbit options and try initialize foundation without parameter. then initialize orbit separately.

<ul id="myorbit" class="orbit" data-orbit>
<script>
$(document).foundation();
var myOrbit = new Foundation.Orbit($('#myorbit'), {
  bullets: false,
  pauseOnHover: true,					
  timerDelay: 3000
});
</script>