jqueryUI slider with auto and smooth move

by Ayyappan Sakthivadivel

HTML

<div id="wrapper">
    <div class="image">
        <img id="image" src="http://fakeimg.pl/350x200/?text=0" />
    </div>
    <div id="slider"></div>
</div>

CSS

#wrapper {
    width: 500px;
    margin: 0 auto;
    text-align: center;
}
#slider {
    width: 200px;
    text-align: center;
    margin: 0 auto;
    display: block;
}

.ui-slider-handle{
  display: none;
}

span.ui-slider-handle.ui-state-default.ui-corner-all {
    transition: all .1s;
}

span.ui-slider-handle.ui-state-default.ui-corner-all.ui-state-active {
    transition: none;
}

JavaScript

$(function () {
    $('#slider').slider({
        value: 0,
        min: 0,
        max: 5,
        step: 1,
        animate:"slow",
        range: "min",
        change: function (event, ui) {
            var slideruivalue = (ui.value);
            image = $('#image');
            image.attr('src', 'http://fakeimg.pl/350x200/?text=' + slideruivalue);
        }
    });

    $(function AutoSlider() {
        setInterval(function () {
            var value = $('#slider').slider("value");
            var max = $('#slider').slider( "option", "max" );
            $("#slider").slider("value", (value + 1)% (max+1));
        }, 3000);
    });
});