Описание Как и вдургих частей слайдер его преимущество это эластичность, так-как он не только подходит под ширину
<div> , но и если они резиновые - то слайд тоже резиновый, к этому слайдеру я не представляю пример, потому-что все файлы и хост где я проверяю его стабильность могут быть удаленны или перенесенны, так что настоятельно рекомендую загружать их на свой сайт.
1.Создаем информер, как на скриншоте.(Там стоить материалов 15,но чем меньше, тем быстрее будет загружать слайдер) 2.Заменяем код шаблона Информера: Code
<li><a href="$ENTRY_URL$"><img src="$IMG_URL1$" width="110" height="82" title="$TITLE$" /></a></li>
3.Загружаем сss ,images ,js на свой сайт. 4.Код слайдера: Code
<style> @import '/css/reset.css'; @import '/css/elastislide.css'; </style> <noscript> <style> .es-carousel ul{ display:block; } </style> </noscript> <!-- Elastislide Carousel --> <div id="carousel" class="es-carousel-wrapper"> <div class="es-carousel"> <ul> Тут Ваш созданный информер <ul> </div> </div> <!-- End Elastislide Carousel --> <script type="text/javascript" src='/js/jquery.min.js'></script> <script type="text/javascript" src='/js/jquery.easing.1.3.js'></script> <script type="text/javascript" src='/js/jquery.elastislide.js'></script> <script type="text/javascript"> $('#carousel').elastislide({ imageW : 110, // Ширина изображенния должна соответсвовать с шириной картинки в информере margin : +11, // Отступы между изображениями border : 4, // Ширина обводки easing : 'easeInBack' // Новая функция того-же скрипта скольжения и торможения на 1 кадре }); </script>
5.Можно использовать вместо информера код картин: Code
<li><a href="#"><img src="images/medium/1.jpg" alt="image01" /></a></li> <li><a href="#"><img src="images/medium/2.jpg" alt="image02" /></a></li> <li><a href="#"><img src="images/medium/3.jpg" alt="image03" /></a></li> <li><a href="#"><img src="images/medium/4.jpg" alt="image04" /></a></li> <li><a href="#"><img src="images/medium/5.jpg" alt="image05" /></a></li> <li><a href="#"><img src="images/medium/6.jpg" alt="image06" /></a></li> <li><a href="#"><img src="images/medium/7.jpg" alt="image07" /></a></li> <li><a href="#"><img src="images/medium/8.jpg" alt="image08" /></a></li> <li><a href="#"><img src="images/medium/9.jpg" alt="image09" /></a></li> <li><a href="#"><img src="images/medium/10.jpg" alt="image10" /></a></li> <li><a href="#"><img src="images/medium/11.jpg" alt="image11" /></a></li> <li><a href="#"><img src="images/medium/12.jpg" alt="image12" /></a></li> <li><a href="#"><img src="images/medium/13.jpg" alt="image13" /></a></li> <li><a href="#"><img src="images/medium/14.jpg" alt="image14" /></a></li> <li><a href="#"><img src="images/medium/15.jpg" alt="image15" /></a></li> <li><a href="#"><img src="images/medium/16.jpg" alt="image16" /></a></li> <li><a href="#"><img src="images/medium/17.jpg" alt="image17" /></a></li> <li><a href="#"><img src="images/medium/18.jpg" alt="image18" /></a></li> <li><a href="#"><img src="images/medium/19.jpg" alt="image19" /></a></li> <li><a href="#"><img src="images/medium/20.jpg" alt="image20" /></a></li> <li><a href="#"><img src="images/medium/21.jpg" alt="image21" /></a></li> <li><a href="#"><img src="images/medium/22.jpg" alt="image22" /></a></li> <li><a href="#"><img src="images/medium/23.jpg" alt="image23" /></a></li> <li><a href="#"><img src="images/medium/24.jpg" alt="image24" /></a></li> <li><a href="#"><img src="images/medium/25.jpg" alt="image25" /></a></li>
Что же касаеться функции JQuery то вот easeInBack и есть в коде слайдера, если покапаться в jquery.easing.1.3.js , то можна поставить или оптимизировать код под свой вкус. О скрипте: Изображения - Karrie Nodalo. Карусель написанная - Мэри Лу. * Код сделан и оптизирован пользователем tigerforce специально для сайта UcozOn.ru и конкурса UcozOn.ru, при копирование частей кода или содержания желательна ссылка на источник, жду ваших предложений и коментариев о стабильности скрипта.
Автор\Источник: http://ucozon.ru
Для того что бы скачать архив необходимо зайти на сайт как пользователь.
Размер: 0,337 Мб
Дополнительные скрины: