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

Анализ сайта seo-vebmaster.ucoz.net Яндекс.Метрика Catalog.ru.net - Каталог сайтов
Сейчас online
Онлайн всего: 2
Гостей: 2
Пользователей: 0
Сегодня наш сайт посетили
[Полный список]
Счетчик пользователей
Сегодня нас посетило
Счетчики сайта
  • Счетчик юзеров
    • Всего юзеров: 15
    За месяц: 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 бесплатно
    Партнеры сайта
    Стать партнером Стать партнером Стать партнером Стать партнером
    Интересные файлы
    Граница
    PSD исходн...
    Фоны для ф...
    Урок Глава...
    Фоны для ф...
    Скачать Dr...
    Кисть для ...