Hacking/Overriding Javascript

Question

Ho solo familiarità con HTML e CSS, che uso quotidianamente. !Important Le sostituzioni CSS sono qualcosa che devo fare TON al fine di personalizzare i siti Web per i client che utilizzano un sistema CRM di terze parti, ma ora mi è stato chiesto di vedere se riesco a scavalcare ciò che fa un cursore di immagini Javascript; vale a dire se posso forzarlo a lasciare che le immagini ruotino fuori invece di mostrare una singola immagine che cambia solo casualmente ad altre quando la pagina si aggiorna. Non ho familiarità con Javascript per sapere come farlo; Ho usato lo stesso tipo di dispositivo di scorrimento delle immagini molte volte, quindi so quali impostazioni devono essere modificate, ma non so come forzare un override come faccio con i CSS, o se è persino possibile virare su un altro sulla stessa pagina che lo farà.

Ecco lo snippet di codice javascript che la pagina Web ha già su di esso.

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

ho bisogno di cambiare il "autoplay" a true, in modo che giocherà automaticamente, invece di fare nulla, e mi piacerebbe cambiare il "autoplaySpeed" a qualcosa di più ragionevole, come 3000.

Non ho accesso a questa parte del codice (quindi perché devo sempre fare CSS! Importanti sostituzioni, non posso semplicemente modificare direttamente il codice esistente, devo aggiungere il mio in una subdolo hackeraggio sorta o via d'uscita) quindi spero che ci sia un modo semplice per farlo. Le mie scuse se questa è lunga o confusa in alcun modo; Mi sono insegnato molto facilmente HTML e CSS, ma Javascript sta dimostrando di essere un altro animale interamente e sto solo agitandomi a questo punto.

Answer 1

Per ottenere l'ovvio fuori strada:

1. Non sarà in grado di modificare il codice JavaScript con HTML/CSS, è possibile farlo solo tramite JavaScript.
2. Quello che vedi nello script è JQuery, una libreria di estensioni JavaScript: see: JQuery API.

vi consiglio di fare il proprio script per ripristinare i valori della $("#carousel") tramite la funzione unslick, che è chiaramente documentato qui: see: SlickJS.

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

Subito dopo il quale è possibile associare $("#carousel") con i propri parametri in questo modo:

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

Assicurarsi al 100% che il file JavaScript viene chiamato dopo l'importazione SlickJS.

Hai qualche domanda? Chiedi nei commenti qui sotto :-)

Answer 2

Nella pagina, è possibile decostruire l'oggetto esistente slick e ricrearlo con le proprie impostazioni.

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