TechBlogSD - Все для WordPress і WEB розробки
WEB і WordPress інструкції, новини, огляди тем та плагінів

Завантажувальні віджети відгуків про слайдери

2

Відгуки – це вдячність клієнтів, які варто показати своїм користувачам. Мета полягає в тому, щоб продемонструвати свій авторитет, отже, очікуючи, що більше користувачів приверне увагу до ваших клієнтів. Відгуки можна додати на окрему сторінку вашого сайту, але віджет допоможе вам вставити відгуки куди завгодно за допомогою посилань на окрему сторінку. У цій статті давайте створимо два повзунки -свідчення за допомогою фреймворка Bootstrap.

Ми створимо повзунки з такими стилями:

  • Автоповоротний повзунок відгуків без фотографії
  • Повзунок, що обертається вручну з фотографією
    • 1/3 + 2/3 повзунок для двох стовпців
    • 1/2 + 1/2 повзунок для двох стовпців
    • Повзунок на всю ширину з фотографією

Повзунок, що обертається вручну, має три стилі для показу різної ширини.

Автоматичний поворотний завантажувальний тестовий слайдер

Це простий слайдер з трьома відгуками, і слайди будуть рухатися автоматично з визначеним інтервалом. Нижче, як це буде виглядати:

Завантажувальні віджети відгуків про слайдери

Виконайте наведені нижче кроки, щоб додати повзунок свідчень Bootstrap на свій сайт:

Крок 1 – Додавання CSS

Додайте нижченаведений код CSS під розділ заголовка вашої сторінки.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <style type="text/css"> .container { width:100% !important; } #quote-carousel { padding: 0 10px 30px 10px; margin-top: 30px; text-align:center; overflow-x:hidden; overflow-y:hidden; } #quote-carousel .carousel-indicators { right: 50%; top: auto; bottom: -10px; margin-right: -19px; } #quote-carousel .carousel-indicators li { background: #c0c0c0; } #quote-carousel .carousel-indicators .active { background: #333333; height:10px; width:10px; margin-bottom:1px; } </style>

Крок 2 – Додавання сценарію

