Navigate between slides with HTML widget

Go to the Edit SliderWidgets, and turn on the HTML widget for every Display view. In this example I have 5 slides, and this is the code:

<div class="nextend_navigation_button" onclick="njQuery('#nextend-smart-slider-100060').smartslider('goto', 0);">Slide 1</div>
<div class="nextend_navigation_button" onclick="njQuery('#nextend-smart-slider-100060').smartslider('goto', 1);">Slide 2</div>
<div class="nextend_navigation_button" onclick="njQuery('#nextend-smart-slider-100060').smartslider('goto', 2);">Slide 3</div>
<div class="nextend_navigation_button" onclick="njQuery('#nextend-smart-slider-100060').smartslider('goto', 3);">Slide 4</div>
<div class="nextend_navigation_button" onclick="njQuery('#nextend-smart-slider-100060').smartslider('goto', 4);">Slide 5</div>
<style>
.nextend_navigation_button{
padding: 8px 10px;
box-shadow: 0 1px 1px RGBA(0,0,0,0.3);
border: 2px solid rgba(0, 0, 0, 0.4);
text-transform: uppercase;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #000000;
background: rgba(0, 0, 0, 0.1);
-webkit-transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
-ms-transition: all 0.2s ease-in-out 0s;
-o-transition: all 0.2s ease-in-out 0s;
transition: all 0.2s ease-in-out 0s;
color:white;
display:inline;
}
.nextend_navigation_button:hover{
background: #000000;background: rgba(0, 0, 0, 0.3);
border: 2px solid rgba(0, 0, 0, 0.6);
}
</style>

You can use any style you want, only the onclick event matters, just change the 100060 to your slider’s id.

menu_code

This is how it looks like:

menu_slider