How to change the effect of nivo-slider in the latest nopcommerce?

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.
Il y a 5 ans
I have my pictures and I want to add different effects in each and every picture like fade,slideright, slideleft, etc.So, how to do this?

<div id="nivo-slider" class="nivoSlider">
        @{
            var dataSlide1 = new ViewDataDictionary(ViewData)
            {
                {"pictureUrl", Model.Picture1Url},
                { "text", Model.Text1},
                { "link", Model.Link1}
            };

            @await Html.PartialAsync("~/Plugins/Widgets.NivoSlider/Views/_PublicInfo.SliderLine.cshtml", dataSlide1)
        }
        
        @{
            var dataSlide2 = new ViewDataDictionary(ViewData)
            {
                {"pictureUrl", Model.Picture2Url},
                { "text", Model.Text2},
                { "link", Model.Link2}
            };

            @await Html.PartialAsync("~/Plugins/Widgets.NivoSlider/Views/_PublicInfo.SliderLine.cshtml", dataSlide2)
        }
        
        @{
            var dataSlide3 = new ViewDataDictionary(ViewData)
            {
                {"pictureUrl", Model.Picture3Url},
                { "text", Model.Text3},
                { "link", Model.Link3},
                { "dataTransition", "slideInLeft"}
            };

            @await Html.PartialAsync("~/Plugins/Widgets.NivoSlider/Views/_PublicInfo.SliderLine.cshtml", dataSlide3)
        }

        @{
            var dataSlide4 = new ViewDataDictionary(ViewData)
            {
                {"pictureUrl", Model.Picture4Url},
                { "text", Model.Text4},
                { "link", Model.Link4}
            };

            @await Html.PartialAsync("~/Plugins/Widgets.NivoSlider/Views/_PublicInfo.SliderLine.cshtml", dataSlide4)
        }
        
        @{
            var dataSlide5 = new ViewDataDictionary(ViewData)
            {
                {"pictureUrl", Model.Picture5Url},
                { "text", Model.Text5},
                { "link", Model.Link5}
            };

            @await Html.PartialAsync("~/Plugins/Widgets.NivoSlider/Views/_PublicInfo.SliderLine.cshtml", dataSlide5)
        }
    </div>
Il y a 5 ans
Just give random effect to Nivo Slider

Update script as below:
<script type="text/javascript">
    $(window).load(function () {
        $('#nivo-slider').nivoSlider({
            effect: 'random'
        });
    });
</script>



This are more effect option, you can set as per your requirement.
    sliceDown
    sliceDownLeft
    sliceUp
    sliceUpLeft
    sliceUpDown
    sliceUpDownLeft
    fold
    fade
    random
    slideInRight
    slideInLeft
    boxRandom
    boxRain
    boxRainReverse
    boxRainGrow
    boxRainGrowReverse

You can from here
This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.