Компаниям трудно демонстрировать свой успех потенциальным клиентам, особенно в Интернете. Слайдер, отображающий статистику компании, может изменить правила игры в конверсии посетителей сайта, если он реализован правильно. В зависимости от продукта или услуги, которые вы предоставляете, ползунок, отображающий статистику вашей компании, может быть более эффективным, чем слайдер, отображающий изображения с наложением текста.
Хотя пример в этом руководстве показывает широкий спектр статистических данных, крайне важно, чтобы вы показывали статистику, которая наиболее важна для ваших потенциальных клиентов. Например, если ваш веб-сайт занимает первое место в штате и 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 и включите его на свою веб-страницу.
Шаг 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>
В этой статье Солодев показал, как создать слайдер статистики компании для отображения на вашем сайте. Как было сказано во введении, использование ползунка этого типа и отображаемая вами статистика зависят от характера вашей компании.
Исходно опубликовано в блоге Solodev Web Design
Предоставлено вам командой Solodev. Solodev — это облачная система управления веб-контентом, которая дает пользователям свободу воплощать в жизнь удивительные веб-дизайны.