How To Insert Auto Sliding Testimonial Into Your VPCart Site

How To Insert Auto Sliding Testimonial Into Your VPCart Site

You may want to display your customers testimonials in your homepage (at left or center or right column) and the testimonials will be sliding automatically without need visitors to click on each testimonials.


We have a guide on how to implement the "Responsive slider plugin" into your VPCart site.
Credit to https://github.com/viljamis/ResponsiveSlides.js.

With a little modification, you can apply this plugin into your VPCart site.

Steps as below:

1) Click here to download the CSS and JS files.
(Note : We modified the CSS file to suit VPCart site).

2) Unzip the testimonialwidget.zip to your local PC.

3) Upload the file js\responsiveslides.min.js into your VPCart site folder "js".

4) Upload the files below into your VPCart site folder "stylesheets":
- stylesheets\responsiveslides.css
- stylesheets\testimonial.css


5) Login to your VPCart administration and go to top menu : Website > Layout Manager >

6) Depend on your liking whether you want to display the testimonial at the Left container, Body center container, or Right container.
Let's take example, you want to display it at the Left container. Scroll to the bottom of Left container and click Add box button.

7) You will see an Empty box showing. Click Edit.

8) In the Main Selection, select "Column Free Text".

9) The rest of fields as below:
Enable : Yes
Label Name : Our Customers Testimonials (just example)
Seq No.: 09 (just example)
Display with box : Yes
Display Text : Please enter with the following code:

<link rel="stylesheet" href="stylesheets/responsiveslides.css">
<link rel="stylesheet" href="stylesheets/testimonial.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="js/responsiveslides.min.js"></script>
<script>
// You can also use "$(window).load(function() {"
$(function () {

// Slideshow 3
$("#slider3").responsiveSlides({
manualControls: '#slider3-pager',
maxwidth: 540
});

});
</script>

<!-- Slideshow 3 -->
<ul class="rslides" id="slider3">
<li>Your client testimonial 1</li>
<li>Your client testimonial 2</li>
<li>Your client testimonial 3</li>
<li>Your client testimonial 4</li>
<li>Your client testimonial 5</li>
</ul>


NOTE: Please replace the text below with your clients testimonials:
Your client testimonial 1
Your client testimonial 2
Your client testimonial 3
Your client testimonial 4
Your client testimonial 5

You can also add more testimonials by adding the new line eg <li>text here</li>

10) Click Save Changes.

You are done.

Go to your front store to preview it.


Times Viewed:
654
Added By:
Wilson Keneshiro
Date Created:
7/12/2018
Last Updated:
5/9/2019
Back Search other topics Submit a Ticket