Форма входа

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

    Уважаемые друзья и пользователи сайта ART-UCOZ!

    Уведомляем вас о том, что мы приняли трудное, но обдуманное решение о закрытии проекта в качестве Интернет-магазина ART-UCOZ. С 05.11.2022 года сайт ART-UCOZ.RU продолжит работать в качестве каталога файлов, статей и информации. Будет закрыт только раздел интернет-магазина!

    Все товары были перенесены в наш новый проект SHOPTHEMES - Vendor Marketplace (https://shopthemes.ru), над которым мы долго работали и продолжаем улучшать его в настоящее время.
    Вас ждут: личный кабинет, возможность пополнения баланса на любую сумму, зачисление бонусов за посещение, перевод средств между пользователями, вывод средств (для продавцов), личный чат, больше новых цифровых товаров и многое другое.

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

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

    Дата добавления: 25.01.2021 - 19:35
    Добавил: Buger
    Количество просмотров: 787
    Количество комментариев: 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
    });
    Добавлять комментарии могут только зарегистрированные пользователи.


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