Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Styling navigation controls #137

Open
jonmunson opened this issue Dec 9, 2013 · 0 comments
Open

Styling navigation controls #137

jonmunson opened this issue Dec 9, 2013 · 0 comments

Comments

@jonmunson
Copy link

Styling the default controls is not as straightforward as it could be. It would be good if there were some options in the JS setup to have custom icons/images.

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;}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

No branches or pull requests

1 participant