Carousel Teamblocks:

This section is used for displaying a collection members of a team with their details which slides infinitely throughout the section.


Available Options:

  • Carousel Teamblocks Slider.

Output:

Code:


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


How to add content:

  • Step1: Navigate to the data file for carousel teamblocks in _data > do-carousel-teamblocks.yml
  • Step2: Add content to the data file as shown in the below example.
- name: Christopher Woolard  # Use team-block name here
  image: /assets/images/carousel-teamblocks/christopher-woolard.jpg  # Use team-block image here
  designation: Executive Director of Strategy & Competition, Financial Conduct Authority (FCA)  # Use team-block designation here
  tags: module  # Use team-block tag here
  • Step3: In the data file tags is a mandatory value. Without using tags carousel teamblocks will not be displayed.

How to add in page:

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

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

  • Attributes:
    • Tag:
      • Tag is a mandatory attribute without using tag carousel teamblocks 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

    $('.do-team-block-carousel').slick({
        slidesToShow: 4,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 1500,
        arrows: false,
        dots: false,
        pauseOnHover: true,
        responsive: [{
            breakpoint: 991,
            settings: {
                slidesToShow: 3
            }
        },{
            breakpoint: 768,
            settings: {
                slidesToShow: 2
            }
        }, {
            breakpoint: 520,
            settings: {
                slidesToShow: 2
            }
        }]
    });

  • 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.