Nivo SLIDER not SLIDING

vinsux · July 22, 2012

Can i ask a little help.? i have a nivoslider but the screen image doesn't slide..

it shows only 1 image..

PLEASE I NEED HELP..!!

Here's my HTML Code

<div id="slider">

       <section id="slider-wrapper">   
        <div id="slider" class="nivoSlider">
            <img style="display: none;" src="images/splash2.jpg" alt="" title="#htmlcaption-1">
            <img style="display: none;" src="images/promo2.jpg" alt="" title="#htmlcaption-2">
            <img style="display: none;" src="images/promo3.jpg" alt="" title="#htmlcaption-3">
        </div>
        <div id="htmlcaption-1" class="nivo-html-caption">
            <h5 class="p2">Welcome to Our site</h5>
            <p>Para?aque Branch</p>
        </div>
        <div id="htmlcaption-2" class="nivo-html-caption">
            <h5 class="p3">In this Site</h5>
            <p>You can download or upload your lecture's soft copy</p>
        </div>
        <div id="htmlcaption-3" class="nivo-html-caption">
            <h5 class="p4">Accesible for student and faculty</h5>
            <p>Welcome to Online Course Materials</p>
        </div>
        <div id="htmlcaption-3" class="nivo-html-caption">
            <h5 class="p2">Or something else</h5>
            <p>Put any description here</p>
        </div>
        
    </section>
</div>

MY CSS

#slider-wrapper {
}
.nivoSlider {
    position:relative;
}
.nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
}
.nivo-slice {
    display:block;
    position:absolute;
    z-index:50;
    height:100%;
}
.nivo-box {
    display:block;
    position:absolute;
    z-index:5;
}
.nivo-caption {
    background-color:rgba(255, 255, 255, 0.7);
    width:808px;
    padding:22px 170px 28px 22px;
    color:#000;
    position:absolute;
    left:0;
    bottom:0;
    z-index:90;
}
.nivo-caption h5 {
    font-size:30px;
    font-weight:normal;
    line-height:1.2em;
    margin:0;
    padding:0 0 2px;
}
.nivo-caption p {
    padding:0;
    line-height:16px;
    font-size:12px;
}
.nivo-html-caption {
    display:none;
}

jazzman1 · July 22, 2012

Did you link the query.nivo.slider.pack script file ? I can not see nothing of that

vinsux · July 22, 2012

yes.. i put on the upper page sry..

like this..

vinsux · July 22, 2012

here's the code in the upper page until middle part...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Online Course Materials</title>

    <link rel="stylesheet" href="css/menu.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen">
 <link rel="stylesheet" href="css/demo.css" type="text/css" media="screen">
     <link rel='stylesheet' href='fcss.css' type='text/css'>
    <script src="js/jquery.js"></script>
    <script src="js/jquery.nivo.slider.pack.js"></script>   
    <script src="js/main.js"></script>
<script src="js/script.js"></script>
<script src="js/side.js"></script>
    
    <!--[if lt IE 9]>
    <script type="text/javascript" src="js/html5.js"></script>
    <![endif]-->
</head>
<body>

<div class="container">

        <header>

            <nav>
     
                <div id="menu-container">			
			<ul id="navigationMenu">
				<li><a href="faculty.php" class="normalMenu">Home</a></li>
                    <li><a href="about.php" class="normalMenu">About</a></li>
                    <li><a href="curriculum.php" class="normalMenu">Curriculum</a></li>
                    <li><a href="feedback.php" class="normalMenu">Feedback</a></li>
                    <li><a href="register.php" class="normalMenu">Register</a></li>
                    </div>
                </ul>
            </nav>


            <div class="top_head"><span class="logo"><a href="www.amaes.edu.ph"><img src="images/ocm.jpg"title="E-Store template" alt="E-Store template" /></a></span><!-- Defining the top head element -->
                <div class="logo"><!-- Defining the logo element --></div>
                
            </div>

        </header>


        <div id="slider">
        
       <section id="slider-wrapper">
   
        <div id="slider" class="nivoSlider">
            <img style="display: none;" src="images/splash2.jpg" alt="" title="#htmlcaption-1">
            <img style="display: none;" src="images/promo2.jpg" alt="" title="#htmlcaption-2">
            <img style="display: none;" src="images/promo3.jpg" alt="" title="#htmlcaption-3">
        </div>
        <div id="htmlcaption-1" class="nivo-html-caption">
            <h5 class="p2">Welcome to Our Site</h5>
            <p>Para?aque Branch</p>
        </div>
        <div id="htmlcaption-2" class="nivo-html-caption">
            <h5 class="p3">In this Site</h5>
            <p>You can download or upload your lecture's soft copy</p>
        </div>
        <div id="htmlcaption-3" class="nivo-html-caption">
            <h5 class="p4">Accesible for student and faculty</h5>
            <p>Welcome to Online Course Materials</p>
        </div>
        <div id="htmlcaption-3" class="nivo-html-caption">
            <h5 class="p2">Or something else</h5>
            <p>Put any description here</p>
        </div>
        
    </section>
</div>

Mahngiel · July 22, 2012

you have to actually start it. $('#target_div').nivoSlider(); or $('#target-div').nivoSlider({ option: property });

jazzman1 · July 22, 2012

No, this is link to css nivo slider file, you need to include js script files to your header. Take a look at my project and check out the html source code -> http://kaneffbrookside.ca/stdimitar/

vinsux · July 22, 2012

i figured out that the js is the one who make the slider works..

but still it's not sliding.. Y_Y

oohh welll... i'm really sry for the inconvenience again, i'm just newbie in programming....

my main.js

$(window).load(function() {
    $('#slider').nivoSlider({
        effect:'random',
        slices:15,
        boxCols:8,
        boxRows:8,
        animSpeed:500,
        pauseTime:4000,
        directionNav:false,
        directionNavHide:false,
        controlNav:false,
        captionOpacity:1
    });
});

jazzman1 · July 22, 2012

do you have a public link to this?

vinsux · July 22, 2012

what's public link?

i got the nivo slider in this tutorial site..

http://www.script-tutorials.com/creating-new-html5css3-single-page-layout-e-store/

thank you jazz and mahngiel

jazzman1 · July 22, 2012

Where is deployed the project, on local machine or to server too ?

cmgweb · July 23, 2012

YangNovember 14, 2011 10:44 am
Nivo Slider does not work in you demo, I have checked their website, their demo is , however, in you demo, you have two divs with id of ?slider?. I tried to change outer div with another id, then the nivo slider works!

adminNovember 21, 2011 7:43 am

Thanks Yang,

Yes, it seems that I miss it.

I changed first instance

<div id="slider">

to

<div id="slider2">

and now slider works well

this is 2 comments on that demo page itself. try this see if it works.

vinsux · July 28, 2012

^

i saw that one before.. but the author already fix that..

i'm really sorry, i'm pissed in my slider.. so i leave it not sliding.. i have a lot of things to do in my website..

but i really appreciate your help on newbie like me.. thank you very much for your help..

One day if i'm become a genius in programming.. i'll help newbies too...!! and that's my goal after i learn these things!!!

Sign In

Nivo SLIDER not SLIDING

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information