Guest User

Untitled

a guest
May 21st, 2018
84
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.32 KB | None | 0 0
  1. {% assign text_color = section.settings.text_color %}
  2. {% assign overlay = section.settings.opacity | times: 0.01 %}
  3.  
  4. <div id="sliderContainer" class="slider-container" style="color:{{ text_color }};">
  5. {% for block in section.blocks %}
  6. <div class="hero-slide" style="background-image:url({{ block.settings.slide_bg | img_url: 'original' }});">
  7. <div class="page-width hero-slide-content">
  8. <h2>{{ block.settings.main_title }}</h2>
  9. <p style="color:{{ text_color }};">{{ block.settings.sub_title }}</p>
  10. <a style="color:{{ text_color }};border-color:{{ text_color }};" href="{{ block.settings.slide_url}}">{{ block.settings.slide_url_text }}</a>
  11. </div>
  12. </div>
  13. {% endfor %}
  14. {% if section.settings.slide_controls == true %}
  15. <div id="sliderControls" class="slider-controls">
  16. <span id="slideCurrent"></span> / <span id="slideTotal"></span>
  17. <span id="prev" class="slider-button prev">
  18. <svg class="slider__svg-button prev" viewBox="0 0 100 100"><path style="fill:{{text_color}};" d="M 10,50 L 60,100 L 70,90 L 30,50 L 70,10 L 60,0 Z" class="arrow"></path></svg>
  19. </span>
  20. <span id="next" class="slider-button next">
  21. <svg class="slider__svg-button next" viewBox="0 0 100 100"><path style="fill:{{text_color}};" d="M 10,50 L 60,100 L 70,90 L 30,50 L 70,10 L 60,0 Z" class="arrow" transform="translate(100, 100) rotate(180) "></path></svg>
  22. </span>
  23. </div>
  24. {% endif %}
  25. </div>
  26.  
  27. <style>
  28. .hero-slide:after {
  29. opacity: {{ overlay }};
  30. }
  31. </style>
  32.  
  33. {% schema %}
  34. {
  35. "name": "Full Height Hero Slider",
  36. "settings": [
  37. {
  38. "type": "range",
  39. "id": "opacity",
  40. "label": "Select Hero Overlay Opacity",
  41. "min": 0,
  42. "max": 100,
  43. "step": 1,
  44. "unit": "%",
  45. "default": 20
  46. },
  47. {
  48. "type": "color",
  49. "id": "text_color",
  50. "label": "Choose text color",
  51. "default": "#ffffff"
  52. },
  53. {
  54. "type": "checkbox",
  55. "id": "slide_controls",
  56. "label": "Show slide controls and count",
  57. "default": true
  58. }
  59. ],
  60. "blocks": [
  61. {
  62. "type": "select",
  63. "name": "Slide",
  64. "settings": [
  65. {
  66. "type": "image_picker",
  67. "id": "slide_bg",
  68. "label": "Slide Background"
  69. },
  70. {
  71. "type": "text",
  72. "id": "main_title",
  73. "label": "Slide Title"
  74. },
  75. {
  76. "type": "text",
  77. "id": "sub_title",
  78. "label": "Slide Subtitle"
  79. },
  80. {
  81. "type": "url",
  82. "id": "slide_url",
  83. "label": "Slide URL"
  84. },
  85. {
  86. "type": "text",
  87. "id": "slide_url_text",
  88. "label": "Slide Button Text"
  89. }
  90. ]
  91. }
  92. ],
  93. "presets": [
  94. {
  95. "name": "Full Height Hero Slider",
  96. "category": "Slider",
  97. "blocks": [
  98. {
  99. "type": "select"
  100. }
  101. ]
  102. }
  103. ]
  104. }
  105. {% endschema %}
  106.  
  107. {% stylesheet 'scss' %}
  108. .slider-container {
  109. position: relative;
  110. height: 100vh;
  111. }
  112. .hero-slide {
  113. width: 100%;
  114. height: 100vh;
  115. background-size: cover;
  116. background-repeat: no-repeat;
  117. background-position: 60% 50%;
  118. position: absolute;
  119. opacity: 0;
  120. visibility: hidden;
  121. z-index: 1;
  122. transition: opacity 200ms ease-in;
  123. }
  124.  
  125. .hero-slide:after {
  126. content: '';
  127. position: absolute;
  128. top:0;
  129. left: 0;
  130. width: 100%;
  131. height: 100%;
  132. background-color: #000;
  133. z-index: 3;
  134. }
  135.  
  136. .slide-active {
  137. opacity: 1;
  138. visibility: visible;
  139. }
  140.  
  141. .hero-slide-content {
  142. position: absolute;
  143. top: 50%;
  144. transform: translateY(-50%);
  145. z-index: 5;
  146. h2{
  147. font-size: 110px;
  148. font-weight: 700;
  149. line-height: 0.85em;
  150. text-transform: uppercase;
  151. max-width: 1000px;
  152. @media(max-width:1024px){
  153. font-size: 64px;
  154. line-height: 0.9em;
  155. }
  156. @media(max-width:767px){
  157. font-size: 60px;
  158. }
  159. @media(max-width:480px){
  160. font-size: 50px;
  161. }
  162. }
  163. p {
  164. font-size: 16px;
  165. line-height: 1.4em;
  166. max-width: 510px;
  167. padding-left: 12px;
  168. @media(max-width:1024px){
  169. padding: 0;
  170. font-size: 13px;
  171. font-weight: 700;
  172. line-height: 1.4;
  173. }
  174. @media(max-width:767px){
  175. display: none;
  176. }
  177. }
  178. a {
  179. display: inline-block;
  180. font-size: 12px;
  181. border: 2px solid;
  182. padding: 15px 40px;
  183. margin-top: 30px;
  184. margin-left: 12px;
  185. @media(max-width:1024px){
  186. margin-left: 0;
  187. }
  188. }
  189. @media(max-width:1024px){
  190. left: 50%;
  191. transform:translate(-50%,-50%);
  192. text-align: center;
  193. }
  194. }
  195.  
  196. .slider-controls {
  197. position: absolute;
  198. bottom: 27px;
  199. left: 30px;
  200. z-index: 5;
  201. opacity: 0.3;
  202. width: 200px;
  203. }
  204.  
  205. .slider-button {
  206. display: inline-block;
  207. border: 1px solid;
  208. width: 45px;
  209. height: 45px;
  210. border-radius: 50%;
  211. padding: 12px;
  212. margin-left: 15px;
  213. cursor: pointer;
  214. opacity: 0.6;
  215. @media(max-width:767px){
  216. display: none;
  217. }
  218. }
  219.  
  220. .slider__svg-button path.arrow {
  221.  
  222. }
  223.  
  224. .slider__svg-button {
  225. width: 14px;
  226. margin-left: 2px;
  227. }
  228.  
  229. div.prev-btn {
  230. border-bottom: 1px solid #000000;
  231. border-left: 1px solid #000000;
  232. opacity: 0.3;
  233. }
  234. #slideCurrent {
  235. opacity: 0.9;
  236. }
  237. {% endstylesheet %}
  238.  
  239. {% javascript %}
  240. // Hero slider
  241. $(document).ready(function(){
  242. let slideImages = $('.hero-slide');
  243. let current = 0;
  244. let interval = setInterval(function(){
  245. nextSlide();
  246. },5000);
  247.  
  248.  
  249. $('#sliderContainer').on('mouseenter', function(){
  250. clearInterval(interval);
  251. });
  252.  
  253.  
  254. // Clear All Images
  255. function reset(){
  256. for(let i = 0; i < slideImages.length; i++){
  257. slideImages[i].classList.remove('slide-active');
  258. }
  259. }
  260.  
  261. function startSlide(){
  262. reset();
  263. slideImages[0].classList.add('slide-active');
  264. $('#slideCurrent').text(current + 1);
  265. }
  266.  
  267. // Show Prev
  268. function slideLeft(){
  269. reset();
  270. slideImages[current - 1].classList.add('slide-active');
  271. current--;
  272. }
  273.  
  274. // Left Arrow Click
  275. $('#prev').on('click', function(){
  276. if(current === 0){
  277. current=slideImages.length;
  278. }
  279. slideLeft()
  280. $('#slideCurrent').text(current + 1);
  281. })
  282.  
  283. // Show Next
  284. function slideRight(){
  285. reset();
  286. slideImages[current + 1].classList.add('slide-active');
  287. current++;
  288. }
  289.  
  290. function nextSlide(){
  291. if(current === slideImages.length -1){
  292. current=-1;
  293. }
  294. slideRight()
  295. $('#slideCurrent').text(current +1);
  296. }
  297.  
  298. //Right Arrow Click
  299. $('#next').on('click', function(){
  300. nextSlide();
  301. })
  302.  
  303. // Insert Total Slides
  304. $('#slideTotal').text(slideImages.length);
  305.  
  306. startSlide();
  307. });
  308. {% endjavascript %}
Add Comment
Please, Sign In to add comment