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

3D карусель без ипользования Flesh
24.06.14, 09:39:04

Скачать файл




Для начала смотрим Демо

Возможности скрипта:
Данный скрипт прекрасно работает во всех популярных браузерах (в том числе и в IE начиная с IE6)
Прокрутка осуществляется автоматически с промежутком который вы сами установите,так же прокрутить можно с помощью колёсика мыши(к сожалению IE не поддерживает эту функцию) и при помощи кнопок навигации.
При щелчке мыши по картинке она плавно открывается в модальном окне.
Скрипт лёгок в установке и подстройке под свой дизайн сайта.

Итак начнём установку и попутно разберём важные функции которые понадобятся для настройки под ваш дизайн!

1)Качаем архив и заливаем в файловый менеджер не меняя структуры:
2)Далее между:
Код
<head></head>

Ставим этот код:
Код
<link rel="stylesheet" type="text/css"href="/css/carousel.css">  
  <link rel="stylesheet" type="text/css" href="/slimbox/slimbox2.css">  
  <script type="text/javascript" src="/js/jquery.min.js"></script>  
  <script type="text/JavaScript" src="/js/carousel.js"></script>  
  <script type="text/JavaScript" src="/js/cloud-carousel.1.0.4.min.js"></script>  
  <script type="text/JavaScript" src="/js/jquery.mousewheel.min.js"></script>  
  <script type="text/JavaScript" src="/slimbox/slimbox2.js"></script>


Теперь разбирем скрипт carousel.js:(смотрим коментарии)
Код
$(document).ready(function(){  
$("#carousel1").CloudCarousel(
{
xPos: 495, //Позиция по оси х  
yPos: 100, //Позиция по оси х  
buttonRight: $("#buttonLeft"), //Отвечает за кнопки навигации  
buttonLeft: $("#buttonRight"), //Отвечает за кнопки навигации  
autoRotate: 'right', //Напрвавление вращения (right или left )  
autoRotateDelay: 3000, //Скорость смены картинок (3 секунды )  
speed: 0.1, //Скорость вращения слайдера (от 0.1 до 0.3)  
reflHeight: 50, //Длина отражения изображений
reflOpacity: 0.5, //Прозрачност отражения изображений
yRadius: 110, //Радиус окражности карусели  
mouseWheel: true //Отвечает за вращение колесом мыщи
}  
);  
  });


В остольные скрипты без отличных знаний JavaScript лезть не стоит.

Сам слайдер состоит из одной картинки и двух кнопок управления,их вы легко сможите переделать под свой дизайн.

3)В то место где хотим видеть слайдер ставим этот код:
Код
<div id="carousel1">
  <div id="innerCarousel">  
  <a href="/img/carousel/1_big.jpg" rel="lightbox"><img class="cloudcarousel" src="/img/carousel/1.jpg" alt="картинка" /></a>  
  <a href="/img/carousel/2_big.jpg" rel="lightbox"><img class="cloudcarousel" src="/img/carousel/2.jpg" alt="картинка" /></a>  
  <a href="/img/carousel/3_big.jpg" rel="lightbox"><img class="cloudcarousel" src="/img/carousel/3.jpg" alt="картинка" /></a>  
  <a href="/img/carousel/4_big.jpg" rel="lightbox"><img class="cloudcarousel" src="/img/carousel/4.jpg" alt="картинка" /></a>  
  <a href="/img/carousel/5_big.jpg" rel="lightbox"><img class="cloudcarousel" src="/img/carousel/5.jpg" alt="картинка" /></a>  
  <a href="/img/carousel/6_big.jpg" rel="lightbox"><img class="cloudcarousel" src="/img/carousel/6.jpg" alt="картинка" /></a>  
  <a href="/img/carousel/7_big.jpg" rel="lightbox"><img class="cloudcarousel" src="/img/carousel/7.jpg" alt="картинка" /></a>  
  <a href="/img/carousel/8_big.jpg" rel="lightbox"><img class="cloudcarousel" src="/img/carousel/8.jpg" alt="картинка" /></a>  
  <a href="/img/carousel/9_big.jpg" rel="lightbox"><img class="cloudcarousel" src="/img/carousel/9.jpg" alt="картинка" /></a>  
  <a href="/img/carousel/10_big.jpg" rel="lightbox"><img class="cloudcarousel" src="/img/carousel/10.jpg" alt="картинка" /></a>  
  </div>  
  <div id="buttonLeft"></div>  
  <div id="buttonRight"></div>  
  </div>

Если что то не понятно, то открываем исходный код на демо странице и смотрим!
По всем вопросам пишем в коментарии или на форум!
Желаю удачи.
Категория: HTML5 | Добавил: Apocalypse | Теги: ипользования, flesh, Без, карусель, 3D
Просмотров: 616 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: