Компаниям трудно демонстрировать свой успех потенциальным клиентам, особенно в Интернете. Слайдер, отображающий статистику компании, может изменить правила игры в конверсии посетителей сайта, если он реализован правильно. В зависимости от продукта или услуги, которые вы предоставляете, ползунок, отображающий статистику вашей компании, может быть более эффективным, чем слайдер, отображающий изображения с наложением текста.

Хотя пример в этом руководстве показывает широкий спектр статистических данных, крайне важно, чтобы вы показывали статистику, которая наиболее важна для ваших потенциальных клиентов. Например, если ваш веб-сайт занимает первое место в штате и 9 289 место в стране, просто покажите, что вы — первое место в штате. В приведенном ниже уроке Солодев покажет вам, как создать слайдер статистики с помощью slick slider by Ken Wheeler.

Ниже приведены необходимые HTML, CSS и JavaScript.

Шаг 1 — stats-slider.html

Скопируйте и вставьте приведенный ниже HTML-код на свою веб-страницу.

<div class="ct-current-facts">
  <h2>Company Stats</h2>
  <div class="container">
    <div class="ct-row">
      <div class="ct-current-facts__slider ct-js-current-facts__slider">
        <div class="item">
          <div class="ct-current-fact"><span class="number">#1</span><a href="/district/about-us/" class="title">Ranking in the State</a></div>
        </div>
        <div class="item">
          <div class="ct-current-fact"><span class="number">75</span><a href="/district/about-us/" class="title">On-site Employees</a></div>
        </div>
        <div class="item">
          <div class="ct-current-fact"><span class="number">25<sup></sup></span><a href="/district/about-us/" class="title">Fortune 500 Clients</a></div>
        </div>
        <div class="item">
          <div class="ct-current-fact"><span class="number">7<sup>th</sup></span><a href="/district/about-us/" class="title">Largest in the Nation</a></div>
        </div>
        <div class="item">
          <div class="ct-current-fact"><span class="number">15</span><a href="/district/about-us/" class="title">Years in Business</a></div>
        </div>
        <div class="item">
          <div class="ct-current-fact"><span class="number">12</span><a href="/district/about-us/" class="title">Recent Awards</a></div>
        </div>
      </div>
    </div>
  </div>
</div>

Примечание. Каждый класс «предмет» после инициализации станет отдельным разделом ползунка.

Шаг 2 — stats-slider.js

Скопируйте и вставьте приведенный ниже код JavaScript в файл с именем stats-slider.js и включите его на свою веб-страницу.

'use strict';
(function($) {
  $('document').ready(function() {
/* Current Facts Slider */
    if ('.ct-js-current-facts__slider'.length) {
      $('.ct-js-current-facts__slider').slick({
        arrows: true,
        slidesToShow: 4,
        autoplay: false,
        prevArrow: '<button type="button" class="slick-arrow slick-arrow--prev">' + '<img src="https://www.solodev.com/assets/statistics-slider/arrow-prev.jpg" />' + '</button>',
        nextArrow: '<button type="button" class="slick-arrow slick-arrow--next">' + '<img src="https://www.solodev.com/assets/statistics-slider/arrow-next.jpg" />' + '</button>',
        responsive: [
          {
            breakpoint: 991,
            settings: {
              slidesToShow: 2
            }
          }, {
            breakpoint: 767,
            settings: {
              slidesToShow: 2
            }
          }, {
            breakpoint: 479,
            settings: {
              slidesToShow: 1
            }
          }
        ]
      });
    }
});
})(jQuery);

Примечание. Slick Slider готов принять ряд параметров, таких как контрольные точки, перечисленные выше. Полный список параметров см. в разделе Настройки Slick Slider.

Шаг 3 — stats-slider.css

Загрузите приведенный ниже CSS и включите его на свою веб-страницу.

stats-slider.css

Шаг 4. Включите следующие ресурсы на свою веб-страницу.

<link rel="stylesheet" href="stats-slider.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

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

Демо на JSFiddle

Скачать с GitHub

Исходно опубликовано в блоге Solodev Web Design

Предоставлено вам командой Solodev. Solodev — это облачная система управления веб-контентом, которая дает пользователям свободу воплощать в жизнь удивительные веб-дизайны.