Databases
StackOverflow2013
Postsdbo
POjQuery plugin for carousel
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery plugin for carousel
    text
    copied!<p>So I'm brand new to plugin development, and I've been working on an image carousel, and would like to make it into a plugin. I thought I had it figured out, but can't seem to get it right. The init function won't call. Here's my plugin code:</p> <pre><code>// Plugin (function( $ ){ $.fn.customSlider = function(options){ var config = $.extend({ // TODO: add all configuration options needed 'slideCount': null, 'delayTime': 1000 }, options); var slideCount = this.find('div.slide').length, rotate = function(i){ // TODO: make name more descriptive setInterval(function() { if (i &lt; slideCount -1) { i++; } else { i=0; } slideRotate(i); }, delayTime); }, slideRotate = function(i){ var asdf = null; $('.slider').children().fadeOut(500); $($('.slider div').get(i)).fadeIn(500); // TODO: externalize $('.slider div').get(i) into variable }, gotoSlide = function(i){ customSlider.rotate(i-1); }, init = function(){ console.log('init'); this.find('div:first').show(); customSlider.rotate(0); }, clickzor = function() { // TODO: make selector more specific clearInterval(intervalID); intervalID = null; var num = parseInt($(this).text(),'') - 1; slideRotate(num); gotoSlide(num+1); }; $('a').click(clickzor); }; customSlider.init(); // init })( jQuery ); $(function(){ $('#headSlider').customSlider(); }); </code></pre> <p>Here is my working non-plugin code: </p> <pre><code>$(function() { $('#headSlider div.slide:first').addClass('active').show(); var slideCount = $('.slider div.slide').length; var delayTime = 6000; var intervalID; function slideRotate(i) { $('.slider').children().fadeOut(500); $($('.slider div').get(i)).fadeIn(500); } function rotate(i) { intervalID = setInterval(function() { if(i &lt; slideCount -1) { i++; } else { i=0; } slideRotate(i); }, delayTime); } function gotoSlide(i) { rotate(i-1); } $('a').click(function() { clearInterval(intervalID); intervalID = null; var num = parseInt($(this).text(),'') - 1; slideRotate(num); gotoSlide(num+1); }); rotate(0); }); </code></pre> <p>I just can't figure out what I'm doing wrong. Help!</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload