Для всех новичков предлагаю готовый вариант установки слайдера
1. Открываем Редактор тем - HTML, после кода
<td id="primaryContent">ставите следующий кусок:
<style type="text/css"> #slidebackgr { width:610px; <!---Это можно менять--> height:345px; <!---Это можно менять--> margin-top:10px; <!---Это можно менять--> padding:0; position:relative; background-image: url([url="http://img.storeland.ru/web/upload/assets/images/29/28867/slide_bg1.png"]http://img.storeland...7/slide_bg1.png[/url]); <!---Это меняем--> } #slideshow #slideshowWindow { width:576px; <!---Это можно менять--> height:300px; <!---Это можно менять--> padding:0; position:relative; margin-left:17px; margin-right:17px; margin-bottom:10px; overflow:hidden; } #slideshow h2 { font-weight: normal; color: #FFFFFF; font-size: 2.1666em; line-height: 1.1538em; margin: 0.7692em 0 0.3846em 0 ; } #slideshow #slideshowWindow .slide { padding:0; width:576px; height:300px; position:relative; margin-top:20px; overflow:hidden; } #slideshow #slideshowWindow .slide .slideText { position:absolute; top:0px; left:0px; width:162px; height:300px; background-repeat:repeat; margin:0; padding:0 10px 0 0; color:#ffffff; font-family:Myriad Pro, Arial, Helvetica, sans-serif; } #slideshow #slideshowWindow .slide .slideText a:link, #slideshow #slideshowWindow .slide .slideText a:visited { color:#ffffff; text-decoration:none; } .slideLink {color:#ffffff; text-decoration:underline; } #slideshow #slideshowWindow .slide .slideText h2, #slideshow #slideshowWindow .slide .slideText p { margin:10px 0 0 10px; padding:0; } /*Navigation*/ .nav { display:block; text-indent:-10000px; position:absolute; cursor:pointer; } #leftNav { top:260px; left:500px; <!---Это можно менять--> width:94px; height:36px; <!---Это можно менять--> background-image:url([url="http://img.storeland.ru/web/upload/assets/images/29/28867/previous.png"]http://img.storeland...67/previous.png[/url]); <!---Это меняем--> background-repeat:no-repeat; z-index:999; } #rightNav { top:260px; <!---Это можно менять--> left:550px;<!---Это можно менять--> width:53px; height:36px; background-image:url([url="http://img.storeland.ru/web/upload/assets/images/29/28867/next.png"]http://img.storeland.../28867/next.png[/url]); <!---Это меняем--> background-repeat:no-repeat; z-index:999; } </style> <script type="text/javascript"> $(document).ready(function() { var currentPosition = 0; var slideWidth = 576; var slides = $('.slide'); var numberOfSlides = slides.length; var slideShowInterval; var speed = 9000; <!---Кажется это скорость прокрутки. Это можно менять--> //Assign a timer, so it will run periodically slideShowInterval = setInterval(changePosition, speed); slides.wrapAll('<div id="slidesHolder"></div>') slides.css({ 'float' : 'left' }); //set #slidesHolder width equal to the total width of all the slides $('#slidesHolder').css('width', slideWidth * numberOfSlides); $('#slideshow') .prepend('<span class="nav" id="leftNav">Move Left</span>') .append('<span class="nav" id="rightNav">Move Right</span>'); manageNav(currentPosition); //tell the buttons what to do when clicked $('.nav').bind('click', function() { //determine new position currentPosition = ($(this).attr('id')=='rightNav') ? currentPosition+1 : currentPosition-1; //hide/show controls manageNav(currentPosition); clearInterval(slideShowInterval); slideShowInterval = setInterval(changePosition, speed); moveSlide(); }); function manageNav(position) { //hide left arrow if position is first slide if(position==0){ $('#leftNav').hide() } else { $('#leftNav').show() } //hide right arrow is slide position is last slide if(position==numberOfSlides-1){ $('#rightNav').hide() } else { $('#rightNav').show() } } //changePosition: this is called when the slide is moved by the timer and NOT when the next or previous buttons are clicked function changePosition() { if(currentPosition == numberOfSlides - 1) { currentPosition = 0; manageNav(currentPosition); } else { currentPosition++; manageNav(currentPosition); } moveSlide(); } //moveSlide: this function moves the slide function moveSlide() { $('#slidesHolder').animate({'marginLeft' : slideWidth*(-currentPosition)}); } }); </script> <div id="slidebackgr"> <div id="slideshow"> <div id="slideshowWindow"> <div class="slide"> <a href="http:ссылка"> <img src="http://КАРТИНКА1.jpg" /> <!---Это меняем--> </div> <div class="slide"> <a href="http://ссылка"> <img src="http://КАРТИНКА2.jpg" /> <!---Это меняем--> </div> <div class="slide"> <a href="http://ссылка"> <img src="http://КАРТИНКА3.jpg" /><!---Это меняем--> </div> </div> </div> </div> </div>
2. Вставьте в самом вверху
<script type="text/javascript" src="{FORALL_JS_PATH}jquery-1.4.2_nyroModal-1.6.2_validate_capslock_jquery-ui-1.8.4.custom.min.js"></script>в начале страницы, там где прописаны скрипты.
3. Создайте картинки 576*300 пикселов. Загрузите в Редактор тем - внизу загрузка файлов. Подставьте их вместо слов кода КАРТИНКА, и пропишите необходимые ссылки на ваши страницы вместо слов ССЫЛКА.
4. Заключительное, перенесите всю информацию на свой сайт:
сохраните картинки в разделе Редактор тем - внизу Файлы:
http://img.storeland...7/slide_bg1.png
http://img.storeland.../28867/next.png
http://img.storeland...67/previous.png
Здесь желательно заменить данные картинки на свои, оригинальные, кнопки и подложку, сменить цвет, размер и т.д. Теперь новые ссылки пропишите вместо предыдущих в код.
Теперь можно поиграть цифрами, подогнать размеры. Также можно переместить прокрутку в другое место, раздвинуть на оба края.
П.С. Часть кода я меняла по ходу, возможны ошибки. Сама чайник.
П.П.С. Чтобы ляпов не было видно, лично я большой блок выставила в страницу Поиск, а не ХТМЛ, пока настраиваю, это не портит дизайн сайта.