We Keep Coding

SlickJs controls do not work after being re-loaded via AJAX

I have a slickJS carousel that I am using with ~ 12 menu items. On a message from a websocket connection, the page is re-loaded with up-to-date information via AJAX, the HTML including the slickJS carousel. The carousel re-initializes fine cosmetically, however the controls (arrows, click-n-grab) do not work. I can pick a new 'menu item' from the current view but nothing else is functional. I have also tried manually re-initializing slick using
$('.my-menu-list').slick('unslick').slick('reinit');
but that yields the same result. For reference, my init command for slick is
$(document).ready(function(){
$('.my-menu-list').slick({
arrows: true,
infinite: true,
lazyLoad: 'progressive',
speed: 600,
slidesToShow: 4,
slidesToScroll: 4,
initialSlide: $('.my-menu-list.active').data('slick-index')
});
});
and it is loaded from an external file.

Hacking/Overriding Javascript

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.

To get the obvious out of the way:
You will not be able to modify the JavaScript code with HTML/CSS, you can only do so via JavaScript.
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 :-)

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>

I have created Custom easing using js ? trying to run I am getting error

i have created Custom easing.after finally run the code i am getting error. please anybody help.
JS:
$('.bxslider').bxSlider({
mode: 'horizontal',
useCSS: false,
hideControlOnEnd: true,
easing: 'easeOutElastic',
speed: 2000
});

Add infiniteLoop: false to your options.

Slick Carousal Uncaught TypeError: undefined is not a function?

I have this script for a Slick Carousel within some Ajax Tabs and I keep getting the Uncaught TypeError: undefined is not a function error, not quote sure what it's referring to?
$(document).ready(function(){
$('.single-item').slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: false,
autoplaySpeed: 7000
});
});

Check which version of jquery is included and that there is only one instance. I've ran into this issue too and was able to fix it by upgrading my jquery.

FlexSlider does not work - "Uncaught TypeError: undefined is not a function" (Typo3)

I'm trying to use the FlexSlider extension (1.50) on my Typo3 script. FlexSlider needs jQuery, so I added it by the extension T3 jQuery. Unfortunately the FlexSlider does not work. I get the following error:
"Uncaught TypeError: undefined is not a function".
It refers to the second line of this code block:
<script type="text/javascript">
$(window).load(function() {
$('#fs-182.flexslider').flexslider(
{
animation: "fade",
slideDirection: "horizontal",
slideshow: false,
slideshowSpeed: 7000,
animationDuration: 600,
controlNav: true,
directionNav: false,
keyboardNav: false,
mousewheel: false,
prevText: "Previous",
nextText: "Next",
pausePlay: false,
pauseText: "Pause",
playText: "Play",
randomize: false,
animationLoop: true,
pauseOnHover: false
});
});
</script>
Does anyone has an idea how to solve this problem?
Edit: jQuery is added two times to the file. In the header and in the body. I think the one in the header is added by T3 jQuery - it's the same version I choosed in the properties of T3 jQuery (2.1.0). The one in the body is an older version (1.10.2).

This means that jQuery is not defined so you just need to figure out why it's not defined. Loading it twice is not a good thing.
You should only need to load jQuery once, and make sure it's loaded before this script is.
Other than that you could try replacing $ with the actual text jQuery.
jQuery(window).load(function($) {
Or you could try wrapping it in an anonymous function
(function() {
})();