Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- {% assign text_color = section.settings.text_color %}
- {% assign overlay = section.settings.opacity | times: 0.01 %}
- <div id="sliderContainer" class="slider-container" style="color:{{ text_color }};">
- {% for block in section.blocks %}
- <div class="hero-slide" style="background-image:url({{ block.settings.slide_bg | img_url: 'original' }});">
- <div class="page-width hero-slide-content">
- <h2>{{ block.settings.main_title }}</h2>
- <p style="color:{{ text_color }};">{{ block.settings.sub_title }}</p>
- <a style="color:{{ text_color }};border-color:{{ text_color }};" href="{{ block.settings.slide_url}}">{{ block.settings.slide_url_text }}</a>
- </div>
- </div>
- {% endfor %}
- {% if section.settings.slide_controls == true %}
- <div id="sliderControls" class="slider-controls">
- <span id="slideCurrent"></span> / <span id="slideTotal"></span>
- <span id="prev" class="slider-button prev">
- <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>
- </span>
- <span id="next" class="slider-button next">
- <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>
- </span>
- </div>
- {% endif %}
- </div>
- <style>
- .hero-slide:after {
- opacity: {{ overlay }};
- }
- </style>
- {% schema %}
- {
- "name": "Full Height Hero Slider",
- "settings": [
- {
- "type": "range",
- "id": "opacity",
- "label": "Select Hero Overlay Opacity",
- "min": 0,
- "max": 100,
- "step": 1,
- "unit": "%",
- "default": 20
- },
- {
- "type": "color",
- "id": "text_color",
- "label": "Choose text color",
- "default": "#ffffff"
- },
- {
- "type": "checkbox",
- "id": "slide_controls",
- "label": "Show slide controls and count",
- "default": true
- }
- ],
- "blocks": [
- {
- "type": "select",
- "name": "Slide",
- "settings": [
- {
- "type": "image_picker",
- "id": "slide_bg",
- "label": "Slide Background"
- },
- {
- "type": "text",
- "id": "main_title",
- "label": "Slide Title"
- },
- {
- "type": "text",
- "id": "sub_title",
- "label": "Slide Subtitle"
- },
- {
- "type": "url",
- "id": "slide_url",
- "label": "Slide URL"
- },
- {
- "type": "text",
- "id": "slide_url_text",
- "label": "Slide Button Text"
- }
- ]
- }
- ],
- "presets": [
- {
- "name": "Full Height Hero Slider",
- "category": "Slider",
- "blocks": [
- {
- "type": "select"
- }
- ]
- }
- ]
- }
- {% endschema %}
- {% stylesheet 'scss' %}
- .slider-container {
- position: relative;
- height: 100vh;
- }
- .hero-slide {
- width: 100%;
- height: 100vh;
- background-size: cover;
- background-repeat: no-repeat;
- background-position: 60% 50%;
- position: absolute;
- opacity: 0;
- visibility: hidden;
- z-index: 1;
- transition: opacity 200ms ease-in;
- }
- .hero-slide:after {
- content: '';
- position: absolute;
- top:0;
- left: 0;
- width: 100%;
- height: 100%;
- background-color: #000;
- z-index: 3;
- }
- .slide-active {
- opacity: 1;
- visibility: visible;
- }
- .hero-slide-content {
- position: absolute;
- top: 50%;
- transform: translateY(-50%);
- z-index: 5;
- h2{
- font-size: 110px;
- font-weight: 700;
- line-height: 0.85em;
- text-transform: uppercase;
- max-width: 1000px;
- @media(max-width:1024px){
- font-size: 64px;
- line-height: 0.9em;
- }
- @media(max-width:767px){
- font-size: 60px;
- }
- @media(max-width:480px){
- font-size: 50px;
- }
- }
- p {
- font-size: 16px;
- line-height: 1.4em;
- max-width: 510px;
- padding-left: 12px;
- @media(max-width:1024px){
- padding: 0;
- font-size: 13px;
- font-weight: 700;
- line-height: 1.4;
- }
- @media(max-width:767px){
- display: none;
- }
- }
- a {
- display: inline-block;
- font-size: 12px;
- border: 2px solid;
- padding: 15px 40px;
- margin-top: 30px;
- margin-left: 12px;
- @media(max-width:1024px){
- margin-left: 0;
- }
- }
- @media(max-width:1024px){
- left: 50%;
- transform:translate(-50%,-50%);
- text-align: center;
- }
- }
- .slider-controls {
- position: absolute;
- bottom: 27px;
- left: 30px;
- z-index: 5;
- opacity: 0.3;
- width: 200px;
- }
- .slider-button {
- display: inline-block;
- border: 1px solid;
- width: 45px;
- height: 45px;
- border-radius: 50%;
- padding: 12px;
- margin-left: 15px;
- cursor: pointer;
- opacity: 0.6;
- @media(max-width:767px){
- display: none;
- }
- }
- .slider__svg-button path.arrow {
- }
- .slider__svg-button {
- width: 14px;
- margin-left: 2px;
- }
- div.prev-btn {
- border-bottom: 1px solid #000000;
- border-left: 1px solid #000000;
- opacity: 0.3;
- }
- #slideCurrent {
- opacity: 0.9;
- }
- {% endstylesheet %}
- {% javascript %}
- // Hero slider
- $(document).ready(function(){
- let slideImages = $('.hero-slide');
- let current = 0;
- let interval = setInterval(function(){
- nextSlide();
- },5000);
- $('#sliderContainer').on('mouseenter', function(){
- clearInterval(interval);
- });
- // Clear All Images
- function reset(){
- for(let i = 0; i < slideImages.length; i++){
- slideImages[i].classList.remove('slide-active');
- }
- }
- function startSlide(){
- reset();
- slideImages[0].classList.add('slide-active');
- $('#slideCurrent').text(current + 1);
- }
- // Show Prev
- function slideLeft(){
- reset();
- slideImages[current - 1].classList.add('slide-active');
- current--;
- }
- // Left Arrow Click
- $('#prev').on('click', function(){
- if(current === 0){
- current=slideImages.length;
- }
- slideLeft()
- $('#slideCurrent').text(current + 1);
- })
- // Show Next
- function slideRight(){
- reset();
- slideImages[current + 1].classList.add('slide-active');
- current++;
- }
- function nextSlide(){
- if(current === slideImages.length -1){
- current=-1;
- }
- slideRight()
- $('#slideCurrent').text(current +1);
- }
- //Right Arrow Click
- $('#next').on('click', function(){
- nextSlide();
- })
- // Insert Total Slides
- $('#slideTotal').text(slideImages.length);
- startSlide();
- });
- {% endjavascript %}
Add Comment
Please, Sign In to add comment