Menu icon Foundation
Orbit slider on loop

Hi can anyone help I would like to create a loop on the orbital slider that allows me to go from the last
back to the first slide in the sequence.

Is that possible?

Orbitsliderloopcss

Hi can anyone help I would like to create a loop on the orbital slider that allows me to go from the last
back to the first slide in the sequence.

Is that possible?

Droideka over 5 years ago

Of ourse with .orbit of foundation and
data-options="animation:slide;
pause_on_hover:true;
animation_speed:500;
navigation_arrows:true;
bullets:false;
timer_speed: 3000;"

Made you a live exemple : http://jsfiddle.net/gRtrX/83/

 <ul data-orbit data-options="animation:slide;pause_on_hover:true;animation_speed:500;navigation_arrows:true;bullets:false;timer_speed: 3000;">
     <li>
         <img src="http://lorempixel.com/1200/600" alt="slide 1"/>
         <div class="orbit-caption">
             Caption 1
         </div>
     </li>
     <li>
         <img src="http://lorempixel.com/1200/600" alt="slide 2"/>
         <div class="orbit-caption">
             Caption 2
         </div>
     </li>
</ul>

Chris over 5 years ago

Brilliant thank you Droideka

Chris over 5 years ago

Hi Droideka

I just added this to my site and it didn't seem to work :(

I have attached my code below:

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Lombard Shipping: Air, land or sea, we always deliver</title>
    <link rel="stylesheet" href="css/framework.css" />
    <link rel="stylesheet" href="css/topbar.css" />
    <link rel="stylesheet" href="css/panels.css" />
    <link rel="stylesheet" href="css/slider.css" />
    <link rel="stylesheet" href="css/visability.css" />
    <link rel="stylesheet" href="css/media.css" />
    <link rel="stylesheet" href="css/typograpghy.css" />

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

    <link href='http://fonts.googleapis.com/css?family=Titillium+Web:300,400,600,700,900,400italic' rel='stylesheet' type='text/css'>

