CODEWITHSUNDEEP
jqueryhtmlplugins
SearchForKnowledge
SearchForKnowledge

Reputation: 3751

Why is the plugin not executing

I have a basic slider that I created: https://jsfiddle.net/n68pgfvs/

What I am looking to do is, instead of making it static to just a class, I wanted to convert it into a plugin so I can use it multiple times at the same page.

I was looking through this page to create a simple one to begin with: https://learn.jquery.com/plugins/basic-plugin-creation/

So I came up with the following (as a test):

<div>
    <div class="test1">This is a test</div>
</div>
<script>
    $(".test1").SliderS({
        color: "#00FF00"
    });
</script>
<script>
    (function ($) {
        $.fn.SliderS = function (options) {
            var settings = $.extend({
                autoSlide: 1,
                timeoutSet: 4000,
                displayNav: 1,
                color: "#F00FFF"
            }, options);

            return this.css({ color: settings.color });
        };
    }(jQuery));
</script>

Based on the tutorial it should change the text color but it didn't.

How can I resolve it?

Also, what is the best way to convert my static codes from my slider into a plugin to be used many times?

Upvotes: 0

Views: 34

Answers (1)

Turnip
Turnip

Reputation: 36632

You are calling your plugin before you define it. Switch the order and it works fine:

(function($) {
  $.fn.SliderS = function(options) {
    var settings = $.extend({
      autoSlide: 1,
      timeoutSet: 4000,
      displayNav: 1,
      color: "#F00FFF"
    }, options);

    return this.css({
      color: settings.color
    });
  };
}(jQuery));

$(".test1").SliderS({
  color: "#00FF00"
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <div class="test1">This is a test</div>
</div>

Upvotes: 2

Related Questions