Shopify Image Slider Banner – Dynamic Travel Showcase

                    <!-- 
========================================
Section Name: Image Slider Banner
Tech Stack: Liquid, HTML, CSS, JavaScript
What This Section Does: 
- Displays a dynamic image slider with customizable background images and text content.
- Features smooth transitions with animated text effects for titles, descriptions, and buttons.
- Includes navigation controls with customizable colors and hover effects.
- Supports autoplay functionality with adjustable timing and pause-on-hover options.

Promotion: 
Enhance your Shopify store with an eye-catching image slider banner. Perfect for showcasing travel destinations, featured products, or seasonal promotions. Get it now at [PrebuiltTemplates](https://prebuilttemplates.com/).
========================================
-->
{% comment %}
  Image Slider Banner Section
  A fully customizable image slider with dynamic slides and controls
{% endcomment %}

<div class="image-slider-container">
  <div id="slider-container" class="container">
    <div id="slide" class="slide">
      {% for block in section.blocks %}
        {% if block.type == 'slide' %}
          <div class="item{% if forloop.first %} active{% endif %}" {{ block.shopify_attributes }} style="background-image: url('{{ block.settings.image | img_url: 'master' }}');">
            <div class="content">
              <div class="name">{{ block.settings.title }}</div>
              <div class="description">{{ block.settings.description }}</div>
              {% if block.settings.button_label != blank %}
                <a href="{{ block.settings.button_link }}">
                  <button>{{ block.settings.button_label }}</button>
                </a>
              {% endif %}
            </div>
          </div>
        {% endif %}
      {% endfor %}
    </div>

    <div class="button-slider">
      <button class="prev"><svg fill="#000000" height="200px" width="200px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 330 330" xml:space="preserve" transform="matrix(-1, 0, 0, 1, 0, 0)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path id="XMLID_222_" d="M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001 c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213 C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606 C255,161.018,253.42,157.202,250.606,154.389z"></path> </g></svg></button>
      <button class="next"><svg fill="#000000" height="200px" width="200px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 330 330" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path id="XMLID_222_" d="M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001 c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213 C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606 C255,161.018,253.42,157.202,250.606,154.389z"></path> </g></svg></button>
    </div>
  </div>
</div>

{% style %}
.image-slider-container {
  position: relative;
  width: 100%;
  height: {{ section.settings.slider_height }}px;
  overflow: hidden;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: {{ section.settings.background_color }};
  box-shadow: 0 30px 50px {{ section.settings.shadow_color }};
}
  .button-slider button {
    border: 0;
    display: flex;
    cursor:pointer;
    border-radius: 50%;
    width: 50px;
    align-items: center;
    justify-content: center;
    height: 50px;
}
.button-slider {
    display: flex;
    padding-left: 10rem;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    gap: 10px;
    padding-bottom: 10rem;
}
.button-slider svg {
    width: 18px;
    height: 18px;
}
.container .slide .item {
  width: 200px;
  height: 300px;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  border-radius: 20px;
  box-shadow: 0 30px 50px #505050;
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
  display: inline-block;
  transition: .5s;
}

.slide .item:nth-child(1),
.slide .item:nth-child(2) {
  top: 0;
  left: 0;
  transform: translate(0, 0);
  border-radius: 0;
  width: 100%;
  height: 100%;
}

.slide .item:nth-child(2) .content {
  display: block;
}

.slide .item:nth-child(3) {
  left: 50%;
}

.slide .item:nth-child(4) {
  left: calc(50% + 220px);
}

.slide .item:nth-child(5) {
  left: calc(50% + 440px);
}

.slide .item:nth-child(n + 6) {
  left: calc(50% + 440px);
  overflow: hidden;
}

.item .content {
  position: absolute;
  top: 50%;
  left: 100px;
  width: 300px;
  text-align: left;
  color: {{ section.settings.text_color }};
  transform: translate(0, -50%);
  display: none;
}

.content .name {
  font-size: {{ section.settings.title_size }}px;
  text-transform: uppercase;
  font-weight: bold;
  opacity: 0;
  animation: animate 1s ease-in-out 1 forwards;
}

.content .description {
  margin-top: 10px;
  margin-bottom: 20px;
  opacity: 0;
  animation: animate 1s ease-in-out .3s 1 forwards;
}

.content button {
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  opacity: 0;
  background-color: {{ section.settings.button_bg_color }};
  color: {{ section.settings.button_text_color }};
  animation: animate 1s ease-in-out .6s 1 forwards;
}

@keyframes animate {
  from {
    opacity: 0;
    transform: translate(0, 100px);
    filter: blur(33px);
  }

  to {
    opacity: 1;
    transform: translate(0);
    filter: blur(0);
  }
}

.button {
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 20px;
  z-index: 10;
}

.button button {
  width: 40px;
  height: 35px;
  border-radius: 8px;
  border: 1px solid {{ section.settings.nav_border_color }};
  cursor: pointer;
  margin: 0 5px;
  background-color: {{ section.settings.nav_bg_color }};
  color: {{ section.settings.nav_text_color }};
  transition: .3s;
}

.button button:hover {
  background: {{ section.settings.nav_hover_bg }};
  color: {{ section.settings.nav_hover_text }};
}

@media (max-width: 768px) {
  .image-slider-container {
    height: {{ section.settings.mobile_height }}px;
  }
  
  .item .content {
    left: 50px;
    width: 70%;
  }
  
  .content .name {
    font-size: {{ section.settings.mobile_title_size }}px;
  }
}
  @media(max-width:500px){

   body .slide .item:nth-child(3) {
    left: 64%;
}
  }
{% endstyle %}

<script>
document.addEventListener('DOMContentLoaded', function() {
  const next = document.querySelector('.next');
  const prev = document.querySelector('.prev');
  const slide = document.querySelector('.slide');
  
  if (!slide || !next || !prev) return;
  
  next.addEventListener('click', function() {
    const items = document.querySelectorAll('.item');
    slide.appendChild(items[0]);
  });
  
  prev.addEventListener('click', function() {
    const items = document.querySelectorAll('.item');
    slide.prepend(items[items.length - 1]);
  });
  
  {% if section.settings.autoplay %}
    // Autoplay functionality
    let autoplayInterval = setInterval(function() {
      const items = document.querySelectorAll('.item');
      slide.appendChild(items[0]);
    }, {{ section.settings.autoplay_speed | times: 1000 }});
    
    {% if section.settings.pause_on_hover %}
      // Pause on hover
      slide.addEventListener('mouseenter', function() {
        clearInterval(autoplayInterval);
      });
      
      slide.addEventListener('mouseleave', function() {
        autoplayInterval = setInterval(function() {
          const items = document.querySelectorAll('.item');
          slide.appendChild(items[0]);
        }, {{ section.settings.autoplay_speed | times: 1000 }});
      });
    {% endif %}
  {% endif %}
});
</script>

{% schema %}
{
  "name": "Image Slider Banner",
  "settings": [
    {
      "type": "header",
      "content": "Layout Settings"
    },
    {
      "type": "range",
      "id": "slider_height",
      "min": 400,
      "max": 800,
      "step": 10,
      "unit": "px",
      "label": "Slider Height",
      "default": 600
    },
    {
      "type": "range",
      "id": "mobile_height",
      "min": 300,
      "max": 600,
      "step": 10,
      "unit": "px",
      "label": "Mobile Slider Height",
      "default": 500
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "Background Color",
      "default": "#f5f5f5"
    },
    {
      "type": "color",
      "id": "shadow_color",
      "label": "Shadow Color",
      "default": "#dbdbdb"
    },
    {
      "type": "header",
      "content": "Text Settings"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text Color",
      "default": "#ffffff"
    },
    {
      "type": "range",
      "id": "title_size",
      "min": 24,
      "max": 60,
      "step": 2,
      "unit": "px",
      "label": "Title Size",
      "default": 40
    },
    {
      "type": "range",
      "id": "mobile_title_size",
      "min": 18,
      "max": 40,
      "step": 2,
      "unit": "px",
      "label": "Mobile Title Size",
      "default": 28
    },
    {
      "type": "header",
      "content": "Button Settings"
    },
    {
      "type": "color",
      "id": "button_bg_color",
      "label": "Button Background",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "button_text_color",
      "label": "Button Text Color",
      "default": "#000000"
    },
    {
      "type": "header",
      "content": "Navigation Controls"
    },
    {
      "type": "color",
      "id": "nav_bg_color",
      "label": "Navigation Background",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "nav_text_color",
      "label": "Navigation Icon Color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "nav_border_color",
      "label": "Navigation Border Color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "nav_hover_bg",
      "label": "Navigation Hover Background",
      "default": "#ababab"
    },
    {
      "type": "color",
      "id": "nav_hover_text",
      "label": "Navigation Hover Text",
      "default": "#ffffff"
    },
    {
      "type": "header",
      "content": "Autoplay Settings"
    },
    {
      "type": "checkbox",
      "id": "autoplay",
      "label": "Enable Autoplay",
      "default": true
    },
    {
      "type": "range",
      "id": "autoplay_speed",
      "min": 3,
      "max": 10,
      "step": 1,
      "unit": "sec",
      "label": "Change Slides Every",
      "default": 5
    },
    {
      "type": "checkbox",
      "id": "pause_on_hover",
      "label": "Pause on Hover",
      "default": true
    }
  ],
  "blocks": [
    {
      "type": "slide",
      "name": "Slide",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Background Image"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Title",
          "default": "Destination Name"
        },
        {
          "type": "textarea",
          "id": "description",
          "label": "Description",
          "default": "Write a brief description about this destination"
        },
        {
          "type": "text",
          "id": "button_label",
          "label": "Button Text",
          "default": "See More"
        },
        {
          "type": "url",
          "id": "button_link",
          "label": "Button Link"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Image Slider Banner",
      "category": "Image",
      "blocks": [
        {
          "type": "slide",
          "settings": {
            "title": "Switzerland",
            "description": "Renowned for its breathtaking Alpine scenery and precision in craftsmanship"
          }
        },
        {
          "type": "slide",
          "settings": {
            "title": "Finland",
            "description": "Known for its saunas, lakes, and a deep connection to nature"
          }
        },
        {
          "type": "slide",
          "settings": {
            "title": "Iceland",
            "description": "Famous for its stunning geothermal landscapes, waterfalls, and glaciers"
          }
        }
      ]
    }
  ]
}
{% endschema %}