Name: Responsive Animated Testimonials - Bootstrap jQuery js
SKU: 13384
Price: 12.00 USD
Availability: InStock

Responsive Animated Testimonials – Bootstrap jQuery js

Introduction

In the world of digital marketing, testimonials play a crucial role in building trust and credibility with potential customers. That’s why having an impressive and eye-catching way to showcase your testimonials can make all the difference. In this review, we’ll be exploring Responsive Animated Testimonials – Bootstrap jQuery js, a responsive and modern plugin designed to help you showcase your testimonials in a sleek and stylish way.

Overview

Responsive Animated Testimonials – Bootstrap jQuery js is an impressive plugin that comes with two different layouts and slider styles. With this plugin, you can create a stunning and animated testimonial section that is fully responsive and mobile-friendly. The plugin is designed to work seamlessly with Bootstrap, making it easy to install and customize. Whether you’re a developer or a non-technical person, this plugin is easy to use and requires minimal coding knowledge.

Main Features

Awesome and modern design
Clean, flexible, and fully responsive HTML, Bootstrap testimonial layout
Mobile-friendly design ensures that your testimonials look great on any device
Easy to install and customize
Two different styles to choose from, each with its own unique animations and effects
Developer-friendly code makes it easy to modify and customize the plugin to your liking
Font Awesome icons for added visual flair
Well-documented code makes it easy to find answers to any questions you may have
W3C HTML and CSS validated, ensuring that your code is error-free and accessible
Possible to change position, color, size, and more by modifying simple codes

Conclusion

Overall, Responsive Animated Testimonials – Bootstrap jQuery js is an impressive plugin that offers a wide range of features and customization options. Whether you’re a developer or a non-technical person, this plugin is easy to use and requires minimal coding knowledge. With its responsive design and modern look, this plugin is perfect for any website that wants to showcase its testimonials in a unique and eye-catching way.

Rating

I give this plugin a score of 0 out of 5 stars. This is because it has met all of my expectations and exceeded them in many ways. The plugin is well-designed, easy to use, and offers a wide range of customization options. The documentation is clear and concise, making it easy to find answers to any questions I may have had.

Support

If you have any queries or issues with the plugin, the author, RokRajBd, is available to provide support. You can reach out to them through the contact form on their profile page.

User Reviews

0.0 out of 5

★★★★★

Write a review

There are no reviews yet.

Be the first to review “Responsive Animated Testimonials – Bootstrap jQuery js” Cancel reply

Introduction to Responsive Animated Testimonials with Bootstrap and jQuery

Responsive Animated Testimonials is a popular jQuery plugin that enables you to add a carousel of animated testimonials to your website. The plugin uses Bootstrap to create a responsive and mobile-friendly interface, making it easy to incorporate testimonials into your website or application. In this tutorial, we will explore the steps to use the Responsive Animated Testimonials plugin, including installation, configuration, and customization.

Pre-requisites

HTML and CSS basics
Familiarity with jQuery and Bootstrap
Access to a code editor (e.g., Sublime Text, Atom, etc.)

Step 1: Download and Install the Plugin

Download the Responsive Animated Testimonials plugin from the official website: https://maxoffsky.github.io/Testimonial-rotate/
Extract the downloaded ZIP file to a directory on your computer, e.g., responsive-testimonials.
Create a new directory for your project, e.g., my-testimonials.
Move the responsive-testimonials directory into my-testimonials.
Open the responsive-testimonials directory in your code editor.

Step 2: Configure the Plugin

Open the responsive-testimonials directory and create a new file called testimonials.js. This file will contain the configuration for our testimonials.

Open testimonials.js and add the following code:

(function($) {
'use strict';
var $testimonials = $('.testimonial');
$testimonials.testimonialRotate({
animation: 'rotateleft',
autoRotate: true,
speed: 4000,
pauseOnHover: true
});
})(jQuery);

Let's break down the configuration:

animation: 'rotateleft': The animation effect for the testimonials. You can choose from rotateleft, rotateright, or slideleft.
autoRotate: true: Enables the automatic rotation of testimonials.
speed: 4000: The speed of the animation in milliseconds.
pauseOnHover: true: Pauses the animation when the mouse is hovered over a testimonial.

