Menu icon Foundation
Orbit slider not working when i started adding php functions any ideas?

You can notice the bullet points the orbit slider is not working

 

As you can see the Orbit slider is not working! I have started connecting the website to the database and configured the search bar, as soon as I have done this the Orbit slider problem occurred has anyone came across a simular problem and could lead me in the right direction!

 

 <ul data-orbit data-options="animation:fade;  animation_speed:500; pause_on_hover:false; animation_speed:1000; navigation_arrows:true; slide_number:false; timer:true; bullets:true;" 

 

  class="example-orbit">

  

  <li>

      <div class="large-12 medium-12 columns">

      <h5>The Jazz Bar</h5>

    </div>

 

    <div class="large-4 medium-4 columns">

    

    <center><a href="#"><img class="img-circle" src="img/thebrixton.jpg" width="300" /></a></center>

    </div>

 

    <div class="large-8 medium-8 columns">

      <div id="panelReview" class="panel active">

        <div class="student">

        <div class="photo"><img src="img/profile.jpg" /> </div>

        <p id="ProfileReview">Shaquel Simpson-Kothari</p>

        <p id="ProfileReview" class="rating">London, United Kingdom<br><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span> </p>

        <p id="ProfileReviewMessage"><em>"Had an exllent time at the bar me and my friends got wasted lol."</em></p>

    

        

      </div>

      </div>

    </div>

  </li>

 

  <li>

      <div class="large-12 medium-12 columns">

      <h5>Electric Doc</h5>

    </div>

 

    <div class="large-4 medium-4 columns">

    

    <center><a href="#"><img class="img-circle" src="img/ed.jpg" width="300" /></a></center>

    </div>

 

    <div class="large-8 medium-8 columns">

      <div id="panelReview" class="panel active">

        <div class="student">

        <div class="photo"><img src="img/profile.jpg" /> </div>

        <p id="ProfileReview">Phil Arach</p>

        <p id="ProfileReview" class="rating">London, United Kingdom<br><span>★</span><span>★</span><span>★</span> </p>

        <p id="ProfileReviewMessage"><em>"I have to say the service was poor im so fucking pissed off."</em></p>

    

        

      </div>

      </div>

    </div>

  </li>

 

   <li>

      <div class="large-12 medium-12 columns">

      <h5>Mario's Palace</h5>

    </div>

 

    <div class="large-4 medium-4 columns">

    

    <center><a href="#"><img class="img-circle" src="img/brixton-restaurant.jpg" width="300" /></a></center>

    </div>

 

    <div class="large-8 medium-8 columns">

      <div id="panelReview" class="panel active">

        <div class="student">

        <div class="photo"><img src="img/profile.jpg" /> </div>

        <p id="ProfileReview">Jordan Travis</p>

        <p id="ProfileReview" class="rating">London, United Kingdom<br><span>★</span><span>★</span><span>★</span><span>★</span> </p>

        <p id="ProfileReviewMessage"><em>"The best Italian food i have had in about 3 years i recomend this place with all its great food."</em></p>

    

        

      </div>

      </div>

    </div>

  </li>

 

</ul>

 

 

 

Orbit Slider not working

You can notice the bullet points the orbit slider is not working

 

As you can see the Orbit slider is not working! I have started connecting the website to the database and configured the search bar, as soon as I have done this the Orbit slider problem occurred has anyone came across a simular problem and could lead me in the right direction!

 

 <ul data-orbit data-options="animation:fade;  animation_speed:500; pause_on_hover:false; animation_speed:1000; navigation_arrows:true; slide_number:false; timer:true; bullets:true;" 

 

  class="example-orbit">

  

  <li>

      <div class="large-12 medium-12 columns">

      <h5>The Jazz Bar</h5>

    </div>

 

    <div class="large-4 medium-4 columns">

    

    <center><a href="#"><img class="img-circle" src="img/thebrixton.jpg" width="300" /></a></center>

    </div>

 

    <div class="large-8 medium-8 columns">

      <div id="panelReview" class="panel active">

        <div class="student">

        <div class="photo"><img src="img/profile.jpg" /> </div>

        <p id="ProfileReview">Shaquel Simpson-Kothari</p>

        <p id="ProfileReview" class="rating">London, United Kingdom<br><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span> </p>

        <p id="ProfileReviewMessage"><em>"Had an exllent time at the bar me and my friends got wasted lol."</em></p>

    

        

      </div>

      </div>

    </div>

  </li>

 

  <li>

      <div class="large-12 medium-12 columns">

      <h5>Electric Doc</h5>

    </div>

 

    <div class="large-4 medium-4 columns">

    

    <center><a href="#"><img class="img-circle" src="img/ed.jpg" width="300" /></a></center>

    </div>

 

    <div class="large-8 medium-8 columns">

      <div id="panelReview" class="panel active">

        <div class="student">

        <div class="photo"><img src="img/profile.jpg" /> </div>

        <p id="ProfileReview">Phil Arach</p>

        <p id="ProfileReview" class="rating">London, United Kingdom<br><span>★</span><span>★</span><span>★</span> </p>

        <p id="ProfileReviewMessage"><em>"I have to say the service was poor im so fucking pissed off."</em></p>

    

        

      </div>

      </div>

    </div>

  </li>

 

   <li>

      <div class="large-12 medium-12 columns">

      <h5>Mario's Palace</h5>

    </div>

 

    <div class="large-4 medium-4 columns">

    

    <center><a href="#"><img class="img-circle" src="img/brixton-restaurant.jpg" width="300" /></a></center>

    </div>

 

    <div class="large-8 medium-8 columns">

      <div id="panelReview" class="panel active">

        <div class="student">

        <div class="photo"><img src="img/profile.jpg" /> </div>

        <p id="ProfileReview">Jordan Travis</p>

        <p id="ProfileReview" class="rating">London, United Kingdom<br><span>★</span><span>★</span><span>★</span><span>★</span> </p>

        <p id="ProfileReviewMessage"><em>"The best Italian food i have had in about 3 years i recomend this place with all its great food."</em></p>

    

        

      </div>

      </div>

    </div>

  </li>

 

</ul>

 

 

 

Remco Janssen almost 2 years ago

Hi Shaquel,

Did you check for JavaScript Errors?

post an example url

shaquel almost 2 years ago

ok no worries I will pull the project to the server now so you can see please wait 5 minutes from the time I sent this message 

shaquel almost 2 years ago

the link is http://brixtoneats.webgeekster.co.uk/

shaquel almost 2 years ago

/js/jquery.slides.min.js Failed to load resource: the server responded with a status of 404 (Not Found)

 

 

Remco Janssen almost 2 years ago

All right, first, I see you load foundation.min.css and foundation.css

 

<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/foundation.min.css" />

it's unnecessary to load these both...

If I take a clean foundation for sites install and use the code below it works.

So try to change your code to use the 'class="orbit" and so on like below....
    

<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit>
  <ul class="orbit-container">
        <li class="orbit-slide">
                <h5>The Jazz Bar</h5>
        </li>
        <li class="orbit-slide">
                <h5>Electric Doc</h5>
        </li>
      <li class="orbit-slide">
                <h5>Mario's Palace</h5>
        </li>
    </ul>
</div>