javascript - Images dont slide in orbit slider Foundation -

-

i'm trying add foundation orbit slider web page. looks easy , i've got see images , prev & next buttons, if click on prev , next buttons orbit slider doesn't move @ all. images doesn't slide , don't know why, beacuse i've seen many examples , think code looks same. woud appreciated

<html>   <head>      <meta charset="utf-8">     <meta http-equiv="x-ua-compatible" content="ie=edge">     <meta name="viewport" content="width=device-width, initial-scale=1">     <meta name="description" content="altiria webapp">      <link rel="stylesheet" href="assets/css/foundation.min.css">     <link rel="stylesheet" href="assets/css/font-awesome/css/font-awesome.min.css">     <link rel="stylesheet" href="assets/css/jquery-ui.css">     <link rel="stylesheet" href="assets/css/jquery-ui.structure.css">     <link rel="stylesheet" href="assets/css/jquery-ui.theme.css">     <link rel="stylesheet" href="assets/css/app.css">     <script src="assets/js/modernizr.js"></script>     <script src="assets/js/jquery.js"></script>     <script src="assets/js/jquery-ui.js"></script>     <script src="assets/js/foundation.min.js"></script>    </head>   <body>    <div class="orbit-container">      <ul class="example-orbit" data-orbit>        <li>          <img src="assets/images/paisaje1.jpg" alt="slide 1" />          <div class="orbit-caption">            caption one.          </div>       </li>       <li class="active">         <img src="assets/images/paisaje2.jpg" alt="slide 2" />         <div class="orbit-caption">           caption two.         </div>       </li>       <li>         <img src="assets/images/paisaje3.jpg" alt="slide 3" />         <div class="orbit-caption">           caption three.         </div>       </li>     </ul>      <!-- navigation arrows -->     <a href="#" class="orbit-prev">prev <span></span></a>     <a href="#" class="orbit-next">next <span></span></a>      <!-- slide numbers -->     <div class="orbit-slide-number">     <span>1</span> of <span>3</span>     </div>      <!-- timer , play/pause button -->     <div class="orbit-timer">       <span></span>       <div class="orbit-progress"></div>    </div>  </div>  <!-- bullets -->  <ol class="orbit-bullets">    <li data-orbit-slide-number="1"></li>    <li data-orbit-slide-number="2" class="active"></li>    <li data-orbit-slide-number="3"></li>  </ol>   <script>     $(document).foundation();  </script>  </body>

enter image description here

it looks have mix of pre-rendered html , rendered html on page. don't need chunks of code labeled comments (navigation arrows, slide numbers, timer, bullets, etc); foundation render them you.

in addition, it's possible class="example-orbit" interfering and, unless need it, i'd suggest removing it.

important note: according foundation website, "orbit has been deprecated, meaning no longer supported." officially recommend using different image slider instead of orbit.


Comments

Post a Comment

Popular posts from this blog

android - Gradle sync Error:Configuration with name 'default' not found -

-
i want add external library guillotinemenu-android in application. followed steps given in upvoted answer existing question how add library project android studio? facing error when try build project after step 6 i.e. when added dependency in app/build.gradle compile project(":guillotinemenu") . tried stackoverflow links related error not working out. have made folder named libs in app directory , copied project folder guillotine menu there. here build.gradle(module:app) file apply plugin: 'com.android.application' android { compilesdkversion 22 buildtoolsversion "22.0.1" defaultconfig { applicationid "com.sunshine.bbreaker.appet_i" minsdkversion 14 targetsdkversion 22 versioncode 1 versionname "1.0" } buildtypes { release { minifyenabled false proguardfiles getdefaultproguardfile('proguard-android.txt'), 'proguard-rules.p
Read more

java - Andrioid studio start fail: Fatal error initializing 'null' -

-
i don't know happened android studio，when start ，it shows me error message below. , try uninstall/reinstall it,but doesn't work.who can me!!! internal error. please report https://code.google.com/p/android/issues java.lang.runtimeexception: com.intellij.ide.plugins.pluginmanager$startupabortedexception: fatal error initializing 'null' @ com.intellij.idea.ideaapplication.run(ideaapplication.java:178) @ com.intellij.idea.mainimpl$1$1$1.run(mainimpl.java:52) @ java.awt.event.invocationevent.dispatch(invocationevent.java:209) @ java.awt.eventqueue.dispatcheventimpl(eventqueue.java:715) @ java.awt.eventqueue.access$400(eventqueue.java:82) @ java.awt.eventqueue$2.run(eventqueue.java:676) @ java.awt.eventqueue$2.run(eventqueue.java:674) @ java.security.accesscontroller.doprivileged(native method) @ java.security.accesscontrolcontext$1.dointersectionprivilege(accesscontrolcontext.java:86) @ java.awt.eventqueue.dispatchevent(eventqu
Read more

html - jQuery UI Sortable - Remove placeholder after item is dropped -

-
i'm trying nested sortable , i'm kind'a succeeding, there's 1 small little inconvenience bugs me. i want placeholder disappear after i've dropped dragged item (on mouseup) , can't quite figure out how it. i want because when sort downwards, deletion of placeholder affects parent's height, in turn creates small bug, check jsfiddle here. html <div class="container"> <h1>menu</h1> <ul class="list-group striped nest"> <li class="list-group-item">home <ul class="list-group striped nest"></ul></li> <li class="list-group-item">about <ul class="list-group striped nest"></ul></li> <li class="list-group-item"> services <ul class="list-group striped nest"> <li class="list-group-item">design <ul class=
Read more