Title: Using JavaScript with slider Last modified: August 16, 2021 --- # Using JavaScript with slider * Resolved [mstudioIL](https://wordpress.org/support/users/mstudioil/) * (@mstudioil) * [4 years, 10 months ago](https://wordpress.org/support/topic/using-javascript-with-slider/) * Some time ago you show me code how to move to other slide with clicking on layer something like this * ``` n2ss.ready(2, function(slider){ jQuery('.star').click(function(){ slider.slide(0); }); }); n2ss.ready(2, function(slider){ jQuery('.heart').click(function(){ slider.slide(1); }); }); ``` * I want to use the slider to show and hide section in the page like this: * ``` n2ss.ready(2, function(slider){ jQuery('.personal-care').click(function(){ console.log("personal-care clicked"); }); }); ``` * I used the “console.log” to check is this is working and got error n2ss is undefined, I found this [https://smartslider.helpscoutdocs.com/article/1729-move-slides-with-javascript](https://smartslider.helpscoutdocs.com/article/1729-move-slides-with-javascript) and change the code to * ``` _N2.r('#ns-ss-2', function(slider){ jQuery('.specialties').click(function(){ console.log("specialties clicked"); }); }); ``` * but I don’t see the message on the console. how can I fix this? Viewing 6 replies - 1 through 6 (of 6 total) * Plugin Support [Gabor](https://wordpress.org/support/users/nextendweb_gabor/) * (@nextendweb_gabor) * [4 years, 10 months ago](https://wordpress.org/support/topic/using-javascript-with-slider/#post-14772070) * Hi [@mstudioil](https://wordpress.org/support/users/mstudioil/)! * The IDs of our sliders are starting with #n2, not with #ns, so I think that will be the cause your problem: * ``` _N2.r('#n2-ss-2', function(slider){ jQuery('.specialties').click(function(){ console.log("specialties clicked"); }); }); ``` * Also, this part: * ``` _N2.r('#n2-ss-2', function(slider){ }); ``` * means, that you only want your code to start once our slider loaded, and we return some datas within the “slider” variable. If you don’t want to use the “slider” variable, as you just want to hide/show something on your page, you won’t really need our code at all, but you could use simple jQuery: * ``` jQuery(document).ready(function(){ jQuery('.specialties').click(function(){ console.log("specialties clicked"); }); }); ``` * This should work as well and pure jQuery might be easier to debug or see issues with it. * Thread Starter [mstudioIL](https://wordpress.org/support/users/mstudioil/) * (@mstudioil) * [4 years, 10 months ago](https://wordpress.org/support/topic/using-javascript-with-slider/#post-14772131) * Thanks, I don’t know why I add #ns and not #n2. maybe I copied wrong or typed to fast I added moving the other slide, but it now working * ``` _N2.r('#n2-ss-2', function(){ jQuery('.specialties').click(function(){ console.log("specialties clicked"); var slider = _N2['#n2-ss-2']; slider.slideToID(0); }); }); ``` * I used [https://smartslider.helpscoutdocs.com/article/1729-move-slides-with-javascript#id](https://smartslider.helpscoutdocs.com/article/1729-move-slides-with-javascript#id) * Plugin Support [Gabor](https://wordpress.org/support/users/nextendweb_gabor/) * (@nextendweb_gabor) * [4 years, 10 months ago](https://wordpress.org/support/topic/using-javascript-with-slider/#post-14772214) * In this code this part will be wrong: `slider.slideToID(0);` * slideToID means, that you are using the slide’s ID number to identify it: [https://smartslider.helpscoutdocs.com/article/1955-slider-and-slide-id#slideid](https://smartslider.helpscoutdocs.com/article/1955-slider-and-slide-id#slideid) which is a bigger than 0 number. If you check out the real ID number as written in this documentation, that should work out well. * Or use: `slider.slide(0);` * instead, to switch to the 1st slide. * If it still won’t work out, please send me a link to your page, either here or to [support@nextendweb.com](https://wordpress.org/support/topic/using-javascript-with-slider/support@nextendweb.com?output_format=md) and we will take a look! * Thread Starter [mstudioIL](https://wordpress.org/support/users/mstudioil/) * (@mstudioil) * [4 years, 10 months ago](https://wordpress.org/support/topic/using-javascript-with-slider/#post-14772325) * I still working on it, I using `slider.slide(0);` it easier not to search for the id, it is easy when you know it is array 0 zero based. I used this before, I changed because what I saw in the example `slider.slide(0);` is better. By the way, I think you have error here [https://smartslider.helpscoutdocs.com/article/1729-move-slides-with-javascript#id](https://smartslider.helpscoutdocs.com/article/1729-move-slides-with-javascript#id) It wrote * > For the tutorials, I’ll use 1 as the slider ID. * but the code is * ``` _N2.r('#n2-ss-10', function(){ var slider = _N2['#n2-ss-10']; slider.previous(); }); ``` * So the id is 10 - This reply was modified 4 years, 10 months ago by [mstudioIL](https://wordpress.org/support/users/mstudioil/). - This reply was modified 4 years, 10 months ago by [mstudioIL](https://wordpress.org/support/users/mstudioil/). * Thread Starter [mstudioIL](https://wordpress.org/support/users/mstudioil/) * (@mstudioil) * [4 years, 9 months ago](https://wordpress.org/support/topic/using-javascript-with-slider/#post-14783020) * I have other question, how it is better to use to code? like this: * ``` _N2.r('#n2-ss-2', function(){ jQuery('.specialties').click(function(){ var slider = _N2['#n2-ss-2']; slider.slide(1); jQuery('.first-text').addClass('hide-text'); jQuery('.product-detail').css({"display":"none","visibility":"hidden"}); jQuery('#product-specialties').css({"display":"block","visibility":"visible"}); }); }); _N2.r('#n2-ss-2', function(){ jQuery('.personal-care').click(function(){ var slider = _N2['#n2-ss-2']; slider.slide(2); jQuery('.first-text').addClass('hide-text'); jQuery('.product-detail').css({"display":"none","visibility":"hidden"}); jQuery('#product-personal-care').css({"display":"block","visibility":"visible"}); }); }); ``` * or it is better to use one `_N2.r('#n2-ss-2', function(){...}` and add the code there? I going to add hover function to all the function and I have 7 functions - This reply was modified 4 years, 9 months ago by [mstudioIL](https://wordpress.org/support/users/mstudioil/). * Plugin Support [Laszlo](https://wordpress.org/support/users/laszloszalvak/) * (@laszloszalvak) * [4 years, 9 months ago](https://wordpress.org/support/topic/using-javascript-with-slider/#post-14784535) * Hi [@mstudioil](https://wordpress.org/support/users/mstudioil/) * The codes inside the anonymous function: * ``` _N2.r('#n2-ss-2', function(){ ... }); ``` * will run when the slider with the ID 2 is ready, so you don’t need to put this code into the function itself again and again. Viewing 6 replies - 1 through 6 (of 6 total) The topic ‘Using JavaScript with slider’ is closed to new replies. * ![](https://ps.w.org/smart-slider-3/assets/icon.svg?rev=2307688) * [Smart Slider 3](https://wordpress.org/plugins/smart-slider-3/) * [Frequently Asked Questions](https://wordpress.org/plugins/smart-slider-3/#faq) * [Support Threads](https://wordpress.org/support/plugin/smart-slider-3/) * [Active Topics](https://wordpress.org/support/plugin/smart-slider-3/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/smart-slider-3/unresolved/) * [Reviews](https://wordpress.org/support/plugin/smart-slider-3/reviews/) * 6 replies * 3 participants * Last reply from: [Laszlo](https://wordpress.org/support/users/laszloszalvak/) * Last activity: [4 years, 9 months ago](https://wordpress.org/support/topic/using-javascript-with-slider/#post-14784535) * Status: resolved