We Keep Coding

Go to certain Slide of Swiper within Elementor Pro

I'm using the slides widget of Elementor Pro which is based on swiper.js and want to make use of the slideTo() function which the swiper offers to slide to a certain slide. I could not find a way to address the slider with javascript. I tried to add something like
$('.btn').on('click', function() {
mySwiper.slideTo(2)
});
or
$('.btn').on('click', function() {
mySwiper[0].slideTo(2); // in case there is more than one swiper element
});
But that did not work, since I could not identify the slider.
Analysising Elementor's frontend.js I still could not find out how the swiper instances are called within the plugin.
Has anyone managed to managed a way to call swiper sliders that come from Elementor?
Thanks in advance.
The question probably can also be related to this question
Identify Reference to Destroy & Re-Initialize Swiper in Elementor

You can give an ID to the Elementor widget ex: slider1 and then with JS you can use:
var sliderInstance = document.querySelector('#slider1 .swiper-container').swiper;
After this you can call sliderInstance.slideTo(2) wherever you want.

The code above didn't work for me, because I used the 'AE-elementor Post Blocks' to show woocommerce products as a slider. It helped me along the way tough, so i'll post my solution here for those who arent sliding pictures, but post trough 'AE Post Blocks'
The code above returned a null, so i couldn't reach my slider. This is how I eventually did:
var mySwiper = new Swiper ('#slider1 .swiper-container');
mySwiper.slideTo(2);
In some cases it is possible that the script of the slider is overwriting your custom code, because it is added later on. That was the case in my project, so I've put a little delay on the script.
setTimeout( function(){
var mySwiper = new Swiper ('#gr-week-swipe .swiper-container');
mySwiper.slideTo(2);
} , 500 );
Now its working fine. Thanks #AlanRezende, your code helped me along the way!

How Do I Combine These Two JQuery Statements?

How do I combine these two JQuery statements? This is for a bootstrap carousel manipulated with JQuery.
$('.carousel').carousel(randomNumber);
and
$('.carousel').carousel({ interval: 6500 })
The first statement sets a random slide, and the second sets the interval. I know this should be relatively easy but I've had some trouble figuring it out and I can't find any other examples.

The two methods are totally different.
This method is to set options for a carousel which can contain interval, pause, and wrap.
$('.carousel').carousel({ interval: 6500, pause: "hover", wrap: true });
However, this method is to set a current slide.
$('.carousel').carousel(number);
It's impossible to call the methods at the same time, but you can use chaining like below:
$('.carousel').carousel({ interval: 6500}).carousel(randomNumber);
Check here
You will see the carousel moving to the 3rd slide as soon as it loads.

masonry.js div reset when select link

Hey so here's the website I'm working http://trevormsmith.com/linx/art.html
Trying to build a filter system (in the footer), and when you click on the specific categories (minimalist, typographic, abstract) masonry resets the images into a single column, instead of the grid. If you resize the browser, it'll readjust to normal.
This is what I have calling masonry to the containers with the images
Also, when I set the #minimalist, #typographic, #abstract to display:show instead of display:none (which it needs to be), the layout is fine and it works smoothly.
Any suggestions?
Edit: So here's the code that is working only for #minimalist, except the masonry is not being triggered and the images stay floated instead of tiling:
EditEdit: here's the current code, #containers fade in as a single column instead of grid layout: http://jsfiddle.net/T6SDb/1/
Calling the masonry:
$( function() {
$('#container-all, #minimalist, #typographic, #abstract').masonry({
itemSelector: '.item, .item-m, .item-t, .item-a',
columnWidth: 7 }); });
And then the fadein/fadeout for the filter:
$('#btn-all').click(function(e){
$('#minimalist, #typographic').fadeOut('slow', function(){
$('#container-all').delay(1000).fadeIn('slow', function(){
});
});});
$('#btn-m').click(function(e){
$('#container-all, #typographic').fadeOut('slow', function(){
$('#minimalist').delay(1000).fadeIn('slow', function(){
$('#container-all').masonry('layout');
});
}); });
$('#btn-t').click(function(e){
$('#container-all, #minimalist').fadeOut('slow', function(){
$('#typographic').delay(2000).fadeIn('slow', function(){
$('#container-all').masonry('layout');
});
}); });
$('#btn-a').click(function(e){
$('#container-all, #typographic, #minimalist').fadeOut('slow', function(){
$('#abstract').delay(2000).fadeIn('slow', function(){
$('#container-all').masonry('layout');
});
}); });

