jQuery

jQuery Rotating Banner/Slider with Fade In/Fade Out Effects

I made a plugin for JQuery that allows for me to make a fade in/out jQuery banner slider from a JSON source file. It is on GitHub: https://github.com/Sammaye/jslider (Yes I named it jslider; I know, I’m a pikey).

This plugin is real simple all you need to make is a JSON data source like so:

[{"image":"slide_01.jpg"},{"image":"slide_02.jpg"},{"image":"slide_03.jpg"}]

This JSON file will be the source for all your slides. As you can see I have just specified 3 slides and 3 images, one image for each slide. After you have your source data you just need the page:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jslider</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="/js/j-slider.js" ></script>
    <script type="text/javascript">$(document).ready(function(){ $(".j-slider_outer").j_slider(); });</script>

    <style>
        .j-slider_outer {
        }

        .j-slider_inner {
            display: block;
            position: relative;
        }

        .j-slider_row {
            position: absolute;
        }

        .j_slider-slide_outer {
            position: absolute;
        }

        .j_slider-slide_active {
            display: block;
            z-index: 45 !important;
        }

        .j_slider-slide {
            display: block;
        }

        .j_slider-next, .j_slider-previous {
            overflow: hidden;
            font-size: 15px;
            font-weight: bold;
            color: #ffffff;
        }

        .j_slider-next {
            display: block;
            position: absolute;
            right: 0;
            z-index: 45;
        }

        .j_slider-previous {
            display: block;
            position: absolute;
            left: 0;
            z-index: 45;
        }

        .j_slider-controls_outer {
            display: block;
            position: absolute;
            right: 3px;
            bottom: 5px;
            z-index: 45;
        }

        .j_slider-controls_inner {
            float: left;
            height: 16px;
            width: 16px;
            font-size: 12px;
            color: #ffffff;
            margin: 0 3px;
            cursor: pointer;
            background: url("ibutton.png");
        }

        .j_slider-controls_active {
            background: url("button.png");
        }
    </style>
</head>
<body>
    <div class="j-slider_outer"><div class="j-slider_inner"></div></div>
</body>
</html>