Описание: В этой части дано максимум возможности скрипта, и к всему этому теперь если у вас резиновые дивы можно не бояться и вставлять скрипт в таблицы, так-как сам див котрый мы будем легулировать будет в глобальном блоке и плюс слайдер будет(останеться) резиновым, это можно легко проверит играя с окном браузера(Это у кого див на весь сайт, в таблице css)
1.Создаем два информера, как на скриншотах.(Там стоит материалов 8,но чем меньше, тем быстрее будет загружать слайдер)
<style> @import 'http://windchange.my1.ru/css/reset.css'; @import 'http://windchange.my1.ru/css/elastislide.css'; </style> <noscript> <style> .es-carousel ul{ display:block; } </style> </noscript> <!--В дивах прописанна - ширина,отступ,положние от вверх в низ в процентах слайдера */--> <div style="width:48%;float:left;padding:1%;"> <!-- Elastislide Carousel --> <div id="carousel1" class="es-carousel-wrapper"> <div class="es-carousel"> <ul> Ваш информер 1 </ul> </div> </div><!-- End Elastislide Carousel --> </div> <!--В дивах прописанна - ширина,отступ,положние от вверх в низ в процентах слайдера */--> <div style="width:48%;float:left;padding:1%;"> <!-- Elastislide Carousel --> <div id="carousel2" class="es-carousel-wrapper"> <div class="es-carousel"> <ul> Ваш информер 2 </ul> </div> </div><!-- End Elastislide Carousel --> </div> <script type="text/javascript" src='http://windchange.my1.ru/js/jquery.min.js'></script> <script type="text/javascript" src='http://windchange.my1.ru/js/jquery.easing.1.3.js'></script> <script type="text/javascript" src='http://windchange.my1.ru/js/jquery.elastislide.js'></script> <script type="text/javascript"> $('#carousel1').elastislide({ imageW : 50, // Ширина изображенния должна соответсвовать с шириной картинки в информере margin : 0, // Отступы между изображениями border : 1, // Ширина обводки easing : 'easeInBack', // Новая функция того-же скрипта скольжения и торможения на 1 кадре current : 3 // Начальная позиция, в даном случае с 4 картинки, делим по палам из общего числа изображений в сладере });
$('#carousel2').elastislide({ imageW : 50, // Ширина изображенния должна соответсвовать с шириной картинки в информере margin : 0, // Отступы между изображениями border : 1, // Ширина обводки easing : 'easeInBounce', // Новая функция того-же скрипта потрясование current : 3 // Начальная позиция, в даном случае с 4 картинки, делим по палам из общего числа изображений в сладере }); </script>
В коде все подписанно, если, что не понятно комментируем. В 2 слайдере по умолчанию стоит в кавычках easeInBounce, можно поменять на стандартную easeInBack.
О скрипте: Изображения - Karrie Nodalo. Карусель написанная - Мэри Лу.
*Код сделан и оптизирован пользователем tigerforce специально для сайта UcozOn.ru и конкурса UcozOn.ru, при копирование частей кода или содержания желательна ссылка на источник, жду ваших предложений и коментариев о стабильности скрипта.
Автор\Источник:Ucozon.ru
Для того что бы скачать архив необходимо зайти на сайт как пользователь.
Размер: 0,123 Мб
Упс, савсем забыл что в оригинальном js не прописанна функция ссылки, а в архиве оригинальный, так что даю ссылку windchange.my1.ru/js/jquery.elastislide.js