Orbit for content only and custom buttons to navigate

[enginenr9]

Hi. First of all let me thank you for this great plugin. I'm using Foundation and needing a slider, so Orbit was my first choice.

I have 2 questions:

1) But I'm having some real problems on sliding content only, no images. The texts are showing one above the other, and judging by what I read in the forums the only solution is to apply a background to each content section - but my really problem resides here... I need the background to be transparent. Is there any solution for that?

2) Is there any way to use custom buttons to navigate through the slider? I've tried $('#next_btn').click(function(){ trigger('orbit.next'); // or orbit.prev }); with no success, but most of all, I would need something like: $('#next_btn').click(function(){ trigger(3); });

Appreciate your help. Cheers.

[psvent]

Hi!

I found the solution for the overlayed content.

Just add this line:

this.$slides.slice(1).css({"left": "100%"});

...to the "loaded" function, or to the "setupFirstSlide" function.

This code offsets all the slides, except the first one, by 100% of the slider container width, which effectively, pushes the slides outside of the viewport, so they are not overlaid over/under the first slide.

I think Orbit is a very cool plugin too, especially because it's flexible, and fluid, so it's very useful for responsive design, but this problem is really a major issue in my opinion, but the solution, as seen above is very simple.

Feel free to criticise my suggested solution, or make it better!

For now, I will either extend Orbit, to add this fix, or will make a modified version of Orbit, to use in my solutions.

Thanks for the great code!

[ghost]

Hi,

Have any of you tried to slide ontent containing a grid or a block-grid containing both text and images?

Seems to me like the wrapper gets way too big and changing the div's and wrapper dimensions in the css doesn't really do the trick.

As for the background property, I'll try to set it up for the featured item and see what happens then, haven't tried that one yet.

Love the plugin!

[taterska]

Hi,

i had troubles making Orbit behave properly when using only content but I came to a conclusion that the problem was the z-index of all my divs. Orbit sets the z-index of the first div to 3 but the rest are left to use the default value, which by me was an issue becuase it was displaying the last slide when page loads for very first time and the first round of animation wasn't working properly, so by adding the following line:

this.$slides.not(':first-child').css({ "z-index":1 });

to setupFirstSlide() solved the problme by me.

Great plugin!

[zs-sz]

@enginenr9

if you want to trigger built in events you need to add the trigger() function to the same jQuery object where your original .orbit() call was made.

var container = $('.featured');

container.orbit();

$('#next_btn').on('click',function(event){
container.trigger("orbit.next"); 
});

[elisechant]

// foundation 4

$('.new-next').on('click', function() {
    $('.orbit-next span').trigger('click');
    return false;
});

[jonmunson]

My solution in F5 was to create new completely separate buttons (".next-slide" and ".prev-slide"), and then trigger the existing functionality with some JS overrides as follows:

//  Custom Slider button controls
$(".next-slide").click(function() {
    $(".slideshow-wrapper .orbit-next").click();
    $(".slideshow-wrapper .orbit-timer").click();
});

$(".prev-slide").click(function() {
    $(".slideshow-wrapper .orbit-prev").click();
    $(".slideshow-wrapper .orbit-timer").click();
});

Then use some CSS to hide the built in controls:

.orbit-container .orbit-prev, .orbit-container .orbit-next {display: none;}