Try calling masonary('layout') after fading in the selected images, i.e. for the container-all (from your filter.js file) try this:
$('#btn-all').click(function(e){
$('#minimalist, #typographic').fadeOut('slow', function(){
$('#container-all').delay(1000).fadeIn('slow', function(){
$('#container-all').masonry('layout');
});
});
});
I'm only testing this from the JavaScript console so you might need to tweak the timing / positioning. I'm doing it when the fade is complete, you might want to try doing just after the start of the fade.
Edit
It may be because of the way your containers are put together and how you start masonary, perhaps you can do this in your main source:
var mason;
$( function() {
mason = $('#container-all, #minimalist, #typographic, #abstract').masonry({
itemSelector: '.item, .item-m, .item-t, .item-a',
columnWidth: 7});
});
});
Then later you can use mason.masonary('layout') in each of your click functions rather than referring to a single container, i.e. for the first one try:
$('#btn-all').click(function(e){
$('#minimalist, #typographic').fadeOut('slow', function(){
$('#container-all').delay(1000).fadeIn('slow', function(){
mason.masonary('layout');
});
});
});
Depending when you want things to appear and rearrange you might want to fadeTo a certain value then do the layout and then complete the fade (or you could do that on a delay too).
Maybe look at the Masonary functions hide and reveal to remove given elements.
It may also make things easier to work with the items themselves rather than the containers (since everything gets rearranged) and just have one outside container for everything.
I'd also suggest trying a simpler example (maybe just colored divs or something), working with that, and posting it if you still have issues. There may be some interaction between the libraries you are using.
Edit 2
Added Fiddle, that uses the separate mason variable above. It works but, again, you might need to do something about the timing of the fade in / fade out -- of course you can't arrange the things until they're visible which is an issue. I'm not sure of the best way to fix that.

select box jquery transition not working

I am trying to use this: http://abeautifulsite.net/blog/2011/01/jquery-selectbox-plugin/
to add a transition by default to my select-box.
This is the bit of JavaScript:
$(document).ready( function() {
$("SELECT").selectBox()
$("SELECT").click( function() {
$("SELECT").selectBox('settings', {
'menuTransition': 'slide',
'menuSpeed' : 'fast'
});
});
});
I can't seem to make it slide by default. What am I doing wrong? I was able to get it to work by including a separate button exactly like in the demo page. But I want it to use the slide animation by default and can't see/figure out what is wrong?

The selectBox plugin looked interesting so I tried it out and I believe your issue is that you are trying to dynamically set the transition type to slide but you want to create the selectBox with different settings than the default ones, try this:
$(document).ready( function() {
$("SELECT").selectBox({
menuTransition : 'slide',
menuSpeed : 'fast'
});
});
Here is a working example of this solution: http://jsfiddle.net/jasper/APzDJ/

jQuery Galleria plug-in: Make auto-play?

I am using this jQuery plugin
It is very nice, but I can't seem to figure out how to get it to auto-play. (automatically transition to the next image at an interval)
Has anyone else gotten this to do that?

$('#galleria').galleria({
extend: function() {
this.play(4000); // will advance every 4th second
}
});

Actually the new version of galleria has an option for autoplay. looks like this:
(where .test is the name of the div layer containing your images)
<script>
// Load theme
Galleria.loadTheme('../src/themes/classic/galleria.classic.js');
$('.test').galleria({
autoplay: 1000
});
</script>

In my experience, it doesn't have that option. You'd have to hack it to add that.
You might want to consider using another slider plugin: Easy Slider, Galleriffic, Pikachoose