Уважаемые пользователи seo-vebmaster.ucoz.net. Вы найдете у нас на портале - различные скрипты сайтов, уникальные, бесплатные шаблоны, модули, хаки и релизы популярных CMS . С Уважением Администрация seo-vebmaster.ucoz.net
Главная » Скачать бесплатно » Скачать Скачать для Uсoz бесплатно » Скачать Скрипты Ucoz бесплатно
Скачать Слайдинг новостей uCoz бесплатно
После регистрации у вас появиться еще одна ссылка для бесплатного скачивания и пропадет рекламма!
· Скриншот 13.12.2020, 21:39



Слайдинг новостей uCoz. Давайте поставим к себе на сайт такую замечательную карусельку, главной функцией которой будет прокрутка новостей вашего сайта. Крутит она не только картинки, но и при наведении на слайд, снизу выдвигается нужный текст, в нашем случае это будет заголовок новости.

Итак давайте разберем, как поставить данный cлайдер uCoz к себе на сайт, и заставить крутить наши новости.
Установка CSS

Добавим данный код в ПУ / Дизайн / Управление дизайном (css), либо в отдельный css файл.

Код
/* Carousel */  
.container_car {  
  position:relative;  
  overflow:hidden;  
}  
.clear {  
  clear:both;  
  display:block;  
  overflow:hidden;  
  visibility:hidden;  
  width:0;  
  height: 0;  
} .carousel {  
  position:relative;  
  margin:0 auto;  
  padding:0px 30px;  
}  
.carousel, .carousel_mask {  
  width:960px;  
  wwidth:767px;  
  wwidth:570px;  
}  
.carousel_btn_left, .carousel_btn_right {  
  display:none;  
  position:absolute;  
  background:url("http://mvcreative.ru/example/13/images/btn_carousel.png") no-repeat 0px 0px;  
  width:15px;  
  height:20px;  
  top:50px;  
}  
.carousel_btn_left {  
  left:10px;  
}  
.carousel_btn_right {  
  background:url("http://mvcreative.ru/example/13/images/btn_carousel.png") no-repeat 0px -20px;  
  right:10px;  
}  
.carousel_btn_left:active, .carousel_btn_right:active{ margin-top:1px; }  
.carousel_mask {  
  position:relative;  
  overflow:hidden !important;  
}  
.carousel ul.carousel_items {  
  position:relative;  
  margin:0px;  
}  
.carousel ul.carousel_items li {  
  float:left;  
  margin-right:19px;  
}  
.carousel ul.carousel_items li img {  
  width:160px;  
  height:100px;  
} .img_frame {  
  display:inline-block;  
  margin:4px;  
  padding:5px;  
  background-color:#fff;  
  line-height:0px;  
  border:1px solid #c0c1c2;  
  -moz-border-radius:3px;  
  border-radius:3px;  
  box-shadow:0px 0px 4px 0px rgba(0,0,0,0.12);  
}  
.img_frame .container_car ul {position:absolute;}  
.img_frame .container_car ul li {  
  margin:0px;  
  padding:0px;  
  width:100%;  
  overflow:hidden;  
}  
.img_frame a.description {  
  display:block;  
  padding:5px 8px;  
  background-color:#ffd86a;  
  color:#555;  
  line-height:16px;  
  font-size:12px;  
  text-decoration:none;  
}  
.img_frame a.description h4 {padding:0px;}



Установка JS

Добавим данный код в конец страницы перед тегом

Код
</body>

 

Код
<script src="http://mvcreative.ru/example/13/js/jquery.easing.1.3.js"></script>  
<script src="http://mvcreative.ru/example/13/js/carousel.js"></script>



Установка HTML
Устанавливаем данный код в то место где хотим отобразить карусель

Код
<div class="carousel">  
  <a class="carousel_btn_left" href="#"></a>  
  <a class="carousel_btn_right" href="#"></a>  

  <div class="carousel_mask">  
  <ul class="carousel_items">  
  <li class="img_frame">  
  <div class="container_car">  
  <ul>  
  <li><a class="single_image" href="#"><img src="http://mvcreative.ru/example/13/images/13_thumb_160.jpg" alt="" /></a></li>  
  <li><a class="description" href="#">Hover эффекты для ваших новостей</a></li>  
  </ul>  
  </div>  
  </li>  
  <li class="img_frame">  
  <div class="container_car">  
  <ul>  
  <li><a class="iframe" href="#"><img src="http://mvcreative.ru/example/13/images/18_thumb_160.jpg" alt="" /></a></li>  
  <li><a class="description" href="#">Как изменить страницу "технические работы"</a></li>  
  </ul>  
  </div>  
  </li>  
  <li class="img_frame">  
  <div class="container_car">  
  <ul>  
  <li><a class="single_image" href="#"><img src="images/06_thumb_160.jpg" alt="" /></a></li>  
  <li><a class="description" href="#">Сложная задача? Простое решение!</a></li>  
  </ul>  
  </div>  
  </li>  
  <li class="img_frame">  
  <div class="container_car">  
  <ul>  
  <li><a class="single_image" href="#"><img src="http://mvcreative.ru/example/13/images/15_thumb_160.jpg" alt="" /></a></li>  
  <li><a class="description" href="#">Информационные сообщения</a></li>  
  </ul>  
  </div>  
  </li>  
  <li class="img_frame">  
  <div class="container_car">  
  <ul>  
  <li><a class="iframe" href="#"><img src="http://mvcreative.ru/example/13/images/13_thumb_160.jpg" alt="" /></a></li>  
  <li><a class="description" href="#">Hover эффекты для ваших новостей</a></li>  
  </ul>  
  </div>  
  </li>  
  <li class="img_frame">  
  <div class="container_car">  
  <ul>  
  <li><a class="single_image" href="#"><img src="http://mvcreative.ru/example/13/images/11_thumb_160.jpg" alt="" /></a></li>  
  <li><a class="description" href="#">Информационные сообщения</a></li>  
  </ul>  
  </div>  
  </li>  
  <li class="img_frame">  
  <div class="container_car">  
  <ul>  
  <li><a class="single_image" href="#"><img src="http://mvcreative.ru/example/13/images/07_thumb_160.jpg" alt="" /></a></li>  
  <li><a class="description" href="#">Сложная задача? Простое решение!</a></li>  
  </ul>  
  </div>  
  </li>  
  <li class="img_frame">  
  <div class="container_car">  
  <ul>  
  <li><a class="single_image" href="#"><img src="http://mvcreative.ru/example/13/images/18_thumb_160.jpg" alt="" /></a></li>  
  <li><a class="description" href="#">Как изменить страницу "технические работы"</a></li>  
  </ul>  
  </div>  
  </li>  
  </ul>  
  </div>  
