Using JavaScript with slider

  • Resolved mstudioIL

    (@mstudioil)


    4 years, 7 months ago

    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
    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

    (@nextendweb_gabor)

    4 years, 7 months ago

    Hi @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

    (@mstudioil)

    4 years, 7 months ago

    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

    Plugin Support Gabor

    (@nextendweb_gabor)

    4 years, 7 months ago

    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
    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 and we will take a look!

    Thread Starter mstudioIL

    (@mstudioil)

    4 years, 7 months ago

    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
    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, 7 months ago by mstudioIL.
    • This reply was modified 4 years, 7 months ago by mstudioIL.
    Thread Starter mstudioIL

    (@mstudioil)

    4 years, 7 months ago

    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, 7 months ago by mstudioIL.
    Plugin Support Laszlo

    (@laszloszalvak)

    4 years, 7 months ago

    Hi @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.