Here is a basic slider using jQuery and we will integrated and created with our plugin especially bootstrap 3. oke, i will grab image from flickr and then i will show images in slider, basic slider just fade in and fade out and add interval duration 3 seconds.

Create jQuery plugin name with the namespace is important, i suggested using camel case for your plugin name. following the code above :

$.fn.mySlider = function (settings) { 
var opts = $.extend({}, $.fn.mySlider.defaults, settings);
var $elm = this;
this.children(":gt(0)").hide();
setInterval(function () {
$elm.children().eq(0)
.fadeOut(1000)
.next()
.opts.effect
.end()
.appendTo($elm);
}, opts.timeout || 3000
);
};

calling your slider with your element is simple just like this :
$(“#yourSelector”).mySlider();

 

Leave a Comment:



digital_ocean