Menu icon Foundation

My Posts

No Content

My Comments

Amon Jafarbay commented on Herbert Poepke's post over 1 year

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;}

Posts Followed


Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Herbert Poepke's post over 1 year

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;}

Posts Followed


Following

  • No Content

Followers

  • No Content