javascript - Count number of slides and inner to another div -


i try display number on orbit slider foundation 6. i've change previous , next navigation buttons. hot show slider number instead orbit bullets. need total , current slides.

like on example enter image description here

(function () {  function slidenumber() {  var $slides = $('.orbit-slide');  var $activeslide = $slides.filter('.is-active');  var activenum = $slides.index($activeslide) + 1;  $('.slider-number').innerhtml = activenum;  console.log(activenum); }  $('[data-orbit]').on('slidechange.zf.orbit', slidenumber); })();     <div class="orbit" role="region" aria-label="favorite space   pictures" data-orbit>                 <ul class="orbit-container">                     <button class="orbit-previous"><span class="show-  for-sr">previous slide</span><li></li></button>                     <button class="orbit-next"><span class="show-for-sr">next slide</span><li></li></button>                     <li class="is-active orbit-slide">                         <img class="orbit-image" src="../images/demo-img/screen-shot.png" alt="">                     </li>                     <li class="orbit-slide">                         <img class="orbit-image" src="../images/demo-img/screen-shot.png" alt="">                     </li>                     <li class="orbit-slide">                         <img class="orbit-image" src="../images/demo-img/screen-shot.png" alt="">                     </li>                     <li class="orbit-slide">                         <img class="orbit-image" src="../images/demo-img/event-demo.png" alt="">                     </li>                 </ul>                 <nav class="orbit-bullets">                     <button class="is-active" data-slide="0"><span class="show-for-sr">first slide details.</span><span class="show-for-sr">current slide</span></button>                     <button data-slide="1"><span class="show-for-sr">second slide details.</span></button>                     <button data-slide="2"><span class="show-for-sr">third slide details.</span></button>                     <button data-slide="3"><span class="show-for-       sr">fourth slide details.</span></button>                 </nav>                 <div class="slider-number"></div>             </div> 

   it's work great.    (function() {         function slidenumber() {             var totalitems = $('li.orbit-slide').length;             var currentitem = $('li.orbit-slide.is-active').index() - 1;             $('.slider-number').html(currentitem + '/' + totalitems);         }         document.addeventlistener("domcontentloaded", function() {             $('[data-orbit]').on('slidechange.zf.orbit', slidenumber);         });     })();

-

Comments

Post a Comment

Popular posts from this blog

angular - Is it possible to get native element for formControl? -

i've got angular2 reactive form . created formcontrol s , assigned input fields by [formcontrol]=... . understand creates nativeelement <-> formcontrol link. my question: possible nativeelement formcontrol ? wanna myformcontrol.nativeelement.focus() i can share 1 terrible solution works me. in reactive forms can use either 1) formcontroldirective ts mycontrol = new formcontrol('') template <input type="text" [formcontrol]="mycontrol"> or 2) formcontrolname ts myform: formgroup; constructor(private fb: formbuilder) {} ngoninit() { this.myform = this.fb.group({ foo: '' }); } template <form [formgroup]="myform"> <input type="text" formcontrolname="foo"> </form> so these directives write patch like 1) formcontroldirective const originformcontrolngonchanges = formcontroldirective.prototype.ngonchanges; formcontroldirective.proto
Read more

unity3d - Rotate an object to face an opposite direction -

i have object , b. when click on object b, rotates object b (a faces b). b doesn't face a. need following : when faces b, need face opposite direction. have code rotating @ b. how rotate face opposite direction after that? vector3 targetdirection = target - transform.position; float step = speed * time.deltatime; vector3 newdirection = vector3.rotatetowards (turretdome.transform.forward, targetdirection, step, 0.0f); turretdome.transform.rotation = quaternion.lookrotation (newdirection); you object facing object b, want inverse direction of object after that? objecta.transform.rotation = quaternion.inverse(objecta.transform.rotation) but lets assume example turretdome object a, (negate direction): turretdome.transform.rotation = quaternion.lookrotation (-newdirection); naturally, both of these snippets not show how smoothen rotation, seem know how use time.deltatime. just incase unsure, quaternion.lerp this
Read more

javascript - Why jQuery Select box change event is now working? -

i working on product filters user select select box according his/her preference not getting selected value user in jquery. html code:- <select name="product_filter" id="product_filter"> <option value="price_low_first">price : low high</option> <option value="price_high_first">price : high low</option> <option value="latest">latest</option> <option value="popular">most popular</option> </select> jquery code: $(function () { $("#product_filter").change(function () { alert("hi") var selectedtext = $(this).find("option:selected").text(); var selectedvalue = $(this).val(); alert("selected text: " + selectedtext + " value: " + selectedvalue); }); }); hi believe code perfect. once please check jquery.min.js
Read more