How to create an simple slider using jquery(not using plug in)?

Question

How to create an simple slider using jquery(not using plug in)?

1.1k views Asked by Raghul Rajendran At 18 November 2024 at 20:44

<script>
   var img = function(){
      $("#slider").animate({"left":"-=1775px"},10000,function(){
         $("#slider").animate({"left":"0px"},10000);
         img();
      });
   };
   img();
</script>

I used animation properties in jquery but i want the loop to display the three image continuously.

Original Q&A

There are 2 answers

**luckyape** · Answer 1 · 2015-06-25 16:55:24

I once created a small js plugin that does this, you can see the code here:

$.fn.luckyCarousel = function(options) {
var car = this;
var settings = $.extend( {
  'delay'         : 8000,
  'transition' : 400
}, options);
car.append($('<div>').addClass('nav'));
var nav = $('.nav', car);
var cnt = $("ul", car);
var car_w = car.width();
var carItems = $('li', car);
$(cnt).width((carItems.length * car_w) + car_w);
$(carItems).each(function(i) {
    var dot_active = (!i) ? ' active' : '';
    $(nav).prepend($('<div>').addClass('dot dot' + i + dot_active).bind('click', function(e) {
        slideSel(i);
    }));
});
$(carItems).css('visibility', 'visible');
$(cnt).append($(carItems).first().clone());
car.append(nav);
var sel_i = 0;
var spin = setInterval(function() {
    slideSel('auto')
}, settings.delay);
function slideSel(i) {
    if (i == 'auto') {
        sel_i++;
        i = sel_i;
    } else {
        clearInterval(spin)
    }
    var position = $(cnt).position();
    var t = car_w * -i;
    var last = false;
    var d = t - position.left;
    if (Math.abs(t) == cnt.width() - car_w) {
        sel_i = i = 0;
    }
    $(cnt).animate({
        left: '+=' + d
    }, settings.transition, function() {
        $('.dot', car).removeClass('active');
        $('.dot' + i, car).addClass('active');
        if (!sel_i) {
            $(cnt).css('left', '0');
        }
    });
    sel_i = i;
}
}

http://plnkr.co/edit/bObWoQD8sGYTV2TEQ3r9

https://github.com/luckyape/lucky-carousel/blob/master/lucky-carousel.js

The code has been adapted to be used without plugin architecture here: http://plnkr.co/edit/9dmfzcyEMtukAb4RAYO9

Hope it helps, g

**Selim Reza** · Answer 2 · 2017-01-15 07:27:02

var Slider = new function () {
    var that = this;
    var Recursion = function (n) {
        setTimeout(function () {
            console.log(n);
            $('#sub_div img').attr('src', '/Images/' + n + '.JPG').addClass('current'); // n like 1.JPG,2.JPG .... stored images into Images folder.
            if (n != 0)
                Recursion(n - 1);
            else
                Recursion(5);
        }, 3000);
    };
    var d = Recursion(5);
};

    var Slider = new function () {
        var that = this;
        var Recursion = function (n) {
            setTimeout(function () {
                console.log(n);
                $('#sub_div img').attr('src', '/Images/' + n + '.JPG').addClass('current'); // n like 1.JPG,2.JPG .... stored images into Images folder.
                if (n != 0)
                    Recursion(n - 1);
                else
                    Recursion(5);
            }, 3000);
        };
        var d = Recursion(5);
    };

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="~/JS/Ajaxcall.js"></script>
    <title>Index</title>
</head>
<body>
    <div style="background: rgb(255, 106, 0) none repeat scroll 0% 0%; padding: 80px;" id="slider_div">
        <div id="sub_div">
            <img src="~/Images/0.JPG" style="width: 100%; height: 452px;">
        </div>
    </div>
</body>
</html>

TechQA.

How to create an simple slider using jquery(not using plug in)?

There are 2 answers

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in LOOPS

Related Questions in ANIMATION

Related Questions in IMAGE-GALLERY

Popular Questions

Popular Tags

Trending Questions