</div><!--/carousel-->



Все, установка готова, теперь осталось оживить ее, заставить крутить свои новости. Для этого перейдем в ПУ / Инструменты / Информеры и создадим новый информер uCoz. Разберем создание информера на примере модуля блог. Выбираем роаздел - "Блог", тип данных - "Материалы", способ сортировки - выбираем тот который нужен, количество материалов тоже ставим то которое нужно вам, количество колонок - 1. Кликаем создать.

Далее переходим в управление дизайном нашего информер и в открывшимся окне заменяем код на этот:

Код
<li class="img_frame">  
  <div class="container_car">  
  <ul>  
  <li><a class="single_image" href="$ENTRY_URL$"><img src="$IMG_URL1$" alt="" /></a></li>  
  <li><a class="description" href="$ENTRY_URL$">$TITLE$</a></li>  
  </ul>  
  </div>  
</li>



Сохраняем, копируем uCoz код информера, типа $MYINF_#$ и идем на ту страницу где мы установили html карусели. Заменяем старый код на новый:

Код
<div class="carousel">  
  <a class="carousel_btn_left" href="#"></a>  
  <a class="carousel_btn_right" href="#"></a>  

  <div class="carousel_mask">  
  <ul class="carousel_items">  
  $MYINF_#$  
  </ul>  
  </div>  
</div><!--/carousel-->



В котором $MYINF_#$ это ваш код вызова информера, со своей цифрой вместо #. Теперь все, информер новостей uCoz готов.

Картинки в карусель подставляются те, которые добавляютсяв специальное поле при добавление новости, "изображения".

Теперь немного настроек, если вы хотите уменьшить количество видимых слайдов в карусели, то вам нужно всего лишь изменить параметр ширины в css коде, к классам

Код
.carousel, .carousel_mask
5 слайдов - width:960px;
4 слайда - width:767px;
3 слайда - width:570px;



Если вам нужно чтобы стрелки прокрутки были видны всегда то в css добавьте:

Код
.carousel_btn_left, .carousel_btn_right {  
  display:block !important;  
}



На этом мы закончили полную установку нашего слайдера для uCoz.

 

 

 

Категория: Скачать Скрипты Ucoz бесплатно бесплатно | Добавил: diamont1977 | Теги: Скрипты для ucoz, Слайдинг, новостей, ucoz
Просмотров: 352 | Загрузок: 0 | Рейтинг: 0.0/0
Скачать Предпросмотр добавляемого материала   Адаптация чата iChat для uCoz
Всего комментариев: 0
Войдите:
avatar
Мини профиль
Для просмотра мини профиля,войдите на сайт как пользователь.
Мы в ВКонтакте
Разное
Популярные новости
Шаблон 7ol...
Шаблон для...
Уникальный...
Оригинал с...
Шаблон для...
Лучшие фай...
Последние ...
Мини-чат
Для добавления необходимо
войти или зарегистрироваться
Статистика
Счетчики сайта
Top.Mail.Ru

Анализ сайта seo-vebmaster.ucoz.net Яндекс.Метрика Catalog.ru.net - Каталог сайтов
Сейчас online
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Сегодня наш сайт посетили
[Полный список]
Счетчик пользователей
Сегодня нас посетило
Счетчики сайта
  • Счетчик юзеров
    • Всего юзеров: 14
    За месяц: 0
    За неделю: 0
    За вчера: 0
    Сегодня: 0
  • Счетчик материалов
    • Всего файлов: 1404
    Всего новостей: 0
    Всего статей: 0
    Темы форума: 1533
    Меню сайта
    Категории
    Шаблоны Ucoz бесплатно [24]
    Скачать бесплатно Шаблоны Ucoz бесплатно
    Скрипты Ucoz бесплатно [94]
    Скачать Скрипты Ucoz бесплатно
    Шапки для Ucoz [0]
    Скачать Шапки Ucoz бесплатно
    Иконки для Ucoz [5]
    Иконки Ucoz бесплатно
    Кнопки Ucoz бесплатно [3]
    Тут найдете и скачаете Кнопки Ucoz бесплатно
    Уроки Ucoz бесплатно [5]
    Тут найдете и скачаете Уроки Ucoz бесплатно
    Для Форумов Ucoz бесплатно [0]
    Тут найдете и скачаете Для Форумов Ucoz бесплатно
    Разное Ucoz бесплатно [38]
    Тут найдете и скачаете Разное Ucoz бесплатно
    Партнеры сайта
    Стать партнером Стать партнером Стать партнером Стать партнером
    Интересные файлы
    Стили - Др...
    Кисть для ...
    Шаблон Fan...
    Шаблон MSH...
    Стиль для ...
    Меню для н...
    Шрифт - Ro...