first commit

plugins/stSlideBannerPlugin/modules/stSlideBannerFrontend/templates/theme/fashionrwd/slide_banner_show.html

@@ -0,0 +1,160 @@
+<div id="slide-carousel-{$group_name}" class="homepage-carousel">
+  <div class="swiper-container">
+    {if $count > 1}
+    <a class="arrow-left {$group_name}left" href="#"><span class="glyphicon glyphicon-chevron-left"></span></a>
+    <a class="arrow-right {$group_name}right" href="#"><span class="glyphicon glyphicon-chevron-right"></span></a>
+    {/if}
+    <div class="swiper-wrapper">
+      {foreach from=$banners item=banner name=slide}
+      <div class="swiper-slide">
+
+        {if $banner->getLink()}
+        {if $banner->hasAbsoluteLink()}
+        <a href="{$banner->getLink()}" target="_blank">
+          {else}
+          <a href="{$banner->getLink()}" target="_parent">
+            {/if}
+            {/if}
+            {if $banner->getImageSmall()}
+            {if $count > 1}
+            <img class="hidden-us img-responsive swiper-lazy" data-src="{st_asset_image_path image=$banner->getImagePath() type='thumb' for='slide'}" alt="" title="{$banner->getDescription()}" />
+            <img class="visible-us img-responsive swiper-lazy" data-src="{st_asset_image_path image=$banner->getImageSmallPath() type='thumb' for='slide_mobile'}" alt="" title="{$banner->getDescription()}" />
+            {else}
+            <img class="hidden-us img-responsive" src="{st_asset_image_path image=$banner->getImagePath() type='thumb' for='slide'}" alt="" title="{$banner->getDescription()}" />
+            <img class="visible-us img-responsive" src="{st_asset_image_path image=$banner->getImageSmallPath() type='thumb' for='slide_mobile'}" alt="" title="{$banner->getDescription()}" />
+            {/if}
+            {else}
+            {if $count > 1}
+            <img class="img-responsive swiper-lazy" data-src="{st_asset_image_path image=$banner->getImagePath() type='thumb' for='slide'}" alt="" title="{$banner->getDescription()}" />
+            {else}
+            <img class="img-responsive" src="{st_asset_image_path image=$banner->getImagePath() type='thumb' for='slide'}" alt="" title="{$banner->getDescription()}" />
+            {/if}
+            {/if}
+            {if $count > 1}<div class="swiper-lazy-preloader"></div>{/if}
+            {if $banner->getLink() != ''}
+          </a>
+          {/if}
+
+      </div>
+      {/foreach}
+    </div>
+    {if count > 1}
+    <div class="{$group_name}-pagination swiper-pagination"></div>
+    {/if}
+  </div>
+</div>
+
+{if $count > 1}
+{literal}
+<script type="text/javascript">
+  jQuery(function ($) {
+    $(document).ready(function () {
+
+      var count_banner = {/ literal
+    }{ $count }{ literal };
+
+    if ($.cookies.get('banner_index_{/literal}{$group_name}{literal}')) {
+      var slide_index = $.cookies.get('banner_index_{/literal}{$group_name}{literal}');
+
+      if (!Number.isInteger(slide_index) || slide_index > count_banner || slide_index < 0) {
+        var slide_index = 0;
+      }
+
+    } else {
+      var slide_index = 0;
+    }
+
+    var swiper = new Swiper('#slide-carousel-{/literal}{$group_name}{literal} .swiper-container', {
+      initialSlide: slide_index,
+      pagination: {
+        el: '.{/literal}{$group_name}{literal}-pagination',
+        type: 'bullets',
+        clickable: true,
+        bulletClass: 'swiper-pagination-switch',
+        bulletActiveClass: 'swiper-active-switch',
+      },
+      autoplay: {
+        delay: 10000,
+        disableOnInteraction: false,
+      },
+      preloadImages: false,
+      lazy: {
+        loadOnTransitionStart: true,
+      },
+      navigation: {
+        nextEl: '.{/literal}{$group_name}{literal}right',
+        prevEl: '.{/literal}{$group_name}{literal}left'
+      },
+      loop: true,
+      grabCursor: true,
+      speed: 700,
+      autoHeight: true,
+    });
+
+    swiper.on('slideChange', function () {
+
+      console.log('slide changed ' + this.realIndex);
+
+      //slide memory
+      var expires_at = new Date();
+      expires_at.setTime(expires_at.getTime() + 1000 * 30 * 24 * 60 * 60);
+
+      $.cookies.set('banner_index_{/literal}{$group_name}{literal}', this.realIndex, { path: '/', expiresAt: expires_at });
+    });
+
+  });
+    });
+</script>
+{/literal}
+{/if}
+
+
+{if $group_name == 'baner_2'}
+{literal}
+<script type="text/javascript">
+  function parallaxBaner2() {
+
+    var scrolled = $(window).scrollTop();
+    var baner2 = $('#slide-carousel-baner_2').offset().top;
+    var scrollBaner2 = scrolled - baner2;
+
+    $('#slide-carousel-baner_2').css('background-position', 'center ' + (scrollBaner2 * 0.5) + 'px');
+  }
+
+  $(document).ready(function () {
+    parallaxBaner2();
+    $(window).scroll(function () {
+      parallaxBaner2();
+    });
+    $(window).resize(function () {
+      parallaxBaner2();
+    });
+  });
+
+</script>
+{/literal}
+{elseif $group_name == ''}
+{literal}
+<script type="text/javascript">
+  function parallaxBaner1() {
+
+    var scrolled = $(window).scrollTop();
+    var baner1 = $('#slide-carousel-').offset().top;
+    var scrollBaner1 = scrolled - baner1;
+
+    $('#slide-carousel-').css('background-position', 'center ' + (scrollBaner1 * 0.5) + 'px');
+  }
+
+  $(document).ready(function () {
+    parallaxBaner1();
+    $(window).scroll(function () {
+      parallaxBaner1();
+    });
+    $(window).resize(function () {
+      parallaxBaner1();
+    });
+  });
+
+</script>
+{/literal}
+{/if}