RGBSlide.js

A clean jQuery slider to spruce up your webpage

Getting Started:

A:

Download either

And include it before your scripts like so:

                    <head> 

                        <Bootstrap> 

                        <jQuery>

                        <script src="dependencies/rgbSlide.min.js"></script>

                        <Other Scripts and CSS>

                    </head>

B:

Or just use

So you dont have to download anything

How to Use:

1 - Creating your slider:

- Create a div element and give it any ID you like.

- Populate it with however many slides you want.

                    <div id="exampleSlider"> 

                        <div><h1>Slide 1</h1></div>

                        <div><h1>Slide 2</h1></div>

                        <div><h1>Slide 3</h1></div>

                    </div>

- And simply just call the rgbslide() method on it

$("#exampleSlider").rgbslide();

2 - Use your own CSS:

- All slides will be sequentially given id's: sl1,sl2,sl3...

- You can also style every slide in one go using the .sliderBox class

- Feel free to override the default styles (We're only a backbone!)

                    @import 'https://fonts.googleapis.com/css?family=Quicksand:300,400';
                    .sliderBox h1{

                        font-family:'Quicksand','Segoe UI', Geneva, sans-serif;

                        font-weight:'lighter';

                    }
                    #sl1{

                        background:#FD2138;

                    }

3 - Customise with optional parameters:

- By default, the rate at which slides change is 3400ms. However, you can change it yourself!

- All you need to do is put the desired interval as an int parameter

                    $("#exampleSlider").rgbslide(2000);
                    //This will make the slides change every 2 seconds
                

- We'll be adding more options soon - at your request!

4 - Enjoy:

- RGBSlide is so easy to implement and manipulate to fit your website

- Load times won't be affected so the experience will stay smooth

- It's flat, clean, modern and neutral, making RGBSlide an extremely versatile plugin to suit almost all websites

var price = "Free!";

Example:

Meatballs

Salads

Pizzas

HTML

                <div id="exampleSlider">
                    <div><h1>Meatballs</h1></div>

                    <div><h1>Salads</h1></div>

                    <div><h1>Pizzas</h1></div>

                </div>

CSS

                #exampleSlider{

                    width:92vw;

                    left:4vw;

                    margin-bottom:10px;

                    margin-top:10px;

                    padding:0;

                }

                .sliderBox{

                    text-align:center;

                    background-size:contain;

                    color:rgba(255,255,255,0.9);

                    font-family:'Exo';

                    font-weight:900;

                    padding:0;

                }

                .sliderBox h1{

                    font-size:70px;

                }

                #sl1{

                    background:url(http://freelandmarketplace.com/wp-content/uploads/pasta-and-Meatballs.jpg) center center no-repeat;

                }

                #sl2{

                    background:url(http://www.jerseygirlcooks.com/wp-content/uploads/2012/04/salad-one.jpg) center center no-repeat;

                }

                #sl3{

                    background:url(http://www.microcosmologist.com/blog/wp-content/uploads/2012/02/Nicks-Pizza-from-NYC.jpg) center center no-repeat;

                }

JS

                $("#exampleSlider").rgbslide();

                //Seriously look how easy it is!