[SOLVED] Go to certain slide using javascript

balvarez_boxfish · February 2019

Hello!

I am using the Slides (not Rev Slider, but the one which is within the "Slides" section,located on the left side of the WordPress dashboard) and I am trying to navigate to certain slide using JavaScript.

The idea is that in the screen there are plenty buttons and all buttons trigger the slider to be displayed (the slider is hidden), but each button opens the slider with a different currenty active slide. The carousel still will be inside, with the arrows and all to navigate, but once the slider is closed, if a button is clicked, each button moves the slider to display a certain slide and then displays the slider.

I have been checking your code and I think your slider is a slick-slider. When I try to use the documentation of slick-slider I get the error: $(…).slick is not a function.

Additionally, changing the translation and the active classes of the slider also doesnt work perfectly.

Could you please help me? Thanks!

Pablo · February 2019

Hi,
I assume, that you inserted the JS code in the Theme Options > Custom CSS & JS > JS?

Notice, that you should use jQuery instead of a dollar ($)

http://prntscr.com/mmpn35

Thanks

balvarez_boxfish · February 2019

Hello Pablo, thank you so much for your quick response.

I did that already, I have plenty code inside a custom injected JS working with JQuery. My problem is figuring out what kind of slider you have in your theme for me to be able to manipulate it. I leave you here some pseudo code of what I am trying to achieve

jQuery(function($){

$('document').ready(function(){

window.sliderGoTo = function(slider_index){

var slider = $('.slick-slider');

slider.slick('slickGoTo', slider_index)

}

});

function sliderGoTo(sliderIndex){ // to access function from outside

sliderGoTo(sliderIndex)

}

Seems like I cannot access the slick functionality...I am just guessing based on your code that the slider is a slick slider...but maybe I am wrong...

Thanks!

Pablo · February 2019

Sorry, but we do not provide help with Custom JS code and customizing theme files.

You can use the jQuery noConflict(https://api.jquery.com/jquery.noconflict/), but we suggest to change all dollars to 'jQuery'

Thanks

balvarez_boxfish · February 2019

Hello Pablo,

I am just asking which kind of slider is the one you have in your theme, I do not manage to figure out which one is so I can manipulate it. This issue is not about how to put JQuery in your theme, is that I do not know which slides you use, so I guess the code I am using doesnt work simply because I am not using the correct plugin (js).

Isnt it possible that you provide me the type of slide?

Thanks.

Pablo · February 2019

We are using the Slick Slider on all of the slider based items.

That's why I'm trying to help you with attaching this code.

Cheers

balvarez_boxfish · February 2019

Thank you very much for your help,

Knowing that indeed the slider is a Slick Slider and having a look at my code I figured out what was the problem. I was trying to access the slick slider from an iframe, so I just needed to grab the slider outside of the iframe and attach the slick slider code inside the iframe. Just in case somebody needs help in the future, what helped me was:

// JS inside iframe

jQuery(function($){

$.noConflict();

$('document').ready(function(){

// paste here slick.min.js

window.sliderGoTo = function(slider_index){

$(".content_slider_ul", window.parent.document).slick( "slickGoTo", slider_index, true );

}

});

function sliderGoTo(sliderIndex){ // to access function outside of this file

sliderGoTo(sliderIndex)

}

[SOLVED] Go to certain slide using javascript

Comments