__banner_list.liquid 4.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. <!-- REVOLUTION SLIDER -->
  2. <div id="rev_slider_1_wrapper" class="rev_slider_wrapper fullwidthbanner-container" data-alias="image-hero39" data-source="gallery">
  3. <!-- START REVOLUTION SLIDER 5.3.0.2 fullwidth mode -->
  4. <div id="rev_slider_1" class="rev_slider fullwidthabanner" style="display:none;" data-version="5.3.0.2" >
  5. <ul>
  6. {% for item in banners %}
  7. <li data-index="rs-{{ forloop.index }}" data-transition="slidevertical" data-slotamount="1" data-hideafterloop="0" data-hideslideonmobile="off" data-easein="default" data-easeout="default" data-masterspeed="1500" data-thumb="../../images/slider/concept-1-100x50.jpg" data-rotate="0" data-fstransition="fade" data-fsmasterspeed="1500" data-fsslotamount="7" data-saveperformance="off" data-title="{{ item.title }}" data-param1="" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-param10="" data-description="">
  8. <!-- MAIN IMAGE -->
  9. <a href="{{ item.banner_url }}">
  10. {% assign image_url = item.image_url %}
  11. {% if image_url contains 'http' %}
  12. <img src="{{ image_url }}" alt="" data-bgposition="top center" data-bgfit="cover" data-bgrepeat="no-repeat" class="rev-slidebg" data-no-retina>
  13. {% else %}
  14. <img src="{{ site.image_base_url }}{{ image_url }}" alt="" data-bgposition="top center" data-bgfit="cover" data-bgrepeat="no-repeat" class="rev-slidebg" data-no-retina>
  15. {% endif %}
  16. </a>
  17. <!-- LAYER NR. 2 -->
  18. <div class="tp-caption title--style-1 c-white tp-resizeme" id="slide-2-layer-2"
  19. data-x="['right','right','right','right']" data-hoffset="['0','0','50','50']"
  20. data-y="['middle','middle','middle','middle']" data-voffset="['0','0','0','0']"
  21. data-fontsize="['16','16','16','16']"
  22. data-lineheight="['16','16','16','16']"
  23. data-width="[300, 300, 300, 300]"
  24. data-height="none"
  25. data-whitespace="nowrap"
  26. data-type="text"
  27. data-responsive_offset="on"
  28. data-frames='[{"from":"x:-50px;opacity:0;","speed":1000,"to":"o:1;","delay":500,"ease":"Power2.easeOut"},{"delay":"wait","speed":1500,"to":"opacity:0;","ease":"Power4.easeIn"}]'
  29. data-textAlign="['left','left','left','left']"
  30. data-paddingtop="[0,0,0,0]"
  31. data-paddingright="[0,0,0,0]"
  32. data-paddingbottom="[0,0,0,0]"
  33. data-paddingleft="[0,0,0,0]"
  34. style="z-index: 11; white-space: nowrap;text-transform:left;">
  35. <span class="text-uppercase strong-400"> {{ item.subtitle }}</span>
  36. </div>
  37. <div class="tp-caption title--style-1 c-white tp-resizeme" id="slide-1-layer-3"
  38. data-x="['right','right','right','right']" data-hoffset="['0','0','50','50']"
  39. data-y="['middle','middle','middle','middle']" data-voffset="['70','70','70','70']"
  40. data-fontsize="['40','40','40','40']"
  41. data-lineheight="['50','40','40','40']"
  42. data-width="[300, 300, 300, 300]"
  43. data-height="none"
  44. data-whitespace="nowrap"
  45. data-type="text"
  46. data-responsive_offset="on"
  47. data-frames='[{"from":"x:-50px;opacity:0;","speed":1000,"to":"o:1;","delay":1000,"ease":"Power2.easeOut"},{"delay":"wait","speed":1500,"to":"opacity:0;","ease":"Power4.easeIn"}]'
  48. data-textAlign="['left','left','left','left']"
  49. data-paddingtop="[0,0,0,0]"
  50. data-paddingright="[0,0,0,0]"
  51. data-paddingbottom="[0,0,0,0]"
  52. data-paddingleft="[0,0,0,0]"
  53. style="z-index: 11; white-space: nowrap;text-transform:left;">
  54. <span class="strong-600">
  55. {{ item.title }}
  56. </span>
  57. </div>
  58. </li>
  59. {% endfor %}
  60. </ul>
  61. <div class="tp-bannertimer tp-bottom" style="visibility: hidden !important;"></div>
  62. </div>
  63. </div><!-- END REVOLUTION SLIDER -->