Example 1 - Navigation & Event on image items

Plan

I will create a Manual slider with three slides, and on the three slides there will be a Flipper, an Image and a Caption item. I will put our javascript code on the Image and Flipper item, so they will be my navigations, and the Caption item will have the main Image.

Preparation

In our javascript api the id of the slider is needed. The fastest way to know it, if you just check the link in your admin page, where you are, and there will be in my case sliderid=100059 with your slider’s id.

http://example.com/administrator/index.php?option=com_smartslider2&controller=slides&view=sliders_slides&action=edit&sliderid=100059&slideid=100196

Also you need to keep in mind, that in the javascript code 0 is the 1st slide, 1 is the 2nd, 2 is the 3rd, etc.

Slide 1

This code will go into the first slide’s Flipper item’s Event on mouseclick option to make it go to the 2nd slide:

njQuery('#nextend-smart-slider-100059').smartslider('goto',1);

event_on_mouseclick1
And this on the Image item’s Event on mouseclick option to make it go to the 3rd slide:

njQuery('#nextend-smart-slider-100059').smartslider('goto',2);

Slide 2

The Flipper item’s Event on mouseclick code to go to the 3rd slide:

njQuery('#nextend-smart-slider-100059').smartslider('goto',2);

event_on_mouseclick2
Image item’s Event on mouseclick code to go to the 1st slide:

njQuery('#nextend-smart-slider-100059').smartslider('goto',0);

Slide 3

The Flipper item’s Event on mouseclick code to go to the 1st slide:

njQuery('#nextend-smart-slider-100059').smartslider('goto',0);

event_on_mouseclick3
Image item’s Event on mouseclick code to go to the 2nd slide:

njQuery('#nextend-smart-slider-100059').smartslider('goto',1);

Now it’s done, and the slider will navigate with the left two items from every slide.