Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Nivo Slider not sliding
 
MersauX
Jr. Member
 
Total Posts:  2
Joined:  2011-10-19
 

Hello, this is my first message here and I’m coming right away with an issue.

I’m trying to integrate nivo slider on a magento shop website, the images show up, but they won’t slide. I tried all the solutions on the internet I could find, but without any luck. If you have a look in the code you’ll see I implemented the nivo slider javascript code in the head, I also loaded the js and css files before the prototype.js, but it won’t work. I also tried using some tutorials on the internet, but without any luck. If someone could help me out with this I would greatly appreciate it.

Here is the link: http://www.auntaggiede.com/

Thank you!

 
Magento Community Magento Community
Magento Community
Magento Community
 
code2012
Member
 
Total Posts:  37
Joined:  2012-09-17
 

Your jquery may be conflicting somewhere..

Use jquery = $.noConflict();

 
Magento Community Magento Community
Magento Community
Magento Community
 
MersauX
Jr. Member
 
Total Posts:  2
Joined:  2011-10-19
 

Thanks for the advice. I also tried using that, in fact here is my code.

This is in the page.xml

<action method="addJs"><script>jquery-1.6.3.min.js</script></action>
<
action method="addJs"><script>jquery.nivo.slider.pack.js</script></action>
<
action method="addCss"><stylesheet>css/nivo-slider.css</stylesheet></action>

This is in the head.phtml

<script type="text/javascript">//<![CDATA[
jQuery.noConflict();
jQuery.fn._reverse []._reverse;
jQuery(window).load(function() {
    jQuery
('#slider').nivoSlider({
        effect
'fade',
        
slices15,
        
boxCols8,
        
boxRows4,
        
animSpeed500,
        
pauseTime3000
    }
);
});
//]]></script>

This is the slider code on the page (I had to put back the original slider on the link since the website is live):

<div class="slider-wrapper">
<
div id="slider" class="nivoSlider">
<
a href="#"><img src="{{media url="wysiwyg/Slider1Final.png"}}" alt="" /></a>
<
a href="#"><img src="{{media url="wysiwyg/Slider2Final.png"}}" alt="" /></a>
<
a href="#"><img src="{{media url="wysiwyg/Slider3Final.png"}}" alt="" /></a>
<
a href="#"><img src="{{media url="wysiwyg/Slider4Final.png"}}" alt="" /></a>
<
a href="#"><img src="{{media url="wysiwyg/Slider5Final.png"}}" alt="" /></a>
</
div>
</
div>

Yet, the thing just stands there, it won’t move or fade or anything. :(

 
Magento Community Magento Community
Magento Community
Magento Community
 
LovePepper
Member
 
Total Posts:  40
Joined:  2012-07-03
 

Hi,

I have installed Nivo Slider on my site. It works very well.

I’ll try to show you how I have it. It’s not very conventional I don’t think, i.e. I didn’t create a module but maybe it will help you out anyway.

I created a folder in:  app\design\frontend\default\default\template\(new_folder_here)\somename.phtml

In somename.phtml I have this:

<link rel="stylesheet" type="text/css" href="http://www.mysite-here.com/skin/frontend/default/default/css/nivo/default/default.css" />
<
script type="text/javascript" src="http://www.mysite-here.com/js/jquery/nivo/jquery.nivo.slider.js"></script>
<script type="text/javascript">
jQuery(window).load(function() {
    jQuery
('#slidertwo').nivoSlider({
        effect
'random'// Specify sets like: 'fold,fade,sliceDown'
        
slices15// For slice animations
        
boxCols8// For box animations
        
boxRows4// For box animations
        
animSpeed500// Slide transition speed
        
pauseTime3000// How long each slide will show
        
startSlide0// Set starting Slide (0 index)
        
directionNavtrue// Next & Prev navigation
        
controlNavtrue// 1,2,3... navigation
        
controlNavThumbsfalse// Use thumbnails for Control Nav
        
pauseOnHovertrue// Stop animation while hovering
        
manualAdvancefalse// Force manual transitions
        
prevText'Prev'// Prev directionNav text
        
nextText'Next'// Next directionNav text
        
randomStartfalse// Start on a random slide
        
beforeChange: function(){}// Triggers before a slide transition
        
afterChange: function(){}// Triggers after a slide transition
        
slideshowEnd: function(){}// Triggers after all slides have been shown
        
lastSlide: function(){}// Triggers when last slide is shown
        
afterLoad: function(){} // Triggers when slider has loaded
    
});
});
</script>
        
<div class="slider-wrapper theme-default">
            <
div id="slidertwo" class="nivoSlider">
                <
img src="http://www.mysite-here.com/media/nivo/site-info/angels-here-welcome.jpg" data-thumb="images/welcome.jpg" alt="Angels Here Welcome" />
                <
a href="#"><img src="http://www.mysite-here.com/media/nivo/site-info/wings.jpg" data-thumb="http://www.mysite-here.com/images/wings.jpg" alt="" /></a>
                <
img src="http://www.mysite-here.com/media/nivo/site-info/angels.jpg" data-thumb="images/angels.jpg" alt="" data-transition="slideInLeft" />
                <
img src="http://www.mysite-here.com/media/nivo/site-info/picture.jpg" data-thumb="images/picture.jpg" alt="" />
            </
div>
       </
div>

(Of course you can add lots more parameters to Nivo than I have here)

Okay, then I created a static block --> Admin > CMS > Static Blocks > Add New Block

In the Static Block I put this:

<div id="banner">{{block type="core/template" name="nivo_slider_two" template="somename/somename.phtml" before="-"}}</div>

somename = whatever you want to call it.

Next, I created a Widget here: Admin > CMS > Widgets > Add New Widget Instance

Under “Type” I selected CMS Static Block
Then I picked my theme directory which for me is default/default

Type = CMS Static Block

Design Package/Theme = default/default

Widget Instance Title = Some you want to call you slider

Assign to Store Views = Whatever store view you have or wan to show it on

Sort Order = 1, 2 or 3 hahaha

Then you click on the side menu on “Widget Options” (this is the most important part) and select the Static Block you just created.

Then your Nivo Slider will display.

***********************************
Also, at the “head” i.e head.phml top of my page I have this:

<script type="text/javascript" src="http://www.mysite-here.com/js/jquery/jquery-1.8.1.min.js"></script>

This is being called by a MYGENTO EXTENSIONS—JQuery Library I have installed

I also added to the bottom of my head.phtml file located here: \app\design\frontend\default\default\template\page\html\head.phtml

...this: <script type="text/javascript">var $j = jQuery.noConflict();</script>

I think his helps with some other stuff too.

One last thing, I had to add a underscore in my Nivo javascript like it says here to get it working smooth. http://stackoverflow.com/questions/8724691/nivoslider-not-working-smoothly-on-magento

Hope that helps you

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top