<style  type="text/css"> .gradient{    
background: #0d2647; /* for non-css3 browsers */

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#F5F5F5'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #ccc,  #000); /* for firefox 3.6+ */} 
</style>
  </head>


<body>
  <div class="row"><!-- main row -->  

    <div class="breakline"></div>
      <div id="container" class="small-12"><!-- container -->

        <div class="row"><!--row for top bar-->
          <section id="nav" class="medium-11 columns medium-centered columns large-11 columns large-centered columns">  
            <nav class="top-bar" data-topbar>
              <ul class="title-area">
                <li class="name"><a href="index.html"><img src="img/lombard_logo.svg"></a></li>
                <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
              </ul>
                <div id="calltoaction" class="show-for-medium-up"> 
                  <strong style="color:#E98300; text-decoration:none;">E:
                  </strong>[email protected]&nbsp;&nbsp;
                  <strong style="color:#E98300; text-decoration:none;">T:
                  </strong> +44 (0)1473 243800
                </div>

                  <section class="top-bar-section">
                    <!-- Right Nav Section -->
                    <ul class="right">
                      <li class="">
                        <a href=".html">About</a>
                      </li>
                      <li class="">
                        <a href=".html">Locations</a>
                      </li>
                      <li class="">
                        <a href=".html">Imports</a>
                      </li>
                      <li class="">
                        <a href=".html">Exports</a>
                      </li>
                      <li class="">
                        <a href=".html">UK Logistics</a>
                      </li>
                      <li class="">
                        <a href=".html">Irish Logistics</a>
                      </li>
                      <li class="has-dropdown">
                        <a href=".html">News</a>
                        <ul class="dropdown">
                          <li><a href="#">First link in dropdown</a></li>
                        </ul>
                      </li>
                      <li class="">
                        <a href="contact.html">Contact</a>
                      </li>
                    </ul>
                  </section>
            </nav>
          </section>
        </div><!--row for top bar-->


<!-- slider -->
<div class="row"><!-- row for slider -->
<div class="medium-11 columns medium-centered columns large-11 large-centered columns show-for-medium-up"><!-- container for slider -->
  <ul class="example-orbit-content" data-orbit data-options="animation:slide;pause_on_hover:true;animation_speed:500;navigation_arrows:true;bullets:true;timer_speed: 3000;"><!-- slider listing -->

    <li data-orbit-slide=""><!-- slider 1 -->
      <div class="hero">
        <div class="row">
          <div class="image-slider"> <img src="img/sliderone.jpg"></div>
            <div id="hero-desc" class="medium-6 columns large-6 small-6 small-push-6 columns">
            <p class="slidegrey">Our promise</p>
            <h1>Air, land or sea,<br/>we always deliver</h1>
            <p class="slideorange">Providing both domestic and international logistics, we work in partnership with clients to offer a range of solutions.</p>
          </div>
        </div>
      </div>
    </li><!-- slider 1 -->

    <li data-orbit-slide=""><!-- slider 2 -->
      <div class="hero">
        <div class="row">
          <div class="image-slider"> <img src="img/slidertwo.jpg"></div>
            <div id="hero-desc" class="medium-6 large-6 small-6 small-push-6 columns"> 
            <p class="slidegrey">Industry Knowledge</p>
            <h1>International logistics, Shipping and Forwarding</h1>
            <p class="slideorange">With a heritage in shipping going back over a quarter of a century,  Lombard Shipping plc continues to be at the forefront of service and quality. </p>
          </div>
        </div>
      </div><!-- slider 2 -->
    </li>   


    <li data-orbit-slide=""><!-- slider 3 -->
      <div class="hero">
        <div class="row">
          <div class="image-slider"> <img src="img/sliderthree.jpg"></div>
            <div id="hero-desc" class="medium-6 large-6 small-6 small-push-6 columns">
            <p class="slidegrey">Distribution Network</p>
            <h1>Part of leading  pallet network</h1>
            <p class="slideorange">As members of the Fortec Distribution Network, Lombard Shipping collects and delivers goods of all sizes.</p>
            <img src="img/fortec.svg">
          </div>
        </div>
      </div>
    </li> <!-- slider 3 -->   

    </ul><!-- slider listing -->

      <div class="breakline"></div><!-- orange underline -->  
</div><!-- container for slider -->

    <!-- small screen hero -->
    <div class="small-12 columns show-for-small-only">
    <img src="img/small-medium-screen.png">
  <div id="herotextpanel" class="small-12">
  <div class="heroline"> 
  <p class="slidegrey">Our promise</p>
  <h1>Air, land or sea,<br/>we always deliver</h1>
  <p class="slideorange">Providing both domestic and international logistics, we work in partnership with clients to offer a range of solutions.</p>
  </div>
  </div>
  </div>
  <!-- small screen hero -->

</div><!-- row for slider -->
<!-- slider -->

      </div>
  </div><!-- container -->
</div><!-- main row -->

<script>
$(document).foundation();
</script>
</body>
</html>


Droideka over 5 years ago

Your code is working : http://jsfiddle.net/gRtrX/85/

Just look the header it's the problem. I'm sure that the link to the jquery or foundation.js is not found. See if you have error in the dev console too

My header is like that :

   <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8"/>

        <link rel="stylesheet" href="stylesheets/app.css" />


      <!-- Javascript header -->
      <script type="text/javascript" src="bower_components/modernizr/modernizr.js"></script>

    </head>
   <body>
   <!-- some content -->
        <script src="bower_components/jquery/jquery.min.js"></script>
        <script src="bower_components/foundation/js/foundation.min.js"></script>
        <script src="js/app.js"></script> 

 </body>

Lyn over 5 years ago

Hey Chris,

I dropped your code raw in jsfiddle and it works : http://jsfiddle.net/dPQrg/ (you just have to hover to find the arrows though :p).

What's the issue you're getting ? Orbit doesn't work at all ?

Regards,

Lyn.

Chris over 5 years ago

Thanks guys

i'm new to this so the answer might be simple but I cant seem to get it to work. I seem to have all the links to the correct JS and css files but for some reason when you click the third sliders right hand arrow you don't seem to go to back to the first slide and you cant click any slider after that. It just seems to break.

Really pulling my hair out now.

Here is my url: www.trebuchettest.co.uk

:S

Droideka over 5 years ago

God ! you just have to follow the code into the jsfiddle ...

copy this body, i just use the code that i present to you in the jsfiddle :

<body screen_capture_injected="true">
  <div class="row"><!-- main row -->  

    <div class="breakline"></div>
      <div id="container" class="small-12"><!-- container -->

        <div class="row"><!--row for top bar-->
          <section id="nav" class="medium-11 columns medium-centered columns large-11 columns large-centered columns">  
            <nav class="top-bar" data-topbar="">
              <ul class="title-area">
                <li class="name"><a href="index.html"><img src="img/lombard_logo.svg"></a></li>
                <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
              </ul>
                <div id="calltoaction" class="show-for-medium-up"> 
                  <strong style="color:#E98300; text-decoration:none;">E:
                  </strong>[email protected]&nbsp;&nbsp;
                  <strong style="color:#E98300; text-decoration:none;">T:
                  </strong> +44 (0)1473 243800
                </div>


            <section class="top-bar-section">
                    <!-- Right Nav Section -->
                    <ul class="right">
                      <li class="">
                        <a href=".html">About</a>
                      </li>
                      <li class="">
                        <a href=".html">Locations</a>
                      </li>
                      <li class="">
                        <a href=".html">Imports</a>
                      </li>
                      <li class="">
                        <a href=".html">Exports</a>
                      </li>
                      <li class="">
                        <a href=".html">UK Logistics</a>
                      </li>
                      <li class="">
                        <a href=".html">Irish Logistics</a>
                      </li>
                      <li class="has-dropdown not-click">
                        <a href=".html">News</a>
                        <ul class="dropdown"><li class="title back js-generated"><h5><a href="javascript:void(0)">Back</a></h5></li>
                          <li><a href="#">First link in dropdown</a></li>
                        </ul>
                      </li>
                      <li class="">
                        <a href="contact.html">Contact</a>
                      </li>
                    </ul>
                  </section></nav>
          </section>
        </div><!--row for top bar-->


<!-- slider -->
<div class="row"><!-- row for slider -->
<div class="medium-11 columns medium-centered columns large-11 large-centered columns show-for-medium-up"><!-- container for slider -->
  <ul data-orbit="" data-options="animation:slide;pause_on_hover:true;animation_speed:500;navigation_arrows:true;bullets:true;timer_speed: 3000;" style="height: 300px;"><!-- slider listing -->

    <li><!-- slider 1 -->
      <div class="hero">
        <div class="row">
          <div class="image-slider"> <img src="img/sliderone.jpg"></div>
            <div id="hero-desc" class="medium-6 columns large-6 small-6 small-push-6 columns">
            <p class="slidegrey">Our promise</p>
            <h1>Air, land or sea,<br>we always deliver</h1>
            <p class="slideorange">Providing both domestic and international logistics, we work in partnership with clients to offer a range of solutions.</p>
          </div>
        </div>
      </div>
    </li><!-- slider 1 -->

    <li><!-- slider 2 -->
      <div class="hero">
        <div class="row">
          <div class="image-slider"> <img src="img/slidertwo.jpg"></div>
            <div id="hero-desc" class="medium-6 large-6 small-6 small-push-6 columns"> 
            <p class="slidegrey">Industry Knowledge</p>
            <h1>International logistics, Shipping and Forwarding</h1>
            <p class="slideorange">With a heritage in shipping going back over a quarter of a century,  Lombard Shipping plc continues to be at the forefront of service and quality. </p>
          </div>
        </div>
      </div><!-- slider 2 -->
    </li>   


    <li><!-- slider 3 -->
      <div class="hero">
        <div class="row">
          <div class="image-slider"> <img src="img/sliderthree.jpg"></div>
            <div id="hero-desc" class="medium-6 large-6 small-6 small-push-6 columns">
            <p class="slidegrey">Distribution Network</p>
            <h1>Part of leading  pallet network</h1>
            <p class="slideorange">As members of the Fortec Distribution Network, Lombard Shipping collects and delivers goods of all sizes.</p>
            <img src="img/fortec.svg">
          </div>
        </div>
      </div>
    </li> <!-- slider 3 -->   

    </ul>
        <div class="breakline"></div><!-- orange underline -->  

    <!-- small screen hero -->
    <div class="small-12 columns show-for-small-only">
    <img src="img/small-medium-screen.png">
  <div id="herotextpanel" class="small-12">
  <div class="heroline"> 
  <p class="slidegrey">Our promise</p>
  <h1>Air, land or sea,<br>we always deliver</h1>
  <p class="slideorange">Providing both domestic and international logistics, we work in partnership with clients to offer a range of solutions.</p>
  </div>
  </div>
  </div>
  <!-- small screen hero -->

</div><!-- row for slider -->
<!-- slider -->

      </div>
  </div><!-- container -->
<!-- main row -->

<script>
$(document).foundation();
</script>



</body>

Chris over 5 years ago

Hi Droideka

I really appreciate the help, like i said I'm new to this:

I have added a video to show you that it doesn't work.

https://www.youtube.com/watch?v=W0iDD_dNaAg&feature=youtu.be