Блог

У меня есть базовый слайдер, который я создал: https://jsfiddle.net/n68pgfvs /

Что я хочу сделать, так это вместо того, чтобы делать его статичным только для класса, я хотел преобразовать его в плагин, чтобы я мог использовать его несколько раз на одной странице.

Я просматривал эту страницу, чтобы создать простую для начала: https://learn.jquery.com/plugins/basic-plugin-creation /

Итак, я придумал следующее (в качестве теста):

 <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>
  

Основываясь на руководстве, он должен изменить цвет текста, но этого не произошло.

Как я могу это решить?

Кроме того, каков наилучший способ преобразовать мои статические коды из моего слайдера в плагин, который будет использоваться много раз?

Вы вызываете свой плагин перед его определением. Измените порядок, и он работает нормально:

 (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>