Nivo Slider Transition

Question

I have a nivo slider added to my Magento theme on the main page, it currently shows a load of random effects.

I just want it to show one effect, when all the slides slide on the right, appear on the screen for 3 seconds, and then slide to the left, and the new one moves to the right to the right.

I am not very good at javascript, so I hope someone can help me with this nivo javascript here in pastebin

Answer 1

You need the slideInRight effect , and nothing will change with the nivo.js. Just use it

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

Hope this helps.

Answer 2

his work is for me. try adding a 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> 

can also try in js

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

Like this answer :

You can choose one of the following effects:

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

Answer 3

You can edit the jquery.nivo.slider.js file, if you open this file in notepad and go to line 348, you will 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 (be sure to delete all other effects specified in this line)

anims = new Array (' slideInRight ');

as well as the last line

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

You should now have one transition effect.

Answer 4

in webpart.cs file

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