CODEWITHSUNDEEP
javascriptmagentonivo-slider
Matt
Matt

Reputation: 1757

Nivo slider transition

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

Upvotes: 4

Views: 5877

Answers (4)

kaaba
kaaba

Reputation: 1

in webpart.cs file

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

Upvotes: -1

Nikson Kanti Paul
Nikson Kanti Paul

Reputation: 3440

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

Upvotes: 3

Raj
Raj

Reputation: 370

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.

Upvotes: 1

talha2k
talha2k

Reputation: 1

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.

Upvotes: 3

Related Questions