Форма входа

Бесплатный раздел

Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!

Горизонтальный слайдер содержимого на jQuery при момощи плагина x-rhyme.js

Дата добавления: 12.10.2020 - 09:04
Добавил: Buger
Количество просмотров: 32
Количество комментариев: 0
Размер файла: 11.6 Kb
Рейтинг материала: 0.0 / 0
Горизонтальный слайдер содержимого на jQuery при момощи плагина x-rhyme.js
рейтинг 0.0
/
голосов 0
x-rhyme.js - это легкий плагин jQuery для создания горизонтального слайдера контента, где пользователи могут перемещаться по слайдам с помощью колесика мыши, клавиш со стрелками или путем нажатия якорей и элементов управления разбиением на страницы.

Как это использовать:


1. Подключите последнюю версию плагина x-rhyme.js после jQuery на вашей веб-странице.
Код
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.xrhyme.js"></script>
<link rel="stylesheet" href="/path/to/xrhyme.demo.css" />


2. Добавьте слайды в слайдер содержимого x-rhyme следующим образом:
Код
<div id="XContainer" class="x_container">

  <article class="x_item">
  <h2>Article title 1</h2>
  <p>Article Content 1</p>
  </article>

  <article class="x_item">
  <h2>Article title 2</h2>
  <p>Article Content 2</p>
  </article>

  <article class="x_item">
  <h2>Article title 3</h2>
  <p>Article Content 3</p>
  </article>

  <article class="x_item">
  <h2>Article title 4</h2>
  <p>Article Content 4</p>
  </article>

  <article class="x_item">
  <h2>Article title 5</h2>
  <p>Article Content 5</p>
  </article>
   
  ...

</div>


3. Вызовите функцию и готово.
Код
$(function(){
  $('.x_container').xrhyme();
});


4. Добавляем элементы управления нумерацией страниц в слайдер содержимого.
Код
<nav>
  <ul>
  <li class="anchor"><a href="#0">1</a></li>
  <li class="anchor"><a href="#1">2</a></li>
  <li class="anchor"><a href="#2">3</a></li>
  <li class="anchor"><a href="#3">4</a></li>
  <li class="anchor"><a href="#4">5</a></li>
  </ul>
</nav>

Код
$(function(){
  $('.x_container').xrhyme({
  navigationSelector : 'nav li'
  });
});


5. Делаем перемещение между слайдами с помощью якорных ссылок.
Код
<div id="XContainer" class="x_container">

  <article class="x_item">
  <h2>Article title 1</h2>
  <p>Article Content 1</p>
  <p class="anchor"><a href="#1">next »</a></p>
  </article>

  <article class="x_item">
  <h2>Article title 2</h2>
  <p>Article Content 2</p>
  <p class="anchor"><a href="#2">next »</a></p>
  </article>

  <article class="x_item">
  <h2>Article title 3</h2>
  <p>Article Content 3</p>
  <p class="anchor"><a href="#3">next »</a></p>
  </article>

  <article class="x_item">
  <h2>Article title 4</h2>
  <p>Article Content 4</p>
  <p class="anchor"><a href="#4">next »</a></p>
  </article>

  <article class="x_item">
  <h2>Article title 5</h2>
  <p>Article Content 5</p>
  <p class="anchor"><a href="#0">« Back</a></p>
  </article>
   
  ...

</div>

Код
$(function(){
  $('.x_container').xrhyme({
  navigationSelector : '.anchor a',
  anchorMode : true
  });
});


6. Применяем функцию замедления к переходу при прокрутке. Требуется подключаемый плагин jQuery easing.
Код
<script src="/path/to/cdn/jquery.easing.min.js"></script>

Код
$(function(){
  $('.x_container').xrhyme({
  easing : 'swing'
  });
});


7. Определяем скорость колесика мыши (0-1).
Код
$(function(){
  $('.x_container').xrhyme({
  wheelSpeed : 0.5
  });
});


8. Указываем скорость анимации.
Код
$(function(){
  $('.x_container').xrhyme({
  animationTime : 600
  });
});


9. Запуск функции после завершения перехода.
Код
$(function(){
  $('.x_container').xrhyme({
  animeComplete : function(){
  // сделай что-нибудь
  }
  });
});
Добавлять комментарии могут только зарегистрированные пользователи.


Поделись с друзьями: