Hacking/Overriding Javascript

Question

I'm only familiar with HTML and CSS, which I use on a daily basis. !Important CSS overrides are something I have to do TONS of in order to customize websites for clients that use a 3rd party CRM system, but now I've been asked to see if I can override what a Javascript image slider does; namely if I can force it to let the images rotate out instead of showing a single image that only randomly changes out to other ones when the page refreshes. I'm not familiar enough with Javascript to know how to do this; I've used this same sort of image slider many many times over, so I know what settings need to be changed, but I don't know how to force an override like I do with CSS, or if it's even possible to tack on another on the same page that will do it.

Here's the javascript code snippet that the webpage has on it already.

<script type="text/javascript">
  $(document).ready(function () {
    var randSlick = Math.floor( Math.random() * $('#carousel > div').length );
    $('#carousel').slick({
      infinite: true,
      autoplay: false,
      autoplaySpeed: 10000,
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: false,
      fade: true
    }).slickGoTo(randSlick);
  });
</script>

I need to change the "autoplay" to true, so it will play automatically instead of do nothing, and I'd like to change the "autoplaySpeed" to something more reasonable, like 3000.

I don't have access to this part of the code (Hence why I'm always having to do CSS !Important overrides; I can't just edit the existing code directly, I have to add my own in a sneaky hackery sort or way) so I'm hoping that there's an easy way to do this. My apologies if this is long winded or confusing in any way; I've taught myself HTML and CSS easily enough but Javascript is proving to be another animal entirely and I'm just flailing around at this point.

Answer 1

To get the obvious out of the way:

1. You will not be able to modify the JavaScript code with HTML/CSS, you can only do so via JavaScript.
2. What you see in the script is JQuery, a JavaScript extension library: see: JQuery API.

I recommend that you make your own script to reset the values of the $("#carousel") via the unslick function, which is clearly documented here: see: SlickJS.

$("#carousel").slick('unslick');

Immediately after which you can bind $("#carousel") with your own parameters like so:

<script type="text/javascript">
  $(document).ready(function () {
    var randSlick = Math.floor( Math.random() * $('#carousel > div').length );
    $('#carousel').slick({
      infinite: true,
      autoplay: true,
      autoplaySpeed: 3000,
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: false,
      fade: true
    }).slickGoTo(randSlick);
  });
</script>

Make 100% sure that your JavaScript file gets called after the SlickJS import.

Any questions? Ask in the comments below :-)

Answer 2

In your page, you can deconstruct the existing slick object and recreate it with your own settings.

<script type="text/javascript">
  $(document).ready(function () {
     $('#carousel').slick('unslick'); // Destroy existing slick object
    // Start a new one with the options you want
    $('#carousel').slick({
      autoplay: true,
      autoplaySpeed: 3000
    });
  });
</script>