TechBlogSD - Todo para WordPress y desarrollo WEB
Instrucciones de WEB y WordPress, noticias, reseñas de temas y complementos

Widgets de control deslizante de testimonios de Bootstrap

4

Los testimonios son apreciaciones de los clientes y que vale la pena mostrar a sus usuarios. El propósito es mostrar su credibilidad y, por lo tanto, esperar convertir a más usuarios en sus clientes. Los testimonios se pueden agregar en una página separada en su sitio, pero un widget lo ayudará a insertar los testimonios donde desee con los enlaces a una página separada. En este artículo, creemos dos controles deslizantes testimoniales utilizando el marco Bootstrap.

Crearemos controles deslizantes con los siguientes estilos:

  • Control deslizante de testimonios giratorio automático sin foto
  • Control deslizante giratorio manual con foto
    • Control deslizante de dos columnas 1/3 + 2/3
    • 1/2 + 1/2 control deslizante de dos columnas
    • Control deslizante de ancho completo con foto

El control deslizante giratorio manual tiene tres estilos para mostrar en diferentes anchos.

Control deslizante de testimonios de Bootstrap con rotación automática

Es un control deslizante simple con tres testimonios y las diapositivas se moverán automáticamente con el intervalo definido. A continuación se muestra cómo se verá:

Widgets de control deslizante de testimonios de Bootstrap

Siga los pasos a continuación para agregar el control deslizante de testimonios de Bootstrap en su sitio:

Paso 1: agregar CSS

Agregue el siguiente código CSS debajo de la sección de encabezado de su página.

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

Paso 2: agregar secuencia de comandos

Agregue el siguiente script en la sección de código de pie de página de su página. El intervalo del control deslizante se define como 2500 ms, que se puede cambiar a cualquier duración que necesite.

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

Paso 3: agregar HTML

Agregue el siguiente código HTML dentro del cuerpo de su página, reemplace el texto ficticio con su propio contenido.

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

Control deslizante giratorio manual

Este control deslizante tiene tres estilos diferentes como se muestra a continuación:

  • Dos columnas 1/3 + 2/3: la primera columna contiene un testimonio fijo y la segunda columna contiene un control deslizante.

Widgets de control deslizante de testimonios de Bootstrap

  • Dos columnas 1/2 + 1/2: ambas columnas contienen un control deslizante.

Widgets de control deslizante de testimonios de Bootstrap

  • Control deslizante de ancho completo con foto.

Widgets de control deslizante de testimonios de Bootstrap

El CSS se combina para los tres estilos anteriores, ya que las columnas se deciden dentro del código 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; }

Asegúrese de incluir los scripts jQuery y bootstrap.min.js en la sección de pie de página de la página. Finalmente agregue el siguiente código HTML dentro del cuerpo de su página.

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

Guarde sus cambios y vea la página en el navegador para ver elegantes controles deslizantes de testimonios. Asegúrese de cambiar el contenido ficticio y las imágenes con los suyos.

Fuente de grabación: webnots.com
Deja una respuesta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More