Nivo 滑块过渡答案

【问题标题】：Nivo slider transitionNivo 滑块过渡
【发布时间】：2012-06-01 12:38:35
【问题描述】：

我在主页上的 Magento 主题中添加了 nivo 滑块，目前它正在显示大量随机效果。

我只希望它显示一种效果，所有幻灯片将从右侧滑入，出现在屏幕上 3 秒钟，然后向左滑出，新的幻灯片以连续方式从右侧滑入。

我不太擅长 javascript，所以我希望有人可以帮助我解决这个问题，nivo javascript is here in pastebin

【问题讨论】：

标签： javascript magento nivo-slider

【解决方案1】：

你应该使用 slideInRight 效果，nivo 的 .js 文件没有任何改变。就用这个

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

希望这会有所帮助。

【讨论】：

我不确定我可以在哪里添加这个，虽然目前滑块是通过 Magento 中的 CMS 页面添加的，使用这个 <div id="slider" class="nivoSlider"><a href="#"><img src="{{media url=slider/large1.jpg}}" alt="" /></a> <a href="#"><img src="{{media url=slider/large2.jpg}}" alt="" /></a><a href="#"><img src="{{media url=slider/large3.jpg}}" alt="" /></a><a href="#"><img src="{{media url=slider/large4.jpg}}" alt="" /></a><a href="#"><img src="{{media url=slider/large5.jpg}}" alt="" /></a></div>
这是 html。滑块初始化的js在哪里。
我不确定它是否使用了 Magento 的 1 列模板，它只调用上面的页面内容，在我的标题中它只是调用 - jquery.nivo.slider.pack.js。我也有一个 jquery.nivo.slider.js 文件，但在任何地方都看不到它被调用，但它确实在底部有设置，但是当我更改它们时没有任何区别。

【解决方案2】：

它对我有用。让它尝试添加data-transition效果名称slideInRight或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>

也可以用JS试试

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

根据this answer：

您可以选择以下效果：

切片
sliceDownLeft
切片
sliceUpLeft
sliceUpDown
sliceUpDownLeft
折叠
褪色
随机
slideInRight
向左滑动
随机盒子
boxRain
boxRainReverse
boxRainGrow
boxRainGrowReverse

【讨论】：

【解决方案3】：

您可以编辑 jquery.nivo.slider.js 文件，如果您在记事本中打开此文件并转到第 348 行，您应该会看到以下代码：-

// 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'; }
        }

在代码中更改以下行，（确保删除此行中说明的所有其他效果）

anims = new Array ('slideInRight');

还有最后一行

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

现在你应该有一个单一的过渡效果。

【讨论】：

【解决方案4】：

在 webpart.cs 文件中

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

【讨论】：