RESPONSIVE CSS FRAMEWORK
image
Coastal summer home
Photo by M.James Northen - http://www.jnorthen.com
/images/image-slider/img_01.jpg
image
Perfect day at the beach house
Photo by M.James Northen - http://www.jnorthen.com
/images/image-slider/img_02.jpg
image
Vintage kitchen on the countryside
Photo by M.James Northen - http://www.jnorthen.com
/images/image-slider/img_03.jpg
image
Pool house overshadowed by palm trees
Photo by M.James Northen - http://www.jnorthen.com
/images/image-slider/img_04.jpg
image
Orchids on the dining room table
Photo by M.James Northen - http://www.jnorthen.com
/images/image-slider/img_05.jpg
image
Charming desk
Photo by M.James Northen - http://www.jnorthen.com
/images/image-slider/img_06.jpg
image
The grande, the tall and the beautiful
Photo by M.James Northen - http://www.jnorthen.com
/images/image-slider/img_07.jpg
image
Waiting room at the castle
Photo by M.James Northen - http://www.jnorthen.com
/images/image-slider/img_08.jpg
image
Good morning, kitchen!
Photo by M.James Northen - http://www.jnorthen.com
/images/image-slider/img_09.jpg
image
Sunlit luxury town house
Photo by M.James Northen - http://www.jnorthen.com
/images/image-slider/img_10.jpg
image
Dreamy bedroom details
Photo by M.James Northen - http://www.jnorthen.com
/images/image-slider/img_11.jpg
image
Luxury resort away from the world
Photo by M.James Northen - http://www.jnorthen.com
/images/image-slider/img_12.jpg
Credits:
M.James Northen http://www.jnorthen.com

Image & content slider

How to use

Jumpeye framework's content slider is an easy to use JavaScript slider component that works exclusively with Jumpeye framework on the latest versions of browsers and also Internet Explorer 8. To add a content slider to your webpage simply include the Jumpeye framework and slider JavaScript libraries together with the grid CSS file, setup the slider's content and setup the slider itself:
1. Download the latest version of Jumpeye framework from the Free version page or from your account (My account -> My downloads).
2. Extract the content of the package. It is recommended to preserve the structure of the framework in your project, but it is not mandatory.
3. Import the required files into your HTML page and insert the viewport meta tag in order to work properly on mobile devices:
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0;" />
    <link rel="stylesheet" href="/css/JFGrid.css" />
    <script type="text/javascript" src="/js/JFCore.js"></script>
    <script type="text/javascript" src="/components/contentSlider/JFBlurrySlider.js"></script>
</head>
4. Within the <body> tag of your HTML page specify the content for each slide of the slider component. Within a master <div> tag for the slider component use <div> tags to specify the information for each slide. The slider component will use the unique id of the master <div> tag to identify and retrieve content.

Note! The HTML code of the slider must be placed in a row and column inside the grid in order to work responsively.
<body>
    <div class="container">
        ...
        <div class="row">
            <div class="grid_12 columns">
                <div id="mySlider">
                    <div name="jf-slider_content" style="display: none">
                        <div name="jf-slide">
                            <div name="jf-type">image</div>
                            <div name="jf-title">Image title</div>
                            <div name="jf-description">Description for the image</div>
                            <div name="jf-content">images/image_1.jpg</div>
                            <div name="jf-target_url">http://www.somesite.com</div>
                            <div name="jf-target_window">_blank</div>
                        </div>
                        <div name="jf-slide">
                            <div name="jf-type">html</div>
                            <div name="jf-title"></div>
                            <div name="jf-description"></div>
                            <div name="jf-content">
                                <div id="slide2">
                                    <p>This is some HTML content for the slide.</p>
                                    <br />
                                    <p>I can even place an image:</p>
                                    <img src="images/image_2.jpg" alt="Image" />
                                </div>
                            </div>
                            <div name="jf-target_url"></div>
                            <div name="jf-target_window"></div>
                        </div>
                        <div name="jf-slide">
                            <div name="jf-type">image</div>
                            <div name="jf-title">Image title</div>
                            <div name="jf-description">Image description</div>
                            <div name="jf-content">images/image_3.jpg</div>
                            <div name="jf-target_url"></div>
                            <div name="jf-target_window"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        ...
    </div>
</body>
6. Within the <script> tag initialize the content of the slider component for the <div> tag with the id attribute of mySlider.
<script type="text/javascript">
    JFBase.JFBlurrySlider.init({
        appendToID: 'mySlider',
        maxWidth: 800,
        maxHeight: 450,
        imageScaleMode: 'scaleCrop',
        loopContent: false,
        animationType: 'slide',
        animationDuration: 0.3,
        autoSlideshow: false,
        slideshowSpeed: 6,
        pauseOnMouseOver: false,
        startIndex: 0,
        captionAlignment: left,
        captionColor: '#FFF',
        autoHideControls: false,
        autoHideDelay: 3,
        disableAutohideOnMouseOver: false,
        showTimer: true,
        showControlBar: true,
        showNavButtons: true
    });
</script>
7. If you open the HTML document in a browser, you should be able to see the slider and interact with it.
The slider component supports HTML content too. Below you can see a content slider example. The content of each slide is composed of HTML code (text, images). It is recommended to build the HTML content of the slides using the grid, else the content will not work responsively.
html
Create
content sliders
Add text, images, buttons, charts, videos or any
other elements in order to get a visually stunning
content slider.
html
Present
your product
Present your product, app or service in a visual
manner to impress your users and transform
them into customers.
html
Make a
website tour
Navigate your visitors in a few seconds through
your website by presenting the key features
of your product.
html
Create
presentations
Create different types of presentations including
tables, diagrams, workflows, charts or any other
type of data.