Додайте наведений нижче сценарій під розділом коду нижнього колонтитулу вашої сторінки. Інтервал повзунка визначається як 2500 мс, який можна змінити на будь -яку тривалість.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <script type="text/script"> $(document).ready(function() { //carousel options $('#quote-carousel').carousel({ pause: true, interval: 2500, }); }); </script>

Крок 3 – Додавання HTML

Додайте наведений нижче HTML -код у тіло сторінки, замініть фіктивний текст власним вмістом.

<div class="container"> <div class="row"> <div class="col-md-12"> <div class="carousel slide" data-ride="carousel" id="quote-carousel"> <!-- Bottom Carousel Indicators --> <ol class="carousel-indicators"> <li data-target="#quote-carousel" data-slide-to="0" class="active"></li> <li data-target="#quote-carousel" data-slide-to="1"></li> <li data-target="#quote-carousel" data-slide-to="2"></li> </ol> <!-- Carousel Slides / Quotes --> <div class="carousel-inner"> <!-- Quote 1 --> <div class="item active"> <div class="row"> <div class="col-sm-12"> <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus."</p> <small><strong>Vulputate M., Dolor</strong></small> </div> </div> </div> <!-- Quote 2 --> <div class="item"> <div class="row"> <div class="col-sm-12"> <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus."</p> <small><strong>Fringilla A., Vulputate Sit</strong></small> </div> </div> </div> <!-- Quote 3 --> <div class="item"> <div class="row"> <div class="col-sm-12"> <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus."</p> <small><strong>Aenean A., Justo Cras</strong></small> </div> </div> </div> <!-- End of Quotes --> </div> </div> </div> </div> </div>

Поворотний повзунок, що обертається вручну

Цей повзунок має три різні стилі, як показано нижче:

  • Дві колонки 1/3 + 2/3 – перша колонка містить фіксовану характеристику, а друга колонка містить повзунок.

Завантажувальні віджети відгуків про слайдери

  • Два стовпці 1/2 + 1/2 – обидва стовпці містять повзунок.

Завантажувальні віджети відгуків про слайдери

  • Повзунок на всю ширину з фотографією.

Завантажувальні віджети відгуків про слайдери

CSS поєднується для всіх вищевказаних трьох стилів, оскільки стовпці визначаються в HTML -коді.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <style> .testimonials p { background: #f4f4f4; border-radius: 5px; margin-bottom: 25px; padding: 20px; position: relative; font-style: italic; } .testimonials p:after { border-top: 22px solid ; border-left: 0px solid transparent; border-right: 22px solid transparent; left: 60px; bottom: -22px; width: 0; height: 0; content: ""; display: block; position: absolute; border-top-color: #f4f4f4; border-left-style: inset; border-right-style: inset; } .testimonials .testimonial-info { min-height: 60px; } .testimonials .testimonial-info span { color: #000000; font-size: 18px; } .testimonials .testimonial-info span em { color: #777; display: block; font-size: 13px; } .testimonials .testimonial-info img { border: 4px solid #f4f4f4; float: left; height: 60px; margin-right: 15px; padding: 2px; width: 60px; } .testimonials .carousel-indicators { bottom: 46px; left: auto; right: 80px; width: auto; } .testimonials .carousel-indicators li { border-color: #b3b3b3; } .testimonials-arrows { bottom: 57px; left: auto; right: 37px; width: auto; position: absolute; } .testimonials-arrows a { color: #b3b3b3; } .testimonials-bg-primary p { background: #bc5e43; color: #ffffff; } .testimonials-bg-primary p:after { border-top-color: #bc5e43; } .testimonials-bg-light p { background: #ffffff; } .testimonials-bg-light p:after { border-top-color: #ffffff; } .testimonials-bg-dark p { background: #9e4f38; color: #FFFFFF; } .testimonials-bg-dark p:after { border-top-color: #9e4f38; } .portfolio-related-fw { box-sizing: content-box; }

Обов’язково включіть скрипти jQuery та bootstrap.min.js у нижній колонтитул сторінки. Нарешті, додайте наступний код HTML у тіло сторінки.

<!-- Start Testimonials Two Columns Style 1/3 + 2/3 --> <div class="col-md-4"> <div class="carousel slide testimonials" id="testimonials4"> <div class="carousel-inner"> <div class="item active"> <div class="testimonials-bg-dark col-md-12"> <p> Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. </p> <div class="testimonial-info"> <img alt="Testimonial" src="https://img.webnots.com/2015/08/Testimonial1.jpg" class="img-circle img-responsive" /> <span class="testimonial-author"> Alice Carter <em> Javascript Developer </em> </span> </div> </div> <div class="clearfix"></div> </div> <div class="item"> <div class="testimonials-bg-dark col-md-12"> <p> Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. </p> <div class="testimonial-info"> <img alt="Testimonial" src="https://img.webnots.com/2015/08/Testimonial3.jpg" class="img-circle img-responsive" /> <span class="testimonial-author"> Denise Campbell <em> Web Developer, Amazing Designs Ltd. </em> </span> </div> </div> <div class="clearfix"></div> </div> <div class="item"> <div class="testimonials-bg-dark col-md-12"> <p> Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. </p> <div class="testimonial-info"> <img alt="Testimonial" src="https://img.webnots.com/2015/08/Testimonial3.jpg" class="img-circle img-responsive" /> <span class="testimonial-author"> David Perez <em> CEO & Founder, Virtuoso Inc. </em> </span> </div> </div> <div class="clearfix"></div> </div> </div> </div> </div> <div class="col-md-8"> <div class="carousel slide testimonials" id="testimonials6"> <ol class="carousel-indicators"> <li class="active" data-slide-to="0" data-target="#testimonials6"> </li> <li data-slide-to="1" data-target="#testimonials6"> </li> <li data-slide-to="2" data-target="#testimonials6"> </li> </ol> <div class="carousel-inner"> <div class="item active"> <div class="col-md-12"> <p> Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. </p> <div class="testimonial-info"> <span class="testimonial-author"> Cristina Hall <em> Javascript Developer, Business Inc. </em> </span> </div> </div> <div class="clearfix"></div> </div> <div class="item"> <div class="col-md-12"> <p> Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec id elit non mi porta gravida at eget metus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. </p> <div class="testimonial-info"> <span class="testimonial-author"> Anthony Watkins <em> Web Developer, Amazing Designs Ltd. </em> </span> </div> </div> <div class="clearfix"></div> </div> <div class="item"> <div class="col-md-12"> <p> Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. </p> <div class="testimonial-info"> <span class="testimonial-author"> Jonathan Baker <em> CEO & Founder, Virtuoso Inc. </em> </span> </div> </div> <div class="clearfix"></div> </div> </div> </div> <div class="testimonials-arrows pull-right"> <a class="left" href="#testimonials6" data-slide="prev"> <span class="fa fa-arrow-left"></span> </a> <a class="right" href="#testimonials6" data-slide="next"> <span class="fa fa-arrow-right"></span> </a> <div class="clearfix"></div> </div> </div> <!-- End Testimonials Two Columns Style 1/3 + 2/3 --> <!-- Start Testimonials Two Columns Style 1/2 + 1/2 --> <div class="col-md-6"> <div class="carousel slide testimonials" id="testimonials2"> <ol class="carousel-indicators"> <li class="active" data-slide-to="0" data-target="#testimonials2"> </li> <li data-slide-to="1" data-target="#testimonials2"> </li> <li data-slide-to="2" data-target="#testimonials2"> </li> </ol> <div class="carousel-inner"> <div class="item active"> <div class="testimonials-bg-light col-md-12"> <p> Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. </p> <div class="testimonial-info"> <img alt="Testimonials" src="https://img.webnots.com/2015/08/Testimonial2.jpg" class="img-circle img-responsive" /> <span class="testimonial-author"> Jessie Rodgers <em> Javascript Developer, Business Inc. </em> </span> </div> </div> <div class="clearfix"></div> </div> <div class="item"> <div class="testimonials-bg-light col-md-12"> <p> Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. </p> <div class="testimonial-info"> <img alt="Testimonials" src="https://img.webnots.com/2015/08/Testimonial3.jpg" class="img-circle img-responsive" /> <span class="testimonial-author"> Anthony Watkins <em> Web Developer, Amazing Designs Ltd. </em> </span> </div> </div> <div class="clearfix"></div> </div> <div class="item"> <div class="testimonials-bg-light col-md-12"> <p> Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. </p> <div class="testimonial-info"> <img alt="Testimonials" src="https://img.webnots.com/2015/08/Testimonial3.jpg" class="img-circle img-responsive" /> <span class="testimonial-author"> Jonathan Baker <em> CEO & Founder, Virtuoso Inc. </em> </span> </div> </div> <div class="clearfix"></div> </div> </div> </div> <div class="testimonials-arrows pull-right"> <a class="left" href="#testimonials2" data-slide="prev"> <span class="fa fa-arrow-left"></span> </a> <a class="right" href="#testimonials2" data-slide="next"> <span class="fa fa-arrow-right"></span> </a> <div class="clearfix"></div> </div> </div> <div class="col-md-6"> <div class="carousel slide testimonials" id="testimonials3"> <ol class="carousel-indicators"> <li class="active" data-slide-to="0" data-target="#testimonials3"> </li> <li data-slide-to="1" data-target="#testimonials3"> </li> <li data-slide-to="2" data-target="#testimonials3"> </li> </ol> <div class="carousel-inner"> <div class="item active"> <div class="testimonials-bg-primary col-md-12"> <p> Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. </p> <div class="testimonial-info"> <img alt="Testimonials" src="https://img.webnots.com/2015/08/Testimonial3.jpg" class="img-circle img-responsive" /> <span class="testimonial-author"> Anthony Watkins <em> Javascript Developer, Business Inc. </em> </span> </div> </div> <div class="clearfix"></div> </div> <div class="item"> <div class="testimonials-bg-primary col-md-12"> <p> Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. </p> <div class="testimonial-info"> <img alt="Testimonials" src="https://img.webnots.com/2015/08/Testimonial1.jpg" class="img-circle img-responsive" /> <span class="testimonial-author"> Cristina Hall <em> Web Developer, Amazing Designs Ltd. </em> </span> </div> </div> <div class="clearfix"></div> </div> <div class="item"> <div class="testimonials-bg-primary col-md-12"> <p> Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. </p> <div class="testimonial-info"> <img alt="Testimonials" src="https://img.webnots.com/2015/08/Testimonial3.jpg" class="img-circle img-responsive" /> <span class="testimonial-author"> Jonathan Baker <em> CEO & Founder, Virtuoso Inc. </em> </span> </div> </div> <div class="clearfix"></div> </div> </div> </div> <div class="testimonials-arrows pull-right"> <a class="left" href="#testimonials3" data-slide="prev"> <span class="fa fa-arrow-left"></span> </a> <a class="right" href="#testimonials3" data-slide="next"> <span class="fa fa-arrow-right"></span> </a> <div class="clearfix"></div> </div> </div> <!-- End Testimonials - Two Columns 1/2 + 1/2 --> <!-- Start Testimonials Full Width --> <div class="col-md-12"> <div class="carousel slide testimonials" id="testimonials1"> <ol class="carousel-indicators"> <li class="active" data-slide-to="0" data-target="#testimonials-rotate"> </li> <li data-slide-to="1" data-target="#testimonials1"> </li> <li data-slide-to="2" data-target="#testimonials1"> </li> </ol> <div class="carousel-inner"> <div class="item active"> <div class="col-md-12"> <p> Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. </p> <div class="testimonial-info"> <img alt="Testimonials" src="https://img.webnots.com/2015/08/Testimonial3.jpg" class="img-circle img-responsive" /> <span class="testimonial-author"> Cristina Hall <em> Javascript Developer, Business Inc. </em> </span> </div> </div> <div class="clearfix"></div> </div> <div class="item"> <div class="col-md-12"> <p> Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. </p> <div class="testimonial-info"> <img alt="Testimonials" src="https://img.webnots.com/2015/08/Testimonial3.jpg" class="img-circle img-responsive" /> <span class="testimonial-author"> Anthony Watkins <em> Web Developer, Amazing Designs Ltd. </em> </span> </div> </div> <div class="clearfix"></div> </div> <div class="item"> <div class="col-md-12"> <p> Cras justo odio, dapibus ac facilisis in, egestas eget quam. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. </p> <div class="testimonial-info"> <img alt="Testimonials" src="https://img.webnots.com/2015/08/Testimonial3.jpg" class="img-circle img-responsive" /> <span class="testimonial-author"> Jonathan Baker <em> CEO & Founder, Virtuoso Inc. </em> </span> </div> </div> <div class="clearfix"></div> </div> </div> </div> <div class="testimonials-arrows pull-right"> <a class="left" href="#testimonials1" data-slide="prev"> <span class="fa fa-arrow-left"></span> </a> <a class="right" href="#testimonials1" data-slide="next"> <span class="fa fa-arrow-right"></span> </a> <div class="clearfix"></div> </div> </div> <!-- End Testimonials Full Width -->

Збережіть зміни та перегляньте сторінку у веб -переглядачі, щоб побачити елегантні повзунки -свідчення. Обов’язково змініть фіктивний вміст та зображення власними.

Джерело запису: webnots.com
Залиште відповідь

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі