Logo Carousel - Open in a new tab

[bhoule]

Hi all! Had a question about the logo carousel module that can be downloaded from the Marketplace. I'm trying to figure out how to have each externally linked slide, open in a new tab.

I'm still fresh to HUBL and tried a number of things without success. I'm confused as to where the html target="_blank" attribute could be placed — Or  what the HUBL equivalent of that is...?

Here's the HTML+HUBL for that module below.

{####################################
    HubSpot Logo Carousel Module 
#####################################
This module was provided as an easy
to implement option for users, and 
also serves as a simple example for 
developers to learn from & work with.
#-----------------------------------#}

{% if module.logos|map('image')|map('src')|join|length > 0 %}      {# << Only create slider if at least 1 image is added #}
    <div id="hs-logo-carousel_{{ name }}" class="hs-logo-carousel">
    {% for slide in module.logos %}
        <div>
              {{ "<a href='" ~ slide.page_url ~"'>" if slide.page_url }}
                <div class="hs-logo-carousel__inner">
                	<img data-lazy="{{ slide.image.src }}" alt="{{ slide.image.alt }}">
            		</div>
      				{{ "</a>" if slide.page_url }}
            </div>
    {% endfor %}
    </div>
{% endif %}

{% require_js %}
<script>
$(document).ready(function() {
  if ($.fn.slick) {
      buildSlider_{{ name }}();
  }
  else {
    $.getScript( "https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js", function() {
      $.when($.fn.slick).then(function() {
        buildSlider_{{ name }}();
      });
    });
  }

  function buildSlider_{{ name }}() {
    $('#hs-logo-carousel_{{ name }}').slick({                     {# << Slick slider settings go here #}
        dots: {{ module.settings.show_dots }},                    {# More info: http://kenwheeler.github.io/slick/ #}
        arrows: {{ module.settings.show_arrows }},
        autoplay: {{ module.settings.autoplay }},
        infinite: true,
        speed: {{ module.settings.scroll_speed }},
        slidesToShow: {{ module.settings.logos_to_show }},
        slidesToScroll: {{ module.settings.logos_to_show }},
        responsive: [{
          breakpoint: 480,
          settings: {
            slidesToShow: 1,
            slidesToScroll: 1
          }
    		}]
    });  
  }
});
</script>
{% end_require_js %}
{% require_css %}
<style>
  .hs-logo-carousel__inner {
   padding: 0 {{ module.settings.padding / 2 }}px;
  }
</style>
{% end_require_css %}

[Simon_Goldie · Accepted solution]

This section of code is your A tag.

{{ "<a href='" ~ slide.page_url ~"'>" if slide.page_url }}

 simply amend to:

{{ "<a href='" ~ slide.page_url ~"' target='_blank'>" if slide.page_url }}

[bhoule]

That was extremely simple and I feel silly now haha. Thank you Simon, appreciate it!