TechBlogSD - Kaikki WordPressin ja WEB: n kehittämiseen
WEB- ja WordPress - ohjeet, uutiset, arvostelut teemoista ja laajennuksista

Bootstrap Testimonial Slider -widgetit

10

Suosittelut ovat asiakkaiden arvostuksia, jotka kannattaa näyttää käyttäjillesi. Tarkoituksena on osoittaa uskottavuutesi ja odottaa siten, että muutat enemmän käyttäjiä asiakkaillesi. Suosituksia voidaan lisätä sivustosi erilliselle sivulle, mutta widget auttaa sinua lisäämään suosittelut minne haluat linkit erilliselle sivulle. Tässä artikkelissa luodaan kaksi suositteluliukusäädintä Bootstrap -kehyksen avulla.

Luomme liukusäätimiä seuraavilla tyyleillä:

  • Automaattisesti pyörivä suosittelujen liukusäädin ilman valokuvaa
  • Manuaalisesti pyörivä liukusäädin valokuvalla
    • 1/3 + 2/3 kahden sarakkeen liukusäädin
    • 1/2 + 1/2 kahden sarakkeen liukusäädin
    • Täysleveä liukusäädin valokuvalla

Manuaalisesti pyörivässä liukusäätimessä on kolme tyyliä, jotka näytetään eri leveyksillä.

Automaattisesti pyörivä käynnistysnauhan suosituksen liukusäädin

Se on yksinkertainen liukusäädin, jossa on kolme suosittelua ja diat liikkuvat automaattisesti määritetyn aikavälin mukaisesti. Alla on, miltä se näyttää:

Lisää Bootstrap -suosituksen liukusäädin sivustoosi seuraavasti:

Vaihe 1 – CSS: n lisääminen

Lisää alla oleva CSS -koodi sivusi otsikko -osioon.

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

Vaihe 2 – Skriptin lisääminen

Lisää alla oleva komentosarja sivusi alatunnisteen alle. Liukusäätimen väli on 2500 ms, joka voidaan muuttaa haluamaasi kestoon.

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

Vaihe 3 – HTML -koodin lisääminen

Lisää alla oleva HTML -koodi sivusi runkoon, korvaa nukketeksti omalla sisällölläsi.

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

Manuaalisesti pyörivä liukusäädin

Tällä liukusäätimellä on kolme eri tyyliä alla:

  • Kaksi saraketta 1/3 + 2/3 – ensimmäinen sarake sisältää kiinteän suosituksen ja toinen sarake sisältää liukusäätimen.

Bootstrap Testimonial Slider -widgetit

  • Kaksi saraketta 1/2 + 1/2 – molemmat sarakkeet sisältävät liukusäätimen.

Bootstrap Testimonial Slider -widgetit

  • Täysleveä liukusäädin valokuvalla.

Bootstrap Testimonial Slider -widgetit

CSS yhdistetään kaikkiin kolmeen edellä mainittuun tyyliin, koska sarakkeet on määritetty HTML -koodin sisällä.

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

Muista sisällyttää jQuery- ja bootstrap.min.js -komentosarjat sivun alatunnisteeseen. Lisää lopuksi seuraava HTML -koodi sivusi runkoon.

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

Tallenna muutokset ja katso sivua selaimessa nähdäksesi tyylikkäät suositteluliukusäätimet. Varmista, että muutat nuken sisällön ja kuvat omillasi.

Leave A Reply

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. Hyväksyä Lisätietoja