[ Форум uCoz ]

Новое на сайте

Новые сообщения Участники Поиск Правила форума RSS

Страница 1 из 1
1

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

JokeR_PSiX

#1 Дата: 12.01.2023, 19:14

Сообщения 49

ПРОСТОЙ СЛАЙДЕР НОВОСТЕЙ И ФОТО ИЗОБРАЖЕНИЙ НА UCOZ

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

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

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

Установка:

После /head на нужных страницах вставляйте:

Код

Следующий код в самый низ вашего 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>

Скачать с сервера (2.6 Kb)

Прикрепления: 9836285.jpg (134.9 Kb)

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

Страница 1 из 1
1