Ремонт компьютера
Сборка, чистка, апгрейт ремонт любой техники.
Замена частей, установка ПО, установка Windows, антивируса.
Удаленная помощь без вызова на дом.
Создание сайта
Создание сайта с нуля, модулей, скриптов для сайта.
Движки Joomla, Wordpress, Opencart, Prestashop и тд.
SEO продвижение, ремонт, оптимизация сайта.

Слайдер от Сhizi из infinity

По просьбе одного человека сделал слайдер ему на сайт. Слайдер от chizi был сделан путем изменения логики другого слайдера, чтобы упростить и ускорить процесс написания, был использован infiniti. его динамисность мне нравиться. Если интересно можете глянуть и другое мое творение тут.

2

Скачать

Этот слайдер был установлен на сайт corpomix.by (более упрощенная):

  Скачать slider%20chizi%20v1.rar (скачен: 97)

Так же была сделана возможность улучшеного перелистывания, с выпадающим текстом, и минимилизацией его:

  Скачать slider%20chizi%20v2.rar (скачен: 124)

Функции

1) автоперелистывание
2) возможность подставить свой текст
3) полосочка состояния сколько до перелистывания.
4) нижняя панель с подписями
5) быстрая навигация
6) включить и отключить автоперелистывание
7) свою картинку любого размера
8) автоматическая подгонка размера по содержимому и количеству.
9)гибкое css. Легко можно сделать нужное оформлении и доп функции.

1

Установка

1)скачать архив выше.
2)распаковать архив
3)скопировать папку js в корень сайта.
4) добавить в head сайта вот это:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/js/infiniteCarousel/jquery.infinitecarousel.js"></script>
<script type="text/javascript">
$(function(){
$('#carousel').infiniteCarousel({
displayTime: 5000, // время до перелистывания в мс
transitionSpeed : 1000, // скорость перелистывания
kolNavi : 4, // сколько менюшек
displayProgressBar : 1, // показывать ли сколько осталось полоской внизу
});
});
</script>
<link rel="stylesheet" href="/js/infiniteCarousel/style.css">

5) добавить в body наш слайдер в удобное место на сайте (вот код видимой части):

<div id="carousel">
<ul>
<li>
<!-- Картинку подключить -->
<img class="imgBig" alt="" src="/js/infiniteCarousel/slide-1.gif" />
<span class="imgBig textImg" >
<span class="title">Титул 1</span><br>
<!-- текст -->
- вариант сотрудничества <br>
- вариант сотрудничества <br>
- вариант сотрудничества <br>
- вариант сотрудничества <br>
<!-- узнать больше кнопка -->
<a class="moreChizi" href="/chizi1"><img src="/js/infiniteCarousel/images/more.gif"></a>
</span>
<!-- нижняя кнопочка на нее -->
<span id="d1" class="hidden">Бухгалтеркие услуги</span>
</li>
<!-- Остальные так же, все динамически -->
<li>
<img alt="" src="/js/infiniteCarousel/slide-2.gif" class="imgBig" />
<span class="imgBig textImg" >
<!-- Титульник наш (h1- h6 не пашет) -->
<span class="title">Титул 2</span><br>
<!-- текст -->
- вариант сотрудничества <br>
- вариант сотрудничества <br>
- вариант сотрудничества <br>
- вариант сотрудничества <br>
<!-- узнать больше кнопка -->
<a class="moreChizi" href="/chizi1"><img src="/js/infiniteCarousel/images/more.gif"></a>
</span>
<span id="d2" class="hidden">1C Бухгалтерия</span></li>
<li><img alt="" src="/js/infiniteCarousel/slide-3.gif" class="imgBig" />
<span class="imgBig textImg" >
<!-- Титульник наш (h1- h6 не пашет) -->
<span class="title">Титул 3</span><br>
<!-- текст -->
- вариант сотрудничества <br>
- вариант сотрудничества <br>
- вариант сотрудничества <br>
- вариант сотрудничества <br>
<!-- узнать больше кнопка -->
<a class="moreChizi" href="/chizi1"><img src="/js/infiniteCarousel/images/more.gif"></a>
</span>
<span id="d3" class="hidden">SMM и Копирайтинг</span></li>
<li><img alt="" src="/js/infiniteCarousel/slide-4.gif" class="imgBig" />
<span class="imgBig textImg" >
<!-- Титульник наш (h1- h6 не пашет) -->
<span class="title">Титул 4</span><br>
<!-- текст -->
- вариант сотрудничества <br>
- вариант сотрудничества <br>
- вариант сотрудничества <br>
- вариант сотрудничества <br>
<!-- узнать больше кнопка -->
<a class="moreChizi" href="/chizi1"><img src="/js/infiniteCarousel/images/more.gif"></a>
</span>
<span id="d4" class="hidden">Рекламное сопровождение</span></li>
</ul>
</div>

6) оформление нашего слайдера лежит в файле css: style.css. нужный размер, прозрачность и тд, все смотрим там уже.
НАПРИМЕР
чтобы увеличить или уменьшить размер, или изменить размер картинки в слайдере открываем файл \js\infiniteCarousel\style.css
и меняем класс .imgBig на размер картинки, размер слайдер будет вычислен как imgBig*2. Вот например тут 590px, а значит слайдер будет размера 1180px:
3

P.S.

В архиве лежит и файл для тестов «index.php». Если желаете потестировать слайдер, то просто скопируйте файл в корень сайта своего, предварительно сохранив свой файл «index.php». И зайдите на свой сайт.

Если что то непонятно пишем в коментах, на все отвечу.

Название статьи при не правильной раскладке клавиатуры: Ckfqlth jn Chizi bp infinity
Если вдруг появилось желание поблагодарить автора,просто нажмите на рекламу чуть ниже, этого будет достаточно :)

Добавить комментарий

Ваш e-mail не будет опубликован.

Вставьте верное число *