Override default responsive theme components

Hello,

I am trying to override the default values in the responsive theme. We have created our  own theme which extends the responsive theme. In our website I am trying to use the jquery image slider component that is included in the responsive theme. The default value of autoSlide is set to false and I would like to change this to true so that the images slide automatically after every 5 seconds.
I tried the following ways to do this:

  1. Using the override method.
    Below is the new plugin that I have created ( jquery.image-slider.js) and added to  themes / Frontend / MyTheme / frontend / _public / src / js /. I also added
    protected $javascript = [
        ‚src/js/jquery.image-slider.js‘
    ]
    to my Theme.php file. My plugin file looks like this:

;(function (, window) {     'use strict';     .overridePlugin(‚swImageSlider‘, {

      defaults: {
          autoSlide: true
                    
      },
      init: function () {
          var me = this;
          me.superclass.init.apply(this,arguments);
      }    
    });
});

  1. I also tried this in my plugin file:
    $.plugin(‚swImageSlider‘, {
        defaults: {
            ‚autoSlide‘: true
        }
    });

  2. I added the below code to my html file

 

These options did not work. Can somehow guide me as to what I am doing wrong.

Thak you in advance.

The html code is: div class=“image-slider” data-image-slider=“true” autoSlide = “true”