Rollercoaster horizontal and vertical photo slider with touch support

Why Rollercoaster?

Rollercoaster was created as a substitude for the Bootstrap Carousel. We needed a Slider wich is able to scroll horizontally and vertically through a set of images and text-content and provides a certain level of remote-controll functionality. As the Bootstrap 2 carousel was using JavaScript to create the transitions, the performance of the first Bootstrap-Based solution was quite poor and appropriate touch support was quite difficult – not to say impossible – to implement.

What Rollercoaster is

So here we are, presenting our own solution, inspired by the Carousel Script made by Eightmedia, to the problem: Rollercoaster is a responsive slider with the capability to slide horizontally and vertically between multiple levels of pictures and/or content. The slider has a lazyload function, supports touch-gestures (Hammer.js) and comes with a handy minimap to facilitate orientation between the different levels of the slider.

Rollercoaster is retina ready and uses it's own icon font for navigation. Of course you are able to change everything in Rollercoaster's appearance within the CSS-file.

Features

Rollercoaster is a lightweight horizontal and vertical slider library for jQuery and offers the following features.

• Full screen Slider
• Multiple sliders per page
• CSS3 transitions for smooth hardware-accelerated slidethrough
• Touchscreen support
• Lazyload features for shorter loading times
• Optional minimap for easier navigation
• Retina ready

How to use Rollercoaster

To use Rollercoaster you have to include jQuery, Modernizr and Hammer.js into you website.

<script src="js/vendor/modernizr-2.6.2.min.js"></script>
<script src="js/vendor/jquery-1.9.1.min.js"></script>
<script src="js/vendor/jquery.hammer.min.js"></script>

After this step include the rollercoaster.js and the rollercoaster.css. You are ready to go!

<script src="js/rollercoaster.js"></script>
<link href="css/rollercoaster.min.css" rel="stylesheet">

Rollercoaster needs some basic HTML-Markup to work properly. We use HTML5-Sections for this purpose.

<div id="myRollercoaster" class="rollercoaster_slider">

    <a class="navigation_item down">Down</a>
    <a class="navigation_item up">Up</a>
    <a class="navigation_item left">Left</a>
    <a class="navigation_item right">Right</a>

     <div class="section_wrapper">

         <section class="vertical_slide" data-section-title="Section 1">
             <div data-background="picture1.jpg" class="pane"></div>
             <div data-background="picture2.jpg" class="pane"></div>
         </section>

        <section class="vertical_slide" data-section-title="Section 2">
             <div data-background="picture3.jpg" class="pane"></div>
         </section>

        (...)

    </div>

</div>

The last thing you have to do is to initialize the script.

<script>
    $(document).ready(function(){
        var rctr = new rollercoaster_slider("#myRollercoaster");
        rctr.init();
    }
</script>

This is it! Your slider is ready to go.

Check out the full-screen implementation of Rollercoaster!

Settings

The default settings enable all features of the slider including lazyload, minimap and support for all available touch events. You can overwrite the default settings by using the settings-parameter in the init()-function.

rollercoaster.init({minimap:false,lazyload:false});

In the current version of the slider the following settings are possible. Default values are highlighted in bold-type.

Methods

You can use the default navigation-elements of the slider or create your own custom navigation with a vew lines of JavaScript. The following methods can be used to conrol the slider. Default values are highlightet in bold-type.

Dependencies & Support

Rollercoaster needs jQuery, Modernizr and Hammer.js to work properly. We try to get Rollercoaster running on as manny browsers as possible. Nevertheless we are for a progression of the web and won't create support for legacy browsers unless it is really necessary.

The current version of Rollercoaster is tested with the following borwsers and should be compatible with upcoming versions: Safari 6.0.5, Chrome 28, Firefox 22, Internet Explorer 8+, Mobile Safari (iOS6), Mobile Chrome (iOS6) and Android Standard Browser.

If you have any questions, feel free to contact us. We will try to respond as fast as possible.

Wishlist

Please note that this is the first Beta of Rollercoaster and the next thing on the list is the optimazation of code fragments. Nevertheless we want to push development of Rollercoaster forward and add further features for the slider. Is there a feature you're missing? We're open for discussion!

Download

License

Rollercoaster is licensed under the MIT License (MIT)

Copyright (c) 2013 imbaa Kreativagentur

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.