javascript - Nivo 滑块过渡

Question

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

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

我对javascript不是很好，所以我希望有人可以帮助我解决这个问题，nivo javascript在pastebin中

Answer 1

它为我工作。让它尝试添加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'});    
});

根据这个答案：

您可以从以下效果中进行选择：

• 切下
• 切下左
• 切片
• 左上切片
• 切片向上
• sliceUpDownLeft
• 折叠
• 褪色
• 随机的
• 向右滑动
• 向左滑动
• 盒子随机
• 盒子雨
• boxRainReverse
• 盒子雨成长
• boxRainGrowReverse

Answer 2

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

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

希望这可以帮助。

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

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

动画 = 新数组 (' slideInRight ');

也是最后一行

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

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

Answer 4

在webpart.cs文件中

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