I have the nivo slider added into my Magento theme on the homepage, at the moment it is showing a load of random effects.

I just want it to show one effect where all the slides will slide in from the right, appear on the screen for 3 seconds and then slide out to the left with the new one sliding in from the right in a continuous manner.

I'm not very good with javascript so I am hoping someone can help me out on this the nivo javascript is here in pastebin

I have the nivo slider added into my Magento theme on the homepage, at the moment it is showing a load of random effects.

I just want it to show one effect where all the slides will slide in from the right, appear on the screen for 3 seconds and then slide out to the left with the new one sliding in from the right in a continuous manner.

I'm not very good with javascript so I am hoping someone can help me out on this the nivo javascript is here in pastebin

• javascript
• magento
• nivo-slider

4 Answers 4

You should us slideInRight effect, there's nothing to change with the nivo's .js file. Just use this

$('#slider').nivoSlider({effect:'slideInRight'});

Hope this helps.

its work for me. let it try add data-transition effect name slideInRight or slideInLeft

<div id="slider" class="nivoSlider" width="480" >
     <img src="slider/1.jpg" alt="" data-transition="slideInLeft" />
     <img src="slider/4.jpg" alt="" data-transition="slideInRight" />
</div>

also can try in JS

$(window).load(function() {
     $('#slider').nivoSlider({effect:'slideInRight'});    
});

As per this answer :

You can choose from the following effects:

• sliceDown
• sliceDownLeft
• sliceUp
• sliceUpLeft
• sliceUpDown
• sliceUpDownLeft
• fold
• fade
• random
• slideInRight
• slideInLeft
• boxRandom
• boxRain
• boxRainReverse
• boxRainGrow
• boxRainGrowReverse

You can edit the jquery.nivo.slider.js file, if you open this file in notepad and go to line-348, you should see the following code:-

// Generate random effect
        if(settings.effect === 'random'){
            anims = new Array('sliceDownRight','sliceDownLeft','sliceUpRight','sliceUpLeft','sliceUpDown','sliceUpDownLeft','fold','fade',
            'boxRandom','boxRain','boxRainReverse','boxRainGrow','boxRainGrowReverse');
            currentEffect = anims[Math.floor(Math.random()*(anims.length + 1))];
            if(currentEffect === undefined) { currentEffect = 'fade'; }
        }

In the code change the following line, (make sure to remove all the other effects stated in this line)

anims = new Array ('slideInRight');

and also the last line

if(currentEffect === undefined) {currentEffect = 'slideInRight'}

Now you should have a single transition effect.

in webpart.cs file

img.addAtribute("data-transition","slideInRight");