• Let me start by saying I’m a beginner, I have researched, and I have tried numerous things for hours but just need a little guidance (I think). The page in question is here.

    I am trying to get the Nivo Slider working on my WordPress page without using the plugin. I have downloaded the Nivo Slider script and CSS files and have them properly hosted on my server. I have edited header.php (see below) to enable jQuery and include my Javascript and CSS files for the slider. This is where I get confused.

    According to the Nivo Slider support page, the script has to be hooked up with the following function:

    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>

    I have read a lot about using no-conflict mode and have come up with the following code below, which is located in my header.php file:

    <?php wp_enqueue_script('jquery'); ?>
    
    <?php wp_head(); ?>
    
    <script type="text/javascript"
       src="https://smithcontractingcompany.com/wp-content/themes/twentyeleven_child/js/nivo-slider/jquery.nivo.slider.pack.js"></script>
    <link rel="stylesheet" href="https://smithcontractingcompany.com/wp-content/themes/twentyeleven_child/js/nivo-slider/nivo-slider.css" type="text/css" media="screen">
    
    <script type="text/javascript">
    $j=jQuery.noConflict();
    
    $j(window).load(function() {
        $j('#slider').nivoSlider();
    });
    </script>

    I have the following code just in the HTML editor section of the page in question:

    <div id="slider" class="nivoSlider">
    <img src="https://smithcontractingcompany.com/wp-content/uploads/2011/12/test1.jpg" alt=""/>
    <img src="https://smithcontractingcompany.com/wp-content/uploads/2011/12/test2.jpg" alt=""/>
    <img src="https://smithcontractingcompany.com/wp-content/uploads/2011/12/test3.jpg" alt=""/>
    </div>

    My problem is that the slider seems to get glitchy after one run though. Something just isn’t right and I am not experienced enough to pinpoint it. I would truly appreciate if a more experience WordPress and Javascript user can tell me what I’m doing wrong. Lay it on me, I know this code is way off!

    P.S. When slider is working correctly, numbered images should coincide with slide number.

  • The topic ‘Nivo Slider Custom Install (non-plugin)’ is closed to new replies.