Create a Beaver Builder row slider using L&L and Slick Slider

_Beaver Builder Row Slider using L&L.md

Instructions to create a slider using Beaver Builder, Loops & Logic, and Slick Slider

HTML - L&L Template

• Loop through the saved rows with the category of "Home Hero Slider" or whatever you choose, and save those to a list
• Loop through that list and output those saved rows using the BB shortcode

Enqueue Slick Slider

• Add slick files to your child theme folder (css and js)
• Enqueue those files where you are using your slider

Set Slick Slider options

• Initiate slick and set your slick slider options via js

Beaver Builder Row Slider - L&L Template.html

<div class="hero-slider">
  <List saved_ids>
    <Loop type=fl-builder-template taxonomy=fl-builder-template-category terms=home-hero-slider>
      <Item><Field id /></Item>
    </Loop>
  </List>
  <Loop list=saved_ids>
    <div class="element">
      <Shortcode fl_builder_insert_layout id="{Field}" type=fl-builder-template />
    </div>
  </Loop>
</div>

enqueue-slick.php

<?php

function loadSlickScriptCSS() {

    wp_register_script ('slick-js', get_stylesheet_directory_uri() . '/js/slick.min.js', array( 'jquery' ),'1.0.0',true);
    wp_register_style ('slick-theme', get_stylesheet_directory_uri() . '/css/slick-theme.css', array(),'1.0.0','all');
    wp_register_style ('slick-styles', get_stylesheet_directory_uri() . '/css/slick.css', array(),'1.0.0','all');
    
    // Used for homepage hero slider
    if ( is_front_page() ) {
      wp_enqueue_script('slick-js');
      wp_enqueue_style( 'slick-theme');
      wp_enqueue_style( 'slick-styles');
    }
  }

add_action( 'wp_enqueue_scripts', 'loadSlickScriptCSS' );

slider-settings.js

jQuery(document).ready(function($) {
    $('.hero-slider').slick({
        dots: false,
        arrows: true,
        infinite: true,
        speed: 300,
        slidesToShow: 1,
        slidesToScroll: 1,
    });
});