Nivo Slider jQuery Setup

  • Hey all,

    I’m trying to get the jQuery version of Nivo Slider going on my WP site but despite following the tutorial on the plugin maker’s site I don’t seem to be getting results.

    I downloaded the jQuery version and copied the .js files into my theme’s scripts folder.

    In my functions.php I’ve got:

    wp_register_script( 'nivo-slider-pack', get_template_directory_uri() . '/scripts/jquery.nivo.slider.pack.js', array( 'jquery' ), '3.2' );

    In my header.php I’ve got:

    wp_enqueue_script( 'nivo-slider-pack', get_template_directory_uri() . '/scripts/jquery.nivo.slider.pack.js', 'jquery' );

wp_head(); ?>

</head>

    Then my custom homepage has:

    <body>

<div class="slider-wrapper">
    <div id="slider" class="nivoSlider">
        <img src="https://david-howes.co.uk/subdomains/wordpresstest/wp-content/uploads/2013/03/Openwide.jpg" alt="" />
        <a href="https://dev7studios.com"><img src="https://david-howes.co.uk/subdomains/wordpresstest/wp-content/uploads/2013/03/carlhayley.jpg" alt="" title="#htmlcaption" /></a>
        <img src="images/slide3.jpg" alt="" title="This is an example of a caption" />
        <img src="images/slide4.jpg" alt="" />
    </div>
</div>
<div id="htmlcaption" class="nivo-html-caption">
    <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>

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

</body>

    website here -it really doesn’t look right! I know I’ve not got any CSS in there yet but I’d have thought it’d work functionally without it? Apparently I’m using jQuery 1.8.x if it makes a difference?

Viewing 1 replies (of 1 total)
  • Thread Starter Marello

    (@marello)

    OK so I fixed my initial problem as I realised I wasn’t calling my jQuery properly, it should be :

    <script type="text/javascript">

jQuery(window).load(function() {
    jQuery('#homepageslider').nivoSlider();
	effect: 'fade'
});

</script>

    Unfortunately I don’t seem to be applying CSS to the slider properly.

    I’ve used `wp_register_style( ‘nivo-slider’, get_template_directory_uri() . ‘/styles/nivo-slider.css’, false, ‘1.0’ );
    }` In my themefunctions.php

    and

    wp_enqueue_style('nivo-slider'); in my header.php.

    I’ve read through the Codex and I was sure that’s what it said to do?

Viewing 1 replies (of 1 total)
  • The topic ‘Nivo Slider jQuery Setup’ is closed to new replies.