СТАБИЛЬНОСТЬ

24.03.2016

Для готового шаблона с имеющейся шапкой:

1. Необходимо освободить место для слайда вместо шапки:

Прописываем в код CSS :

Код:
div.art-header {display:none;}

Далее в зависимости от размеров изображений вашего слайдера, в частности высоты, прописываем в CSS:

Код:
.art-content-layout {
    margin-top: 330px; }

В данном случае я задаю отступ сверху 330px;
Я привожу пример простого слайда изображений с возможностью прикрепить к каждому изображению ссылки:
В параметрах сайта в поле мета-тег прописываем следующий код:

Код:
<script type="text/javascript" src="http://restoran-leon.ru/js/site/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://restoran-leon.ru/js/jquery.innerfade/js/jquery.innerfade.js"></script>
      <script type="text/javascript">
      $(document).ready(
            function(){              
               $('ul#portfolio').innerfade({
                  speed: 1000,
                  timeout: 5000,
                  type: 'sequence',
                  containerheight: '400px'
               });
         });
     </script>

Далее в место установки слайдера, у меня в поле рекламы под шапкой, следующий код:

Код:
<div class="images_main">
<ul id="portfolio">
      <li>
            <a href="#">
<img src="http://img-fotki.yandex.ru/get/9827/240569873.0/0_166789_b0480076_XXL.jpg" width="998" height="300" border="0" style="border: #000

1px solid;" />

    </a>  
               </li>



         <!--% descr%-->
      <li>
            <a href="#">
<img src="http://img-fotki.yandex.ru/get/9751/240569873.0/0_16678a_259c4061_XXL.jpg" width="998" height="300" border="0" style="border: #000

1px solid;" />

    </a>  
               </li>



         <!--% descr%-->
      <li>
            <a href="#">
<img src="http://img-fotki.yandex.ru/get/9827/240569873.0/0_16678b_e9a15d41_XXL.jpg" width="998" height="300" border="0" style="border: #000

1px solid;" />

    </a>  
               </li>



         <!--% descr%-->
      <li>
            <a href="#">
<img src="http://img-fotki.yandex.ru/get/9827/240569873.0/0_16678c_66806c59_XXL.jpg" width="998" height="300" border="0" style="border: #000

1px solid;" />

    </a>  
               </li>



         <!--% descr%-->
      <li>
            <a href="#">
<img src="http://img-fotki.yandex.ru/get/9744/240569873.0/0_16678d_e0236fc9_XXL.jpg" width="998" height="300" border="0" style="border: #000

1px solid;" />

    </a>  
               </li>



         <!--% descr%-->
      <li>
            <a href="#">
<img src="http://img-fotki.yandex.ru/get/9744/240569873.0/0_16678e_49355026_XXL.jpg" width="998" height="300" border="0" style="border: #000

1px solid;" />

    </a>  
               </li>



         <!--% descr%-->

      </ul>
</div>

<div class="element">
<p style="text-align: center;"><img src="http://img-fotki.yandex.ru/get/9751/240569873.0/0_166790_d4f6f1ec_M.png" alt="Надпись в шапку" width="250"

height="100" /></p>
</div>

Меняете, соответственно ссылки на свои изображения, указываете нужный размер, можете ссылки вставить к изображениям.

Ну и в завершении для правильного расположения в код CSS прописываете:

Код:
.images_main {
position: absolute;

top: -330px;
width: 998px;
margin: 0 auto 0px;
margin-left: -223px;
background: #000;
z-index: 2;
}

#portfolio {

padding: -22px;
margin: -22px;
margin-bottom: -102px;
top: 0px;
z-index: 2;
}

.element {
position: absolute;
left: 50%;
margin-left: -125px;
width:250px;
height: 100px:
margin: 0 auto 0px;
top: -250px;
z-index: 3;
}

Задаете свой отступ сверху, по бокам и т.д. В данном коде я также прописал изображение "element" надпись в середину шапки, вы можете убрать его или изменить на свое.

Совсем забыл еще рамку вокруг шапки нужно убрать, следующий код CSS: 

Код:
.art-sheet-tr, .art-sheet-tl,.art-sheet-tc {

background-color: none;

background-image: none;

}

Нормально так работает, жаль только, что функций обработки у этого скрипта всего две...fade, и slide . Это если строчку вот тут докинуть. Без неё по умолчанию fade работает.

Код:
<script type="text/javascript" src="http://restoran-leon.ru/js/site/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://restoran-leon.ru/js/jquery.innerfade/js/jquery.innerfade.js"></script>
      <script type="text/javascript">
      $(document).ready(
            function(){              
               $('ul#portfolio').innerfade({
                [color=#BF0000] animationtype: 'slide',[/color]
 speed: 2000,
                  timeout: 4000,
                 [color=#FF0000] type: 'random',[/color] тут тоже можно покрутить :)
                  containerheight: '400px'
               });
         });
     </script>

еще в паре с вот этим не работает

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

А еще, если скрипты в браузере отключены, он все эти картинки по очереди разложит, что не совсем хорошо...

источник