Add Features to the Nivo Image Slider

Featured Theme Forums Twenty Plus Pro Twenty plus Pro Guides Add Features to the Nivo Image Slider

This topic contains 0 replies, has 1 voice, and was last updated by  Zeaks 2 years, 4 months ago.

Viewing 1 post (of 1 total)
  • Author
  • #13380


    This guide is for users comfortable with editing template files and have a bit of knowledge of php.

    Nivo slider comes with many configurations, I choose to use the most common ones. Although there’s options for a few transitions and themes, you can also set pause timers, transition speeds and much more.

    Open /inc/slider.php and starting around line 89 you’ll see several blocks of code that look similar to this

    <br />
    $theme_options = get_option('tto_theme_options');<br />
    if ($theme_options == '0'){<br />
    print "";<br />

    Each one of these blocks of code is for each type of transition effect. Each effect has a set type of features added to it, transition speed, show or hide control navigation, pause time etc etc.

    First thing to do is, choose which transition type you’ll be using. The one in this example is the Fade effect, you can tell by this line within that code “effect: ‘fade’,”

    Here’s a list from dev7studios of all the effects you can turn on and off for your slider.

    <br />
    : 'random', // Specify sets like: 'fold,fade,sliceDown'<br />
    slices: 15, // For slice animations<br />
    boxCols: 8, // For box animations<br />
    boxRows: 4, // For box animations<br />
    animSpeed: 500, // Slide transition speed<br />
    pauseTime: 3000, // How long each slide will show<br />
    startSlide: 0, // Set starting Slide (0 index)<br />
    directionNav: true, // Next & Prev navigation<br />
    controlNav: true, // 1,2,3... navigation<br />
    controlNavThumbs: false, // Use thumbnails for Control Nav<br />
    pauseOnHover: true, // Stop animation while hovering<br />
    manualAdvance: false, // Force manual transitions<br />
    prevText: 'Prev', // Prev directionNav text<br />
    nextText: 'Next', // Next directionNav text<br />
    randomStart: false, // Start on a random slide<br />
    beforeChange: function(){}, // Triggers before a slide transition<br />
    afterChange: function(){}, // Triggers after a slide transition<br />
    slideshowEnd: function(){}, // Triggers after all slides have been shown<br />
    lastSlide: function(){}, // Triggers when last slide is shown<br />
    afterLoad: function(){} // Triggers when slider has loaded

    Choose any one of these and add it to the code in slider.php, make sure to add it to the proper effect you’ll be using.

Viewing 1 post (of 1 total)

The topic ‘Add Features to the Nivo Image Slider’ is closed to new replies.