Carousel Testimonial:

This section is used for displaying a collection review from the user or customers which slides infinitely throughout the section.

Available Options:

• Carousel Testimonial.

Carousel Testimonial:

Output:

"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

Monica Kalia Co-Founder, Neyber

"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

Eamon Jubbawy COO and Co-Founder, Onfido

"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

Giovanni Daprà Co-Founder and CEO, Moneyfarm

"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

Jeff Kelisky CEO, Seedrs

Code:

<div class="darkout-section">
{% include do-carousel-testimonial.html tag="module" %}
</div>

How to add content:

• Step1: Navigate to the data file for carousel testimonial in _data > do-carousel-testimonial.yml
• Step2: Add content to the data file as shown in the below example.

- tag: "module"  # Use carousel-testimonial tag here
  logos:
    - logo: "/assets/images/do-carousel-testimonial/neyber-logo-300x91.jpg"  # Use carousel-testimonial image here
      testimonial: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  # use testimonial content here
      author: "Monica Kalia Co-Founder, Neyber"  # Use author details

• Step3: In the data file tag is a mandatory value. Without using tag carousel testimonial will not be displayed.

How to add in page:

• Step1: Add carousel testimonial to the page using the include statement.
• Step2: On the page use

<div class="darkout-section">{% include do-carousel-testimonial.html tag="module" %}</div>

• Attributes:
  • Tag:
    • Tag is a mandatory attribute without using tag carousel testimonial will not be displayed. (Mandatory)
  • Class:
    • Use additional class here as include variable.

Carousel options:

• Use the script on the footer script file. Without using the script carousel logo will not work properly.
• Navigate to the footer script file in _includes/do-footer-script.html
• Find the carousel logo script as shown below

$('.members-testimonial').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 5000,
    arrows: false,
    dots: false,
    pauseOnHover: false,
    draggable: false,
    responsive: [{
        breakpoint: 991,
        settings: {
            slidesToShow: 1
        }
    },{
        breakpoint: 768,
        settings: {
            slidesToShow: 1
        }
    }, {
        breakpoint: 520,
        settings: {
            slidesToShow: 1
        }
    }]
});

• Use the same class used in carousel-logo.html file. Ex:.customer-logos
• slidesToShow: This options is used for number of slides to show.
• slidesToScroll: This options is used for scrolling number of slides per scroll.
• autoplay: This option is used for making autoplay of slide true or false.
• arrows: arrows option for the carousel. Set this to true, arrows will be visible. Set this to false, arrows will not be visible.
• dots: dots option for the carousel. Set this to true, dots will be visible. Set this to false, dots will not be visible.
• pauseOnHover: Enable this option so that the carousel will not slide to the next slide when hover.
• responsive: Use responsive option here.
  • breakpoint: this option specify the width of the screen
  • settings: Use the settings for the current breakpoint.
• multiple responsive arrays can be created.