Главная » Файлы » Прочие скрипты » jQuery

Простой светлый слайдер контента на jQuery для uCoz
24.06.14, 16:44:02

Скачать файл




Простенький слайдер любого вашего контента, который неплохо впишется в светлый дизайн

Для начала посмотрите ДЕМО

Моё тестирование в фидле: КЛИК

Установка:

После /head на нужных страницах вставляйте:
Код
<script src="/js/jquery.jcarousel.js"></script>  
  <script>  
  $(document).ready(function () {  
  $('.d-carousel .carousel').jcarousel({  
  scroll: 1  
  });  
  });  
  </script>

Следующий код в самый низ вашего css:
Код
.d-carousel {  
  color: #787878;  
  font-size: 12px;  
  line-height: 18px;  
  }  
  .d-carousel a {  
  text-decoration: none;  
  color: #4b4b4b;  
  }  
  .d-carousel ul li {  
  background: none;  
  background-color: #FFF;  
  -webkit-box-shadow: 0px 1px 2px 0px #b7b7b7;  
  -moz-box-shadow: 0px 1px 2px 0px #b7b7b7;  
  box-shadow: 0px 1px 2px 0px #b7b7b7;  
  padding: 15px;  
  width: 175px;  
  }  
  .jcarousel-direction-rtl {  
  direction: rtl;  
  }  
  .d-carousel h4 {  
  margin: 5px 0 5px 0;  
  }  
  .d-carousel .jcarousel-container {  
  display: block;  
  overflow: hidden;  
  margin-bottom: 20px;  
  }  
  .d-carousel .jcarousel-item {  
  width: 175px;  
  height: 290px;  
  }  
  .d-carousel .jcarousel-container-horizontal {  
  width: 650px;  
  height: 325px;  
  padding: 0 45px;  
  }  
  .d-carousel .jcarousel-item-horizontal {  
  margin-left: 3px;  
  margin-bottom: 3px;  
  margin-top: 3px;  
  margin-right: 11px;  
  }  
  .d-carousel .jcarousel-next-horizontal {  
  position: absolute;  
  top: 149px;  
  right: 0;  
  margin-right: 3px;  
  width: 15px;  
  height: 28px;  
  cursor: pointer;  
  background: transparent url(/images/blog-arrows.jpg) no-repeat top right;  
  }  
  .d-carousel .jcarousel-direction-rtl .jcarousel-next-horizontal {  
  left: 5px;  
  right: auto;  
  background-image: url(/images/blog-arrows.jpg);  
  }  
  .d-carousel .jcarousel-next-horizontal:hover {  
  background-position: bottom right;  
  }  
  .d-carousel .jcarousel-prev-horizontal {  
  position: absolute;  
  top: 149px;  
  left: 0;  
  margin-left: 3px;  
  width: 15px;  
  height: 28px;  
  cursor: pointer;  
  background: transparent url(/images/blog-arrows.jpg) no-repeat top left;  
  }  
  .d-carousel .jcarousel-direction-rtl .jcarousel-prev-horizontal {  
  left: auto;  
  right: 5px;  
  background-image: url(/images/blog-arrows.jpg);  
  }  
  .d-carousel .jcarousel-prev-horizontal:hover {  
  background-position: bottom left;  
  }  
  .clear {  
  clear:both;  
  display:block;  
  overflow:hidden;  
  visibility:hidden;  
  width:0;  
  height:0  
  }

Далее в то место, где должен располагаться слайдер:
Код
<div class="d-carousel">  
  <ul class="carousel">  
  <li><a href="#"><img src="Ссылка на картинку" /></a>  
  <h4><a href="#">http://apo-ucoz.com</a></h4>  
   

Уникальные скрипты для uCoz</p>  
  </li>  
  <li><a href="#"><img src="Ссылка на картинку" /></a>  
  <h4><a href="#">http://apo-ucoz.com</a></h4>  
   

Уникальные скрипты для uCoz</p>  
  </li>  
  <li><a href="#"><img src="Ссылка на картинку" /></a>  
  <h4><a href="#">http://apo-ucoz.com</a></h4>  
   

Уникальные скрипты для uCoz</p>  
  </li>  
  <li><a href="#"><img src="Ссылка на картинку" /></a>  
  <h4><a href="#">http://apo-ucoz.com</a></h4>  
   

Уникальные скрипты для uCoz</p>  
  </li>  
  <li><a href="#"><img src="Ссылка на картинку" /></a>  
  <h4><a href="#">http://apo-ucoz.com</a></h4>  
   

Уникальные скрипты для uCoz</p>  
  </li>  
  </ul>  
  </div>  
  <div class="clear"></div>

Скрипт из прикреплённого архива залейте в папку js, картинку в папку images

Материал подготовлен Apocalypse

Категория: jQuery | Добавил: Apocalypse | Теги: ucoz, на, JQuery, контента, простой, для, слайдер, Светлый
Просмотров: 417 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: