Tiva Testimonials Slider

Show your testimonials on carousel slider.

Contact us Our other products

Install

It is so easy to install Tiva Testimonials Slider. Just include some css and js files to your website. If your website has already font-awesome and jquery, don't need include them.

<!-- Include css file -->
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/owl.carousel.css">
<link rel="stylesheet" href="assets/css/owl.theme.default.min.css">
<link rel="stylesheet" href="assets/css/testimonial.css">

<!-- Include js file -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/owl.carousel.js"></script>
<script src="assets/js/testimonial.js"></script>

Usage

To display Tiva Testimonials Slider in page, just add div element with structure :

<div class="tiva-testimonials-slider" data-source="json" data-items="4" data-style="1">

In which :

  • data-items="4" : Number of testimonials to display per step. Default value : 3.
  • data-style="1" : Style for testimonials slider. There are 7 styles now : 1 -> 7. Default value : 1.
  • data-source="json" : source of testimonials. There are 2 options : json (feed testimonials from json file) and php (feed testimonials from php file). Default value : json.

- Feed testimonials from json file : You can modify testimonial list at file testimonials/testimonials.json. The images of testimonials is stored in folder testimonials/images.

- Feed testimonials from php file : To be flexible to integrate with your website, this plugin let you feed testimonials from your database via ajax. Please open file testimonials/testimonials.php, modify code to connect to your database and get testimonials data, then adapt it with testimonial variable in file (The example is already in this file).


Other option params :

  • data-autoplay="true" : Auto play slider or not. There are 2 options : true and false. Default value : false.
  • data-nav="false" : Show slider navigation or not. There are 2 options : true and false. Default value : true.
  • data-image="square" : Set image of testimonial is circle or square. There are 2 options : circle and square. Default value : circle.
  • data-effect="fadeOut" : If you want fadeout effect, use this option with value : fadeOut. It only apply for 1 item per step.
  • data-color='{"background":"#eee","name":"#5AA4A3","job":"#de935f","rating":"#567BD2","content":"#627f9a","image":"#d26e4b"}' : Customize color for background item, name, job, rating, content, border image.
Style 1 (With Background)
Style 1 (Without Background, Square Image)
Style 1 (1 Item)
Style 2
Style 3
Style 4 (With Custom Color)
Style 5
Style 6
Style 7