Рабочий слайдер для ucoz сайта + демо

Демо слайдера

Возможные изменения в слайдере

Не исключено что эта информация может пригодится:
1.Вопрос: Как сделать слайдер не фиксированным по ширине, а на всю свободную ширину?
1.Ответ: Заменить в стилях (max-width:600px;) на (max-width:100%;) и убрать функцию в скрипте (itemWidth:600,). Имейте в виду что элементы слайдов должны иметь одинаковый размер, иначе будет корявово.
2.Вопрос: Как убрать расположение слайдера по центру?.
2.Ответ: По умолчанию слайдер будет центрироваться, чтобы сделать расположение свободным уберите в стилях строку (margin:0 auto;).
3.Вопрос: Как убрать пустой промежуток между слайдами?
3.Ответ: Измените в стилях строку (margin-right: 5px !important;) на (margin-right: 0 !important;) и удалите функцию в скрипте (itemMargin:5,).

Слайдер с адаптивными свойствами будет изменять свои размеры относительно свободного пространства окна. Изначальные размеры изображений не имеют значения и будут масштабироваться согласно устанавливаемым размерам по месту. FlexSlider может использоваться как слайдер для видео, применяя в качестве слайдов видео проигрыватели. Резиновый слайдер имеет большое количество настроек, при помощи которых Вы сможете настроить воспроизведение на своё усмотрение. По умолчанию, готовый код для установки полностью настроен, Вам останется поместить его в требуемое место, изменить путь к используемым слайдам и радовать посетителей своими творениями. Форма комментариев ВКонтакте предназначена для краткого диалога о материале, для получения дополнительной информации технического характера нужно использовать стандартную форму комментариев.

Функциональные настройки FlexSlider

Описаны основные функции и применяемые значения в слайдере, Вы можете на свой вкус настроить работу FlexSlider для отображения изображений или видео проигрывателей. Там где значения прописываются без кавычек, изменяйте без них, а где значения указаны в кавычках, при изменении указывайте в кавычках. И обратите внимание что после каждой вписанной функции со значением стоит запятая, её нет только последней функции.

Установка слайдера

Красивый Слайдер для ucoz c демо

Для тех кто ищет красивый слайдер для своего сайта могу порекомендовать следующий - демо версия слайдера

Как он будет смотреться на сайте можно посмотреть здесь

Установка слайдера:

1. Скачиваете архив с моего сайта.

Создаете папку images и закачиваете в нее картинки - названия картинок должны быть аналогичны тем, которые вы найдете в архиве.

2. В css добавляем код из файла css.txt

3. Код слайдера размещаете на страницу.

Я рекомендую ставить слайдер на отдельную странице а на сайт вставлять его при помощи iframe

Пример такого кода

<center><IFRAME src="http://rusmarket.ucoz.net/slaider.htm" width="900" height="320" scrolling="no" frameborder="0"></IFRAME></center>

Как видете все довольно просто.

Рабочий демо вариант страницы так же лежит в архиве.

Устанавливать слайдер рекомендую на отдельную страницу, а выводить при помощи iframe

В архиве папки которые нужно залить на сервер, картинки и описание разумеется можно поменять на свои

Обычно эту галерею ставят в шапку - поэтому эта страница у меня разъехалась...

Пример работы скрипта смотрите здесь

Красивый дизайн сайта для ucoz сайтов

Мне тут случайно попался довольно приятный дизайн сайта Сергея Григорьева - довольно приятная гамма

- решил перенести его на ucoz - результат смотрите по ссылке с картинки :)

Как это сделать?

Довольно просто - смотрите код страницы - сохраняете его в текстовом файле - далее для надежности, чтобы не зависеть от работы чужого сайта, загружаете картинки на свой сайт

и прописываете абсолютный путь к плееру и mp3 файлам, чтобы не загружать к себе mp3 файлы - после чего  сохраняете эту страничку с расширением htm и загружаете ее на свой сайт

Теперь страничка вашего кумира у вас на сайте :)

Установка скрипта
1. В html редакторе вставляете код скрипта и сохраняете как html страницу, например я назвал свой файл slader2.htm

Далее закачиваете ее на свой сайт - мой слайдер установлен на странице: http://seoclub.ucoz.ru/slaider2.htm

2. Вставлять на страницу рекомендуется с помощью фрейма

<center><iframe src="http://seoclub.ucoz.ru/slaider2.htm" frameborder="0" height="400" width="800"></iframe></center>

Код скрипта:

<style>
#content {
width:600px;
margin:0px;
}
.slider {
float:left;
width:600px;
height:350px;
position:relative;
padding-bottom:26px;
background:url(http://seoclub.ucoz.ru/slaider2/bottom_shadow.png) no-repeat bottom center;
}
.sliderContent {
float:left;
width:600px;
height:350px;
clear:both;
position:relative;
overflow:hidden;
}
.sliderArrows a {
display:block;
text-indent:-9999px;
outline:none;
z-index:50;
background-image:url(http://seoclub.ucoz.ru/slaider2/prev_next.png);
width:42px;
height:42px;
position:absolute;
top:50%;
margin-top:-34px;
}
.prev {
background-position:0 0;
left:15px;
}
.prev:hover {
background-position:0 -44px;
}
.next {
right:15px;
background-position:-44px 0;
}
.next:hover {
background-position:-44px -44px;
}
.sliderContent .item {
position:absolute;
width:600px;
height:350px;
background:#fff;
}
.sliderBullets {
position:absolute;
bottom:0;
left:50%;
z-index:50;
margin-left:-45px;
}
.sliderBullets a {
display:block;
float:left;
text-indent:-9999px;
outline:none;
margin-left:5px;
width:10px;
height:11px;
background:url(http://seoclub.ucoz.ru/slaider2/bullets.png) no-repeat;
}
.sliderBullets .active {
background-position:0 -11px;
}
.sliderContent a {
outline:none;
}
</style>
</head>
<body>
<div class="slider dsslider">
<div class="sliderContent">
<div class="item">
<img src="http://seoclub.ucoz.ru/slaider2/img/001.jpg" alt="" />
</div>
<div class="item">
<img src="http://seoclub.ucoz.ru/slaider2/img/002.jpg" alt="" />
</div>
<div class="item">
<img src="http://seoclub.ucoz.ru/slaider2/img/003.jpg" alt="" />
</div>
<div class="item">
<img src="http://seoclub.ucoz.ru/slaider2/img/004.jpg" alt="" />
</div>
<div class="item">
<img src="http://seoclub.ucoz.ru/slaider2/img/005.jpg" alt="" />
</div>
<div class="item">
<img src="http://seoclub.ucoz.ru/slaider2/img/006.jpg" alt="" />
</div>
</div>
</div>
<script type="text/javascript" src="http://s36.ucoz.net/src/jquery-1.7.2.js"></script>
<script src="http://seoclub.ucoz.ru/slaider2/mobilyslider.js" type="text/javascript"></script>
<script type="text/javascript">
$('.dsslider').mobilyslider({
transition: 'fade',
animationSpeed: 800,
autoplay: true,
autoplaySpeed: 3000,
pauseOnHover: true,
bullets: true,
arrowsHide: true
});
</script>

Скрипт добавляет ссылку при копировании материалов сайта.

Проверить работу скрипта очень просто -
Попробуйте скопировать любой текст на сайте http://seoclub.ucoz.ru
и после этого вставить его либо в поле для комментариев или любой текстовой файл.

Скрипт который вы скачаете нужно вставить в редакторе между тегам <head> и </head>