Menu icon Foundation
Orbit - Next/Previous Arrows

Hello all,

 

i'm quite new to foundation and have a problem with orbit.

i want to use orbit with data-infinite-wrap set to false and next/previous arrows. I see no state on the arrows if there are no previous/next slides available. In this case i want to disable arrows or at least change color.

 

Any Hints?

 

Orbitarrows

Hello all,

 

i'm quite new to foundation and have a problem with orbit.

i want to use orbit with data-infinite-wrap set to false and next/previous arrows. I see no state on the arrows if there are no previous/next slides available. In this case i want to disable arrows or at least change color.

 

Any Hints?

 

Ryan McCready almost 3 years ago

Hi Herbert,

Previous/next arrows are right in your mark up. You can change them here or delete them altogether.

<button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>&#9664;&#xFE0E;</button>
    <button class="orbit-next"><span class="show-for-sr">Next Slide</span>&#9654;&#xFE0E;</button>

Herbert Poepke almost 3 years ago

That's clear but i want that the button is hidden automatically if there is no more slide in previous or next available.

 

Ryan McCready almost 3 years ago

Have you tried using the data option: data-infinite-wrap and set it to False?

Jason McKinney over 1 year ago

Did anyone find a solution for this?

Amon Jafarbay over 1 year ago

I wanted to do the same thing today and came up with this solution, this is a bit verbose but i didnt want to hide and show the elements with JS - if you wanted to you could swap adding the classes for just hide / show on the relevent next and previous buttons.

First I added class of 'first' to the initial slide on the slider, and 'last' to the last slide.

Next code is just if you used wordpress to generate slides like I did ( just replace below to check if current_post is 0 and add the 'first' class), then identify last post with this :

<?php if (($wp_query->current_post +1) == ($wp_query->post_count)) {
  echo 'This is the last post';
} ?>

Once you have the 'first' and 'last' classes added to the correct slides:

Bind a class to the slide change and add to the slider using jQuery : 

$(function(){


  $('#slider').bind('slidechange.zf.orbit', function() {
    if( $('.orbit-slide.is-active').hasClass('last') ) {
      $('#slider').addClass('last');
    } else if ($('.orbit-slide.is-active').hasClass('index-slide')) {
      $('#slider').removeClass('last');
      $('#slider').addClass('first');
    } else {
      $('#slider').removeClass('last');
      $('#slider').removeClass('first');
    }
  });

});

this checks if the current slide is the last one and adds a class to the slider element, finally just change css so that orbit-previous and .orbit-next are hidden in the relevent classes: 

.orbit.first .orbit-previous {display: none;}
  
.orbit.last .orbit-next {display: none;}