gaBasicSlider

Take notice that I have deliberately moved next previous buttons and indicators below the slider. I did this to demonstrate the freedom that you will have when designing your own slider.

<!-- Can be DIV or UL structures -->
<ul id="mySlider" class="my-slider">
    <li style="background-image: url('images/branches.jpg')">One</li>
    <li style="background-image: url('images/flower.jpg')">Two</li>
    <li style="background-image: url('images/shack.jpg')">Three</li>
    <li style="background-image: url('images/waterfall.jpg')">Four</li>
</ul>

Next and previous buttons

Click the buttons to see the effect on the slider.

<button id="myPrevious" class="btn btn-default">&larr;</button>
<button id="myNext" class="btn btn-default">&rarr;</button>

Indicators default or custom

<!-- default -->
<div id="myIndicators"></div>

<!-- custom -->
<div id="myIndicators">
    <img src="one.jpg" alt="your alt text">
    <img src="two.jpg" alt="your alt text">
    <div>Three</div>
    <div><img src="four.jpg" alt="your alt text"></div>
</div>

The CSS these classes are generated by the slider

.gabs-initiated

.gabs-initiated is added to the slider element when it's initiated

.gabs-indicator

.gabs-indicator is added to the indicator root element

.gabs-active

.gabs-active is added to the active indicator child element

<style>
    /* .gabs-initiated is added to the slider element when it's initiated */
    .my-slider.gabs-initiated ~ .my-previous,
    .my-slider.gabs-initiated ~ .my-next {
        display: block;
    }

    /* .gabs-indicator is added to the indicator root element */
    .gabs-indicator {
        font-size: 30px;
        padding: 10px;
    }
    
    /* .gabs-active is added to the active indicator child element */
    .gabs-active {
        color: red;
    }
</style>

The JavaScript

<script>
    var params = {
        slider: document.getElementById('mySlider'),
        btnNext: document.getElementById('myNext'),
        btnPrevious: document.getElementById('myPrevious'),
        indicators: document.getElementById('myIndicators')
    };

    var mySlider = new gaBasicSlider(params);
</script>

Parameter details

Methods start and stop animation of the demo slider at the top of this page

<script>
    // mySlider.start()
    document.getElementById('myStart').addEventListener('click', mySlider.start);

    // mySlider.stop();
    document.getElementById('myStop').addEventListener('click', mySlider.stop);
</script>

Events dispatched when the slider is initiated, started, and stoped.

<script>
    var slider = document.getElementById('mySlider');

    slider.addEventListener('initiated', function (e) {
        // called when initiated
    }, false);

    slider.addEventListener('start', function (e) {
        // called when animation is started
    }, false);

    slider.addEventListener('stop', function (e) {
        // called when animation is stopped';
    }, false);
</script>