I am trying to implement a slick slider in a wordpress website. the jquery isnt working. Am i doing something wrong because im not seeing a error.
;(function($){
class SlickCarousel {
constructor() {
this.initiateCarousel();
}
initiateCarousel() {
console.log('works');
$('.post-carousel').slick();
}
}
new SlickCarousel(); })(jQuery);
replace $ with jQuery in all instances - the $ conflicts with WP code.
Related
I'm trying to use owl carousel in a wordpress ACF custom block.
owl carousel works if I don't put jQuery(document).ready in my script.
But if I have jQuery(document).ready, the console tells me "jQuery (...). OwlCarousel is not a function".
Then i don't know if there is link beetwen both but i have thumbnail gallery to click for launch slider on specific image and that code :
jQuery('.single_image_gallery').click(function(){
mySlide = parseInt(jQuery(this).attr('data-slide'));
jQuery(mySlider).trigger("to.owl.carousel", [mySlide, 1,true])
})
not working at all.
i know there is problem with jQuery migrate for wp 5.5 but I tried with the plugin "Enable jQuery Migrate Helper" and the result is the same....
Try doing this.. Sometimes plugins can interfere with jQuery
jQuery(function($) {
// then use it like this
$('.single_image_gallery').click(function(){
mySlide = parseInt($(this).attr('data-slide'));
$(mySlider).trigger("to.owl.carousel", [mySlide, 1,true])
});
});
This way you import $ locally and it should prevent it from interfering with other global scripts or plugins
I'm working on a Magento2 site. Magento2 uses requirejs and the theme I'm using makes use of it as well. Part of the theme uses Owl Carousel. The code used to load the carousel was originally
require(['jquery', 'owl.carousel/owl.carousel.min'], function($) {
$("#banner-slider-demo-1").owlCarousel({
// carousel settings
});
});
However I noticed sometimes when I load the homepage (where the carousel is used) the carousel doesn't display, and there are errors in the console
Uncaught TypeError: $(...).owlCarousel is not a function
Thinking jQuery might not be loaded, I changed the require code to serialize the requirements
require(['jquery'], function($) {
require(['owl.carousel/owl.carousel.min'], function () {
$("#banner-slider-demo-1").owlCarousel({
// ...
but this had no effect... Sometimes the carousel loads and there are no errors, other times there are errors and it doesn't load.
Even when there is an error the carousel file has been fetched by the browser. It also seems require has loaded the carousel script per developer tools
Any idea what could be going on?
Your issue is that you are loading jQuery through a script element and through RequireJS. You have to use one method, not both.
If I run this in the console:
console.log("owlCarousel", typeof jQuery.fn.owlCarousel)
I get:
owlCarousel function
But with this:
require(["jquery"], function ($) {
console.log("owlCarousel", typeof $.fn.owlCarousel);
})
I get:
owlCarousel undefined
And if you try require(["jquery"], function ($) { console.log("equal", $ === window.jQuery); }) you'll get equal false. So you have two instances of jQuery loaded. The code that uses RequireJS to access jQuery gets a version without .owlCarousel. That's because Owl Carousel installed itself on window.jQuery.
If you must load jQuery through script for some reason, you should move the script element that loads it before you load RequireJS. (You should do this for all scripts you load that you want to load with script and that are AMD-aware.) Then for RequireJS, you should just define this fake module:
define("jquery", function () {
return jQuery;
});
This makes it so that when RequireJS loads jQuery it just uses the jQuery already defined in the global space. The ideal place for this fake module would be just before you configure RequireJS.
While you're at it you should define a shim for owl.carousel/owl.carousel.min:
`owl.carousel/owl.carousel.min`: ['jquery']
This way there's no need to nest the call to load owl.carousel/owl.carousel.min inside a call to load jquery. You can just do what you were trying initially:
require(['jquery', 'owl.carousel/owl.carousel.min'], function($) {
$("#banner-slider-demo-1").owlCarousel({
// carousel settings
});
});
I added a class (format-date) to a custom field in Post Grid but I can't seem to apply any JS to it.
<div class="vc_gitem-post-meta-field-_EventStartDate format-date vc_gitem-align-left"> 2015-10-08 07:30:00</div>
Simple jQuery test:
$('.format-date').addClass('test')
Code is in the footer and I've tried $(window).load(function() $(document).ready(function(). No JS errors in Fire Bug.
I suspect it's due to the loading animation applied to the posts. How can I call my JS after this has loaded?
This worked:
$(document).ajaxStop(function() {
// your code here
});
hello can I get some tips on how i can test if I have implemented jquery.dimensions correctly?
http://archive.plugins.jquery.com/project/dimensions
sort of like when u test for jquery,
$(document).ready(function() {
alert('hi');
});
I am trying to implement a floating menu bar on a site. suspect that I have not installed dimensions correctly.
You can test if a plugin is loaded with:
if(jQuery().somePluginName) {
// plugin is loaded
}
I am working on a template for Joomla 2.5.x, using Twitter Bootstrap. I also want to use the Bootstrap Carousel Plugin for that template.
I got a problem when the Carousel is used with Joomla´s Mootools implementation. The style of the Carousel element is getting changed with a negative margin, making it invisible for the user. To show you exactly whats happening I have prepared a jsfiddle http://jsfiddle.net/U2pHH/11/ for you.
The Carousel is making every second image not visible to the user due to the Carousels changing style attribute, but the user should see every slide.
I have looked already into the sourcecode of the Carousel Plugin and Mootools JS Files but sadly couldnt work out the cause of the problem. I thought maybe its some naming-problem of functions/classes between jQuery and Mootools but couldnt find any problem there.
I hope you can help me out here.
Edit: I figured out it has something to do with the Fx.Slide class of mootools-more.js, deleting the class out of the sourcecode solved the problem. But thats still no really solution, any help is still very appreciated.
Here is the fix specific to Joomla and mootools more ,
add this code after jq call , it can be in any js file
add
if (typeof jQuery != 'undefined') {
(function($) {
$(document).ready(function(){
$('.carousel').each(function(index, element) {
$(this)[index].slide = null;
});
});
})(jQuery);
}
Another implementation of the same thing that Benn provided is
if (typeof jQuery != 'undefined' && typeof MooTools != 'undefined' ) {
Element.implement({
slide: function(how, mode){
return this;
}
});
}
What I finally ended up with - I created custom Mootools More build without Fx.Slide
The problem is that Mootools more is in conflict with twitter bootstrap, that's why its acting weird the carousel. I suggest you using just jQuery or just Mootools. There is a bootstrap Mootools implementation here: https://github.com/anutron/mootools-bootstrap
Having the same issue.
I'm using a plugin called JB Library ( http://www.joomlabamboo.com/joomla-extensions/jb-library-plugin-a-free-joomla-jquery-plugin ) and this has options to remove Mootools and/or Mootools More from the admin.
After turning 'off' Mootools More the issue with the Carousel is 'fixed'. Might be an easier sollution than commenting stuff out with regards to updates. Unless you need mootools-more.js for other stuff on the site of course.
Hopefully a better sollution comes along soon.
Had the same issue: Bootstrap carousel was not working in registered frontend, since mootools-more.js loaded.
My solution:
The Jquery Easy Plugin ( http://www.simplifyyourweb.com/index.php/downloads/category/8-loading-jquery ) with the option "Remove Mootools when possible" under Advanced Options.
(function($)
{
$(document).ready(function(){
var bootstrapLoaded = (typeof $().carousel == 'function');
var mootoolsLoaded = (typeof MooTools != 'undefined');
if (bootstrapLoaded && mootoolsLoaded) {
Element.implement({
hide: function () {
return this;
},
show: function (v) {
return this;
},
slide: function (v) {
return this;
}
});
}
});
})(jQuery);