gilbitron/Nivo-Slider — Issue #264: Nivo Slider Images not Transitioning
Author: jkstiles
Created: 2012-02-11 21:31:32+00:00
State: open

Hi,

I am impressed with how smoothly the Nivo Slider is implemented in the demos on the website. However, I have moved the code into a new website under design but the images are not transitioning at all. I also am not seeing the images for transitioning.

I am including code as follows:

index.htm
_______________________________________

Bare Wood Naturals

Welcome to

Bare Wood Naturals

About Us

Products

Wood Types

Custom Requests

Contact Us

Welcome to Bare Wood Naturals!

Each platter and cutting board is handcrafted with a butcher block finish, safe for all foods. They can be used in a variety of ways and are a unique and functional addition to your serving or decorating needs. Pieces are created from Wild Cherry, Oak, Black Walnut, Hickory, Wormy Chestnut and refurbished barn wood.

Other handcrafted pieces are available such as trunks, tables and coat racks. Each design is specifically created to accent the natural beauty of the wood, therefore each piece is unique.

Bare Wood Naturals

Laura and Kim Deweese, Artisans

E-mail

Ph: (828) 627-6932

___________________________________

default.css (overall page css) - just the slider css
_________________________________________
.theme-default #slider {

float: left;
position:relative;
top:0;
left:0;
width:425px; /* Make sure your images are the same size */
height:246px; /* Make sure your images are the same size */
margin:10px 5px 0 5px;
}
____________________________________________
/themes/default.css - CSS for the default NIVO theme
____________________________________________
/*
Skin Name: Nivo Slider Default Theme
Skin URI: http://nivo.dev7studios.com
Skin Type: flexible
Description: The default skin for the Nivo Slider.
Version: 1.0
Author: Gilbert Pellegrom
Author URI: http://dev7studios.com
*/

.theme-default .nivoSlider {
position:relative;
background:#fff url(images/slider/loading.gif) no-repeat 50% 50%;
margin-bottom:50px;
-webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
-moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
box-shadow: 0px 1px 5px 0px #4a4a4a;
}
.theme-default .nivoSlider img {
position:absolute;
top:0px;
left:0px;
display: block;
}
.theme-default .nivoSlider a {
border:0;
display:block;
}

.theme-default .nivo-controlNav {
position:absolute;
left:50%;
bottom:-42px;
margin-left:-40px; /* Tweak this to center bullets */
}
.theme-default .nivo-controlNav a {
display:block;
width:22px;
height:22px;
background:url(images/slider/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}
.theme-default .nivo-controlNav a.active {
background-position:0 -22px;
}

.theme-default .nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(images/slider/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
}
.theme-default a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
.theme-default a.nivo-prevNav {
left:15px;
}

.theme-default .nivo-caption {
font-family: Helvetica, Arial, sans-serif;
}
.theme-default .nivo-caption a {
color:#fff;
border-bottom:1px dotted #fff;
}
.theme-default .nivo-caption a:hover {
color:#fff;
}
_____________________________________________________
/scripts/scripts/jquery.nivo.slider.pack
_____________________________________________________
Downloaded and moved into the scripts folder. I am also referencing jquery V1.7.1

As of yet, no progression between images even though I have two images in the container div for the slider.

Can anyone see what I'm doing wrong?

Keith