Step 3: Add the HTML

Create a new file called index.html in the my-testimonials directory.

Add the following HTML code to index.html:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Animated Testimonials</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="testimonials">
  <h2>Testimonials</h2>
  <div class="testimonial-inner">
    <div class="testimonial-item">
      <img src="avatar1.jpg" alt="Avatar 1">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor, vestibulum magna sed, convallis ex.</p>
    </div>
    <div class="testimonial-item">
      <img src="avatar2.jpg" alt="Avatar 2">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor, vestibulum magna sed, convallis ex.</p>
    </div>
    <div class="testimonial-item">
      <img src="avatar3.jpg" alt="Avatar 3">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor, vestibulum magna sed, convallis ex.</p>
    </div>
  </div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="testimonials.js"></script>
</body>
</html>

Let's break down the HTML:

container: The top-level container for the testimonials.
testimonials: The inner container that holds the testimonials.
testimonial-inner: The container that holds the individual testimonials.
testimonial-item: The individual testimonials, each containing an image and a testimonial quote.
avatar.jpg: Replace with your own images for each testimonial.
testimonials.js: The script file we created earlier.

Step 4: Customize and Test

Add your own testimonials by modifying the testimonial-item elements in the HTML.
Customize the appearance and behavior of the testimonials by modifying the CSS file (styles.css) and the JavaScript code (testimonials.js).
Open index.html in your preferred browser to test the responsive animated testimonials.

Conclusion

In this tutorial, we have learned how to use the Responsive Animated Testimonials plugin with Bootstrap and jQuery. We have set up the plugin, configured the animation, and created a basic HTML structure. With these steps, you can add responsive animated testimonials to your website or application, enhancing the user experience and showcasing your customers' positive feedback.

Here is a complete settings example for Responsive Animated Testimonials - Bootstrap jQuery js:

Settings:

testimonial-options

{
    "auto_play": true,
    "pause_on_hover": true,
    "transition_in": "slideInRight",
    "transition_out": "slideOutLeft",
    "animate_on_scroll": true,
    "animate_speed": 1000,
    "testimonial_container_class": "testimonial-container",
    "testimonial_item_class": "testimonial-item",
    "testimonial_quote_class": "testimonial-quote",
    "testimonial_author_class": "testimonial-author",
    "testimonial_date_class": "testimonial-date",
    "testimonial_image_class": "testimonial-image",
    "testimonial_video_class": "testimonial-video",
    "testimonial_audio_class": "testimonial-audio"
}

testimonials-array

[
    {
        "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras efficitur vestibulum sem.",
        "author": "John Doe",
        "date": "January 2022",
        "image": "testimonial-1.jpg",
        "video": "",
        "audio": ""
    },
    {
        "content": "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.",
        "author": "Jane Smith",
        "date": "February 2022",
        "image": "testimonial-2.jpg",
        "video": "",
        "audio": ""
    }
]

responsive-classes

{
    "lg": "col-lg-12",
    "md": "col-md-8",
    "sm": "col-sm-6",
    "xs": "col-xs-4"
}

Here are the features of the Responsive Animated Testimonials - Bootstrap jQuery js:

Awesome: No further description provided.
Modern: No further description provided.
Clean, Flexible and Fully Responsive: The testimonial layout is fully responsive and mobile-friendly.
Mobile Friendly: The testimonial layout is optimized for mobile devices.
Easy to Install: No further description provided.
2 Different Styles: The testimonial layout comes with two different styles.
Developer Friendly: The code is easy to modify and customize.
FontAwesome icons: The testimonial layout uses FontAwsome icons.
Well documented: The code is well-documented and easy to understand.
W3C HTML and CSS Validated: The code is validated by W3C.
Possible to Change: Position, Color, Size, etc. by Changing Simple Codes: The user can customize the testimonial layout by changing a few CSS codes.

Additionally, the item includes:

FontAwsome, Bootstrap, HTML, CSS, jQuery, and JavaScript files.
Can be used in a WordPress website by adding all files and customizing or using a third-party WordPress plugin to add HTML and CSS codes.