codezilla-nl / slide-zilla

Full page slides scroller that works on all screen sizes, no matter the content length

An easy to use plugin to create full screen page slides that supports all screen sizes, no matter the content length. Check out a demo at: http://codezilla-nl.github.io/slide-zilla/

Features

• Support for mobile devices with media queries
• Includes a navigation bar
• Cross browser compatible Cross browser compatibility (IE9+, Chrome, Firefox, Safari and Opera)

How to use

• Include jQuery on your page

• Include slidezilla.js on your page

• Include slidezilla.css for basic styling

• Add the HTML markup to your page

<div id="page">
    <nav class="page-nav sz-nav-visible">
        <a class="sz-nav-handle" title="Menu" href="">
            <span class="fa fa-bars"></span> Menu
        </a>
        <ul class="sz-nav-items">
            <li><a href="#slide1">Slide 1</a></li>
            <li><a href="#slide2">Slide 2</a></li>
            <li><a href="#slide3">Slide 3</a></li>
        </ul>
    </nav>

    <section id="slide1">
        ...
    </section>

    <section id="slide2">
        ...
    </section>

    <section id="slide3">
       ...
    </section>

</div>

• Link Slide-zilla to your HTML elements

 $('#page').slidezilla({
    navigation: '.page-nav',
    slide: 'section'
});

Get

Bower

bower install slide-zilla

NPM

npm install slide-zilla

ToDo

• Events

If you have good ideas / tips about options / functionality, let me know!

Support

If you have any questions, problems or suggestions, feel free to submit a ticket! Also, pull requests with improvements, new features or other great stuff are always very welcome.

Licence

MIT