4

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

akjoshi
  • 15,374
  • 13
  • 103
  • 121
Matt
  • 1,747
  • 8
  • 33
  • 58

4 Answers4

3

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.

talha2k
  • 24,937
  • 4
  • 62
  • 81
  • Im not sure where I can add this though currently the slider is added through a CMS page in Magento using this `
    `     – Matt Jun 01 '12 at 12:53
  • This is the html. Where is the js where the slider is initialized. – talha2k Jun 01 '12 at 12:54
  • Im not sure it uses a 1 column template from Magento which just calls the page's content which is above and in my header it just calls - jquery.nivo.slider.pack.js. I also have a jquery.nivo.slider.js file but can't see it being called in anywhere but it does have the settings at the bottom but when I change them it makes no difference. – Matt Jun 01 '12 at 13:01
3

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
Community
  • 1
  • 1
Nikson Kanti Paul
  • 3,394
  • 1
  • 35
  • 51
1

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.

Raj
  • 350
  • 1
  • 2
  • 15
-1

in webpart.cs file

img.addAtribute("data-transition","slideInRight");
Code Lღver
  • 15,573
  • 16
  • 56
  • 75
kaaba
  • 1