Nivo Slider

JavaScript
1

For a coursework project I am doing I decided I would like a slideshow area on the homepage of my website and so have incorporated jQuery Nivo Slider… For the main part the plugin seems to be working ok, for example all 3 images display, and they do slide in left, however, when the next image slides in it slides in about 30px below the top of the previous one, underneath where the plugin seems to have a default text of “1 2 3” to show which image is displayed. It then snaps up into the proper position and the pattern repeats through all of the images… What is the problem here, why will it not just scroll over the top aligned how it should be?

One other thing is that the plugin comes with default arrows and bullet points… In the CSS file I have specified these as the next and previous arrows, yet they dont display, what displays when the cursor is hovered over one of the images is simply the text “Next” and “Previous” rather than the arrows, and no bullet points.

First time using this plugin so any help appreciated, thanks.

2

does anyone have any idea what is causing this or experience with this plugin?

3

Do you have an example page of this up somewhere? I suspect you might have some other markup or something else between your images.

4

ok i took the data-transition=“slideinleft” out of the img tag markup, and now slider just runs through all of its default transitions without any problems, except when it slides in it does the same thing… and does anyone know how to remove the “1 2 3” or why the bullet points/arrows might not be appearing when i have referred to them in the css file?

5

I will post up some code snippets shortly

6 
        <div id="imageholder">

        	<div id="slider" class="nivoSlider">

            	<img src="images/slider/hotel.jpg" />
                <img src="images/slider/restaurant.jpg" />
                <img src="images/slider/bar.jpg" />

            </div>

        </div><!--close imageholder-->



<script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>

<script type="text/javascript">

	$(window).load(function() {
		
			$('#slider').nivoSlider();
		
		});

</script>
7

Do you have a test page up where I can see the problem?

I suspect it might be the Nivo controlbar (which you can hide using .nivo-controlNav { display:none; }​ in your CSS)

8

just about to pm you a link man