Прочитал тему: Тема Nivo Slider
Натворил столько дел.
Если не сложно,помогите.
Сайт Storecar
Мне нужно,что бы слайдер был только на главной странице.
Делал как было написано в теме,но мои крюки подвели меня.
Исправьте будьте добры!
Если не сложно,разжуйте всё по полочкам.Буду очень благодарен!
На всякий случай кину всё что есть в папке слайдера.
HTML код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <html lang="en"> <head> <title>Nivo Slider Demo</title> <link rel="stylesheet" href="../nivo-slider.css" type="text/css" media="screen" /> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> </head> <body> <div id="wrapper"> <a href="http://dev7studios.com" id="dev7link" title="Go to dev7studios">dev7studios</a> <div id="slider-wrapper"> <div id="slider" class="nivoSlider"> <img src="images/toystory.jpg" alt="" /> <a href="http://dev7studios.com"><img src="images/up.jpg" alt="" title="This is an example of a caption" /></a> <img src="images/walle.jpg" alt="" /> <img src="images/nemo.jpg" alt="" title="#htmlcaption" /> </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> </div> </div> <script type="text/javascript" src="scripts/jquery-1.4.3.min.js"></script> <script type="text/javascript" src="../jquery.nivo.slider.pack.js"></script> <script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider(); }); </script> </body> </html>
Style CSS:
/*=================================*/ /* Nivo Slider Demo /* November 2010 /* By: Gilbert Pellegrom /* http://dev7studios.com /*=================================*/ /*====================*/ /*=== Reset Styles ===*/ /*====================*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; } body { line-height:1; color:black; background:white; } table { border-collapse:separate; border-spacing:0; } caption, th, td { text-align:left; font-weight:normal; } blockquote:before, blockquote:after, q:before, q:after { content:""; } blockquote, q { quotes:"" ""; } /* HTML5 tags */ header, section, footer, aside, nav, article, figure { display: block; } /*===================*/ /*=== Main Styles ===*/ /*===================*/ body { font:14px/1.6 Georgia, Palatino, Palatino Linotype, Times, Times New Roman, serif; color:#2d3536; background:#e8e0c0 url(images/background.png) repeat; text-shadow:0 1px 0 #fff; } a, a:visited { color:#2d3536; text-decoration:none; border-bottom:1px dotted #826a4d; } a:hover, a:active { color:#9e805c; text-decoration:none; } #dev7link { position:absolute; top:0; left:50px; background:url(images/dev7logo.png) no-repeat; width:60px; height:67px; border:0; display:block; text-indent:-9999px; } /*============================*/ /*=== Custom Slider Styles ===*/ /*============================*/ #slider-wrapper { background:url(images/slider.png) no-repeat; width:998px; height:392px; margin:0 auto; padding-top:74px; margin-top:50px; } #slider { position:relative; width:618px; height:246px; margin-left:190px; background:url(images/loading.gif) no-repeat 50% 50%; } #slider img { position:absolute; top:0px; left:0px; display:none; } #slider a { border:0; display:block; } .nivo-controlNav { position:absolute; left:260px; bottom:-42px; } .nivo-controlNav a { display:block; width:22px; height:22px; background:url(images/bullets.png) no-repeat; text-indent:-9999px; border:0; margin-right:3px; float:left; } .nivo-controlNav a.active { background-position:0 -22px; } .nivo-directionNav a { display:block; width:30px; height:30px; background:url(images/arrows.png) no-repeat; text-indent:-9999px; border:0; } a.nivo-nextNav { background-position:-30px 0; right:15px; } a.nivo-prevNav { left:15px; } .nivo-caption { text-shadow:none; font-family: Helvetica, Arial, sans-serif; } .nivo-caption a { color:#efe9d1; text-decoration:underline; } /*====================*/ /*=== Other Styles ===*/ /*====================*/ .clear { clear:both; }
Nivo-slider.css:
/* * jQuery Nivo Slider v2.4 * http://nivo.dev7studios.com * * Copyright 2011, Gilbert Pellegrom * Free to use and abuse under the MIT license. * http://www.opensource.org/licenses/mit-license.php * * March 2010 */ /* The Nivo Slider styles */ .nivoSlider { position:relative; } .nivoSlider img { position:absolute; top:0px; left:0px; } /* If an image is wrapped in a link */ .nivoSlider a.nivo-imageLink { position:absolute; top:0px; left:0px; width:100%; height:100%; border:0; padding:0; margin:0; z-index:60; display:none; } /* The slices in the Slider */ .nivo-slice { display:block; position:absolute; z-index:50; height:100%; } /* Caption styles */ .nivo-caption { position:absolute; left:0px; bottom:0px; background:#000; color:#fff; opacity:0.8; /* Overridden by captionOpacity setting */ width:100%; z-index:89; } .nivo-caption p { padding:5px; margin:0; } .nivo-caption a { display:inline !important; } .nivo-html-caption { display:none; } /* Direction nav styles (e.g. Next & Prev) */ .nivo-directionNav a { position:absolute; top:45%; z-index:99; cursor:pointer; } .nivo-prevNav { left:0px; } .nivo-nextNav { right:0px; } /* Control nav styles (e.g. 1,2,3...) */ .nivo-controlNav a { position:relative; z-index:99; cursor:pointer; } .nivo-controlNav a.active { font-weight:bold; }
а так же в папке skripts лежит файл: jquery-1.4.3.min.js ;
И еще несколько файлов в другой папке: jquery.nivo.slider.js , jquery.nivo.slider.pack.js