TechBlogSD - Wszystko do WordPressa i tworzenia stron internetowych
Instrukcje WEB i WordPress, nowości, recenzje motywów i wtyczek

Bootstrap Testimonial Suwak Widgety

5

Referencje to pochwały od klientów, które warto pokazać swoim użytkownikom. Celem jest pokazanie swojej wiarygodności, a tym samym oczekiwanie konwersji większej liczby użytkowników na swoich klientów. Referencje można dodać na osobnej stronie w witrynie, ale widżet pomoże wstawić referencje w dowolnym miejscu z linkami do osobnej strony. W tym artykule stwórzmy dwa suwaki referencji za pomocą frameworka Bootstrap.

Stworzymy slidery o następujących stylach:

  • Automatyczne obracanie suwaka referencji bez zdjęcia
  • Ręczny suwak obrotowy ze zdjęciem
    • Suwak 1/3 + 2/3 dwóch kolumn
    • 1/2 + 1/2 suwak dwóch kolumn
    • Suwak pełnej szerokości ze zdjęciem

Ręczny suwak obrotowy ma trzy style do wyświetlania w różnych szerokościach.

Auto Rotating Bootstrap Suwak Referencji

Jest to prosty suwak z trzema referencjami, a slajdy będą się przesuwać automatycznie z określonym interwałem. Poniżej jak to będzie wyglądać:

Bootstrap Testimonial Suwak Widgety

Wykonaj poniższe kroki, aby dodać suwak referencji Bootstrap w swojej witrynie:

Krok 1 – Dodanie CSS

Dodaj poniższy kod CSS w sekcji nagłówka swojej strony.

<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>

Krok 2 – Dodanie skryptu

Dodaj poniższy skrypt w sekcji kodu stopki na swojej stronie. Interwał suwaka jest zdefiniowany jako 2500 ms, który można zmienić na dowolny czas, w zależności od potrzeb.

<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>

Krok 3 – Dodanie HTML

Dodaj poniższy kod HTML w treści strony, zastąp fikcyjny tekst własną treścią.

<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>

Ręczny suwak obrotowy

Ten suwak ma trzy różne style, jak poniżej:

  • Dwie kolumny 1/3 + 2/3 – pierwsza kolumna zawiera stałe referencje, a druga kolumna zawiera suwak.

Bootstrap Testimonial Suwak Widgety

  • Dwie kolumny 1/2 + 1/2 – obie kolumny zawierają suwak.

Bootstrap Testimonial Suwak Widgety

  • Suwak o pełnej szerokości ze zdjęciem.

Bootstrap Testimonial Suwak Widgety

CSS jest połączony ze sobą dla wszystkich powyższych trzech stylów, ponieważ kolumny są ustalane w kodzie 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; }

Upewnij się, że w stopce strony znajdują się skrypty jQuery i bootstrap.min.js. Na koniec dodaj następujący kod HTML w treści swojej strony.

<!-- 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 -->

Zapisz zmiany i wyświetl stronę w przeglądarce, aby zobaczyć eleganckie suwaki referencji. Upewnij się, że zmieniłeś fikcyjną zawartość i obrazy na własne.

Źródło nagrywania: webnots.com
Leave A Reply

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów