Ваша корзина пуста
Форма входа

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

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

Адаптивный плагин jQuery News Ticker с Bootstrap - Bootstrap News Box

Дата добавления: 25.01.2021 - 19:35
Добавил: Buger
Количество просмотров: 201
Количество комментариев: 0
Размер файла: 92.1 Kb
Рейтинг материала: 5.0 / 1
Адаптивный плагин jQuery News Ticker с Bootstrap - Bootstrap News Box
БЕСПЛАТНО
рейтинг 5.0
/
голосов 1
Подключаемый плагин на основе jQuery и Bootstrap 4 для создания четкого отзывчивого бегунка/слайдера новостей, который позволяет вертикально прокручивать содержимое HTML с поддержкой автовоспроизведения и навигации вверх/вниз.

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


1. Загрузите и подключите в документ последнюю версию стилей Twitter Bootstrap и Font Awesome Iconic Font.
Код
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<link rel="stylesheet" href="/path/to/cdn/font-awesome/all.min.css" />

2. Загрузите и подключите плагин jQuery Bootstrap News Box на страницу и убедитесь, что у вас уже загружена последняя версия библиотеки jQuery.
Код
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery.bootstrap.newsbox.min.js"></script>

3. Создайте вертикальную ленту новостей, используя компонент карточки Bootstrap следующим образом:
Код
<div class="card">
  <div class="card-header">
  <span class="glyphicon glyphicon-list-alt"></span><b>Популярные новости</b></div>
  <div class="card-body">
  <div class="row">
  <div class="col-xs-12">
  <ul class="demo1">

  <li class="news-item">
  <table cellpadding="4">
  <tr>
  <td><img src="images/1.png" width="60" class="img-circle" /></td>
  <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></td>
  </tr>
  </table>
  </li>

  <li class="news-item">
  <table cellpadding="4">
  <tr>
  <td><img src="images/2.png" width="60" class="img-circle" /></td>
  <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></td>
  </tr>
  </table>
  </li>

  <li class="news-item">
  <table cellpadding="4">
  <tr>
  <td><img src="images/3.png" width="60" class="img-circle" /></td>
  <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></td>
  </tr>
  </table>
  </li>

  <li class="news-item">
  <table cellpadding="4">
  <tr>
  <td><img src="images/4.png" width="60" class="img-circle" /></td>
  <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></td>
  </tr>
  </table>
  </li>

  <li class="news-item">
  <table cellpadding="4">
  <tr>
  <td><img src="images/5.png" width="60" class="img-circle" /></td>
  <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></td>
  </tr>
  </table>
  </li>

  <li class="news-item">
  <table cellpadding="4">
  <tr>
  <td><img src="images/6.png" width="60" class="img-circle" /></td>
  <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></td>
  </tr>
  </table>
  </li>

  <li class="news-item">
  <table cellpadding="4">
  <tr>
  <td><img src="images/7.png" width="60" class="img-circle" /></td>
  <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></td>
  </tr>
  </table>
  </li>

  </ul>
  </div>
  </div>
  </div>
  <div class="card-footer"></div>
</div>

4. Немного CSS для стилизации элементов списка.
Код
.fas {
  margin-right: 4px !important; /*override*/
}

.fas .glyphicon {
  margin-right: 0px !important; /*override*/
}

.pagination a {
  color: #555;
}

.card ul {
  padding: 0px;
  margin: 0px;
  list-style: none;
}

.news-item {
  padding: 4px 4px;
  margin: 0px;
  border-bottom: 1px dotted #555;
}

5. Вызвать плагин из списка и готово.
Код
$(".demo1").bootstrapNews({
  // options here
});

6. Возможные варианты настройки ленты новостей.
Код
$(".demo1").bootstrapNews({

  // количество элементов на странице
  newsPerPage: 4,

  // показывает навигацию вверх / вниз
  navigation: true,

  // включает автовоспроизведение
  autoplay: true,

  // или "down"
  direction:'up',

  // скорость анимации
  animationSpeed: 'normal',

  // интервал автовоспроизведения
  newsTickerInterval: 4000,  

  // пауза при наведении
  pauseOnHover: true,

});

7. Функции обратного вызова.
Код
$(".demo1").bootstrapNews({
  onStop: null,
  onPause: null,
  onReset: null,
  onPrev: null,
  onNext: null,
  onToDo: null
});
Добавлять комментарии могут только зарегистрированные пользователи.


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