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.
<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">
<script src="assets/js/jquery.min.js">
<script src="assets/js/owl.carousel.js">
<script src="assets/js/testimonial.js">
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.