{if $customdevslider_slides|@count > 0}
  {assign var="titles" value=[]}
  {foreach from=$customdevslider_slides item=s}
    {$titles[] = ($s.title|default:'')|strip_tags}
  {/foreach}

  <div class="customdevslider-swiper"
       id="customdevslider-{$customdevslider_uid|escape:'htmlall':'UTF-8'}"
       data-titles='{$titles|@json_encode|escape:'htmlall':'UTF-8'}'>

    <div class="swiper customdevslider-swiper__container">
      <div class="swiper-wrapper">
        {foreach from=$customdevslider_slides item=s}
          <div class="swiper-slide customdevslider-swiper__slide">
            {if $s.link}
              <a class="customdevslider-swiper__link" href="{$s.link|escape:'htmlall':'UTF-8'}">
            {/if}

            {if $s.image_url}
              <img class="customdevslider-swiper__image"
                   src="{$s.image_url|escape:'htmlall':'UTF-8'}"
                   alt="{$s.title|escape:'htmlall':'UTF-8'}">
            {/if}

            {if $s.link}
              </a>
            {/if}

            <div class="customdevslider-swiper__slide-html" style="display:none;">
              {$s.text nofilter}
            </div>
          </div>
        {/foreach}
      </div>

      <div class="customdevslider-swiper__content">
        <div class="customdevslider-swiper__text"></div>
        <div class="swiper-pagination customdevslider-swiper__pagination"></div>
      </div>

    </div>
  </div>
{/if}