panorama slider

panorama-slider a JQuery based content slider

Slide content across beautiful panorama images

Uses JQuery

And Font Awesome icons

Just add .pslider()

Simple and easy to use

Add more marketing speech here

Free License

Public Domain

Example Slide 3

Foobar

Hello World

Deep Blue Sky

Trees and Hayballs

Panorama by Flagstaffotos
https://github.com/badzong/panorama-slider

Getting started

The panorama-slider uses JQuery, so first of all you need to include a recent version of JQuery into your Webpage. If you want nice icons for the dots, the forward and the reverse button, you also need to include font awesome.

The other thing you need is a wide panorama image. The wider the better. If you don't have an image at hand, you can find very beautiful panoramas here.

Basic page structure:

<!doctype html> <html> <head> <title>Slider Example</title> <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> <link href="http://panorama-slider.com/panorama-slider.min.css" rel="stylesheet"> <style> body { font-family: sans-serif; margin: 0; padding: 0; } h1 { margin: 40px; } #slider { background-image: url(panorama.jpg); } </style> </head> <body> <div id="slider"> <div> <div> <h1>Slide 1</h1> </div> <div> <h1>Slide 2</h1> </div> <div> <h1>Slide 3</h1> </div> </div> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="http://panorama-slider.com/panorama-slider.min.js"></script> <script> $('#slider').pslider(); </script> </body> </html>

The div with the id slider holds all slides and has the panorama image set as background. Within that div you have three divs, the slides. The result looks like this.

Fork me on GitHub