I have been working on a simple slider I am trying to call some methods of a slider "Class" on click of an element I add dynamically and its not working. I can't even get the on click to work at all.. What am I doing wrong!!!! any help would be greatly appreciated. I'm sure I'm just overlooking something.
(function($) {
var Slide = function(element, options) {
element = (typeof element == 'object') ? element : $(element);
options = {
easing: options.easing || "easeOut",
speed: options.speed || 500,
transition: options.transition || "slide",
width: options.width || 500,
height: options.height || 500,
next: options.next || ">",
prev: options.prev || "<"
};
var slider = {
wrap: $("<div/>"),
imgs: [],
transition: options.transition || "slide",
current: 0,
controls: $("<div class='controls'/>"),
next_control: $("<button class='prev_control control'>" + options.next + "</button"),
prev_control: $("<button class='next_control control'>" + options.prev + "</button>"),
speed: options.speed || 500,
init: function() {
var sd = this;
$(this.controls).append(this.next_control);
$(this.controls).append(this.prev_control);
//CODE IN QUESTION
this.next_control.on("click", function() {
sd.next();
});
this.prev_control.on("click", function() {
sd.previous();
});
//END IN QUESTION
$(element).append(this.controls);
this.wrap.html($(element).html());
$(this.wrap).css("margin-left", 0);
this.imgs = $(this.wrap).find("img");
$(this.imgs).css({
width: options.width,
height: options.height,
float: "left"
});
this.wrap.css({
width: (options.width * this.imgs.length) + "px",
height: options.height + "px"
});
$(element).html("").append(this.wrap);
$(element).css({
width: options.width,
height: options.height,
overflow: "hidden",
position: "relative"
})
},
next: function(_callback) {
_callback = _callback || function() {};
this.current = (this.current == this.imgs.length - 1) ? 0 : this.current + 1;
$(this.wrap).animate({
"marginLeft": "-" + (this.current * options.width) + "px"
}, options.speed);
},
previous: function(_callback) {
_callback = _callback || function() {};
this.current = (this.current == 0) ? this.imgs.length - 1 : this.current - 1;
$(this.wrap).animate({
"marginLeft": "-" + (this.current * options.width) + "px"
}, options.speed);
}
}
$(window).on("keydown", function(e) {
switch (e.which) {
case 39:
slider.next();
break;
case 37:
slider.previous();
break
}
});
slider.init();
return slider;
}
window.Slide = Slide;
})(jQuery);
var slider = new Slide("#slide_show", {
width: 500,
height: 500,
speed: 1000,
ease: "easeInOut"
});.controls {
position: absolute;
right: 0px;
margin-top: 50%;
transform: translateY(-50%);
}
.control {
height: 60px;
width: 40px;
display: block;
margin: 5px 0px;
color: white;
font-size: 30px;
border: none;
}
.next_control {
background: rgba(0, 0, 100, 0.4);
}
.prev_control {
background: rgba(124, 124, 124, 0.8);
}
.control:hover {
background: white;
color: rgba(0, 0, 0, 0.7);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slide_show">
<img src="http://dogtowndogtraining.com/wp-content/uploads/2012/06/300x300-061-e1340955308953.jpg" />
<img src="http://siliconangle.com/files/2013/10/chrome-hacked-story-300x300.jpg" />
<img src="http://www.legalproductivity.com/wp-content/uploads/2013/05/firefox-300x300.png" />
</div>
