<div {{#if blockCustomID}}id="{{{blockCustomID}}}"{{else}}id="skt-builder-logo-carousel-block-{{id}}"{{/if}} class="{{#if blockCustomClass}}{{{blockCustomClass}}} {{/if}}skt-builder-block-wrapper skt-builder-logo-carousel-block skt-builder-logo-carousel-block-{{id}}" style="background-color: {{blockBackgroundColor}}; background-image: url({{blockBgImageUrl}}); padding-bottom: {{blockPaddingBottom}}px; padding-top: {{blockPaddingTop}}px; {{#if blockParallaxEffect}}background-attachment: fixed;{{/if}}">
	<div class="skt-builder-block-inner skt-builder-block-inner-{{id}}" style="{{#if blockAnimation}}visibility: hidden;{{/if}}">
		<div class="skt-builder-container">
			{{#if blockTitle}}
				<div class="skt-builder-block-title">
					<h2 style="color: {{blockTitleColor}}; text-align: {{blockTitleAlign}};">{{blockTitle}}</h2>
				</div>
			{{/if}}
			{{#if blockDescription}}
                <div class="skt-builder-block-description">{{{blockDescription}}}</div>
            {{/if}}
			<style>
				.skt-builder-carousel.owl-carousel-{{id}} .owl-nav{font-size: {{carouselArrowSize}}px; text-align: {{carouselArrowPosition}};}
				.skt-builder-carousel.owl-carousel-{{id}} .owl-prev{color: {{carouselArrowColor}} !important; margin-right: {{carouselArrowGap}}px;}
				.skt-builder-carousel.owl-carousel-{{id}} .owl-next{color: {{carouselArrowColor}} !important;}
				.skt-builder-carousel.owl-carousel-{{id}} .owl-prev:hover, .skt-builder-carousel.owl-carousel-{{id}} .owl-next:hover{color: {{carouselArrowHoverColor}} !important;}
				.skt-builder-carousel.owl-carousel-{{id}} .owl-dots{text-align: {{carouselBulletsPosition}};}
				.skt-builder-carousel.owl-carousel-{{id}} .owl-dots .owl-dot{background-color: {{carouselBulletsBackgroundColor}}; border-color: {{carouselBulletsBorderColor}};}
				.skt-builder-carousel.owl-carousel-{{id}} .owl-dots .owl-dot.active{background-color: {{carouselBulletsActiveBackgroundColor}}; border-color: {{carouselBulletsActiveBorderColor}};}
			</style>
			<div class="skt-builder-carousel skt-builder-carousel-bullets-{{carouselBulletStyles}} owl-carousel-builder owl-carousel-{{id}}" {{#if carouselShowArrows}}style="padding-top: {{carouselArrowHeight}}px;"{{/if}}>
			{{#if blockColumns.length}}
				{{#each_with_sort blockColumns "order"}}
					<div class="item">
						{{#if columnContent}}
							{{#if columnLink}}<a href="{{columnLink}}" {{#if columnLinkTarget}}target="_blank"{{/if}}>{{/if}}
							<img src="{{columnContent}}">
							{{#if columnLink}}</a>{{/if}}
						{{/if}}
					</div>
				{{/each_with_sort}}
			{{/if}}
			</div>
		</div>
	</div>
</div>

{{#if blockAnimation}}
<script>
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery(window).scroll(function(){
    // This is then function used to detect if the element is scrolled into view
    function elementScrolled(elem)
    {
        var docViewTop = jQuery(window).scrollTop();
        var docViewBottom = docViewTop + jQuery(window).height();
        var elemTop = jQuery(elem).offset().top;
        return ((elemTop <= docViewBottom) && (elemTop >= docViewTop));
    }

	if (jQuery('.skt-builder-block-inner-{{id}}').length > 0) {
	if(elementScrolled('.skt-builder-block-inner-{{id}}')) {
        var els = jQuery('.skt-builder-block-inner-{{id}}'),
            i = 0,
            f = function () {
                jQuery(els[i++]).addClass('{{blockAnimationEffect}}');
                if(i < els.length) setTimeout(f, 400);
            };
        f();
    }}

});
});
</script>
{{/if}}
<script>
jQuery(document).ready(function() {
  jQuery('.owl-carousel-{{id}}').owlCarousel({
	margin: {{carouselItemsMargin}},
	autoplayTimeout: {{carouselAutoplayTime}},
	smartSpeed: {{carouselAutoplaySpeed}},
	{{#if carouselLoop}}
	loop: true,
	{{else}}
	loop: false,
	{{/if}}
	{{#if carouselAutoplay}}
	autoplay: true,
	{{else}}
	autoplay: false,
	{{/if}}
	{{#if carouselHoverPause}}
	autoplayHoverPause: true,
	{{else}}
	autoplayHoverPause: false,
	{{/if}}
	{{#if carouselShowArrows}}
	nav: true,
	{{else}}
	nav: false,
	{{/if}}
	{{#if carouselShowBullets}}
	dots: true,
	{{else}}
	dots: false,
	{{/if}}
	navText: ['<span class="fa {{carouselArrowStyles}}-left"></span>','<span class="fa {{carouselArrowStyles}}-right"></span>'],
	responsiveClass: true,
	responsive:{
        0:{
            items: {{carouselItemsMobile}},
        },
        600:{
            items: {{carouselItemsTablet}},
        },
        1000:{
            items: {{carouselItemsDesktop}},
        }
    }
  });
});
</script>