Multi Option Gallery

Add options Carousel [carousel ] and Center Mode [center_mode ] in display_mode and create respective field that is mentioned in script ..make sure u apply the condition on the respective fields visible according to Display Mode

and when all Set .. Just Copy and Paste Below Code in Editor

{% set slides = [] %}
<div class='custom_logo_slider image_{{ module.display_mode }} {% if module.display_mode == "center_mode" %} custom-image-gallery {% endif %}'>
{% for slide in module.slides %}

{% if (slide.link_url is string_startingwith "http") or (slide.link_url is string_startingwith "/") %}
    {% set link = slide.link_url %}
{% elif !slide.link_url %}
    {% set link = none %}
{% else %}
    {% set link = "//" ~ slide.link_url %}
{% endif %}

  {{ slides.append({ "caption":  slide.caption,
        "show_caption": slide.show_caption,
        "link_url": link,
        "alt_text": slide.img.alt,
        "img_src": slide.img.src,
        "open_in_new_tab": slide.open_in_new_tab
        }) | string | replace('true', '')
    }}
{% endfor %}


{% gallery
    "Gallery"
    display_mode='{{ module.display_mode }}'
    sizing='{{ module.sizing }}',
    transition='{{ module.transition }}',
    caption_position='{{ module.caption_position }}',
    auto_advance='{{ module.auto_advance }}',
    overrideable=True,
    description_text='',
    show_pagination='{{ module.show_pagination }}',
    label='{{title}}',
    slides='{{ slides }}',
    loop_slides='{{ module.loop_slides }}',
    num_seconds='{{ module.num_seconds }}',
%}

{% if module.display_mode == "carousel" or module.display_mode == "center_mode" %}
<script src="//cdn2.hubspot.net/hubfs/2770179/AIIT_August2018/Js/slick.min.js"></script>

<script>
  $('.image_{{ module.display_mode }} .hs_cos_gallery .slick-slide-inner-wrapper img').each(function(){
    var getSrc = $(this).attr('src') || $(this).attr('data-lazy');
    $(this).attr('src', getSrc);
  });
  $('.image_{{ module.display_mode }} .hs_cos_gallery').removeAttr("id");
  $('.image_{{ module.display_mode }} .hs_cos_gallery .hs_cos_gallery_main').slick({
    {% if module.display_mode == "carousel" %}
      slidesToShow: {{ module.slides_to_show }},
      infinite: true,
      slidesToScroll: {{ module.slide_to_move }},
      speed: {{ module.carousel_speed }},
      autoplay: true,
      responsive: [
        {
          breakpoint: 768,
          settings: {
            slidesToShow: {{ module.slide_to_move }}
          }
        },
        {
          breakpoint: 480,
          settings: {
            arrows: false,
            slidesToShow: 1
          }
        }
      ]
   
    {% elif module.display_mode == "center_mode" %}
 
      centerMode: true,
      centerPadding: '{{ module.center_padding_desktop }}px',
      slidesToShow: {{ module.center_slide_to_show }},
      responsive: [
        {
          breakpoint: 1200,
          settings: {
            centerPadding: '{{ module.center_padding_ipad }}px'
          }
        },
        {
            breakpoint: 768,
            settings: {
              centerMode: false,
              centerPadding: '0px'
            }
          }
        ]
 
    {% endif%}
  });
</script>
{% endif %}
</div>