Shopify Instagram Slider – Showcase Your Social Presence

                    <!-- 
========================================
Section Name: Instagram Slider
Tech Stack: Liquid, HTML, CSS, JavaScript
What This Section Does: 
- Displays an interactive Instagram slider with profile images, post previews, and captions.
- Includes customizable title, subtitle, and colors for seamless branding.
- Fully responsive design with Swiper.js for smooth navigation and scalability.

Promotion: 
Enhance your Shopify store's social engagement with a sleek Instagram slider. Showcase your latest posts and connect with your audience. Get it now at [PrebuiltTemplates](https://prebuilttemplates.com/).
========================================
-->
<section class="custom-instagram-section" style="background-color: {{ section.settings.background_color }}; padding: {{ section.settings.padding_top }}px 0 {{ section.settings.padding_bottom }}px;">
  <div class="instagram-container page-width">
    <!-- Section Title and Subtitle -->
    <div class="instagram-header">
      <p class="instagram-subtitle" style="color: {{ section.settings.subtitle_color }};">{{ section.settings.subtitle }}</p>
      <h2 class="instagram-title" style="color: {{ section.settings.title_color }};">{{ section.settings.title }}</h2>
    </div>

    <!-- Swiper Slider -->
    <div class="swiper instagram-slider">
      <div class="swiper-wrapper">
        {% for block in section.blocks %}
        <div class="swiper-slide instagram-post">
          <!-- Profile Information -->
          <div class="profile-info">                 
            {% if block.settings.profile_image != blank %}
            <img src="{{ block.settings.profile_image | img_url: '50x50' }}" alt="{{ block.settings.name }}" class="profile-img" />
            {% endif %}              
            <div class="profile-text">
              <p class="profile-name" style="color: {{ block.settings.name_color }};">{{ block.settings.name }}</p>
              <p class="profile-username" style="color: {{ block.settings.username_color }};">{{ block.settings.username }}</p>
            </div>
          </div>

          <!-- Post Image -->
          {% if block.settings.post_image != blank %}
          <div class="post-image">
                 <a href="{{ block.settings.instaid }}">
            <img src="{{ block.settings.post_image | img_url: 'master' }}" alt="{{ block.settings.name }}" />
                 </a>
          </div>
          {% endif %}

          <!-- Post Text -->
          <p class="post-text" style="color: {{ block.settings.text_color }};">{{ block.settings.text }}</p>
        </div>
        {% endfor %}
      </div>

      <!-- Slider Navigation -->
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
    </div>
  </div>
</section>

<!-- Swiper.js CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const swiper = new Swiper(".instagram-slider", {
      slidesPerView: 1,
      spaceBetween: 20,
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      breakpoints: {
        768: {
          slidesPerView: 2,
        },
        1024: {
          slidesPerView: 4,
        },
        1280: {
          slidesPerView: 4,
        },
      },
    });
  });
</script>

<style>
.custom-instagram-section {
  width: 100%;
}


.instagram-header {
  text-align: center;
  margin-bottom: 30px;
}

.instagram-subtitle {
    font-size: 3rem;
    font-weight: bold;
    margin: 0;
}
.instagram-title {
    font-size: 2rem;
    font-weight: bold;
    margin: 0;
}
.post-image {
    overflow: hidden;
}
.post-image img:hover {
    transform: scale(1.1);
}
.profile-info {
    display: flex;
    align-items: center;
    padding: 10px 0;
}

.profile-img {
    width: 50px;
    object-fit: cover;
    height: 50px;
    object-position: center;
    border-radius: 50%;
}
  .post-text {
    letter-spacing: 0;
    line-height: 1.4;
}
.profile-text {
  margin-left: 10px;
}

.profile-name {
  font-size: 1rem;
}
.post-text {
    margin: 0;
}
  p.profile-name {
    font-size: 14px;
}
.profile-username {
  font-size: .9rem;
}
.profile-text p {
    margin: 0;
  color:#000;
}
.post-image img {
    transition: all 0.3s ease;
    width: 100%;
}

.post-text {
}
</style>

{% schema %}
{
  "name": "Instagram Slider",
  "settings": [
    {
      "type": "color",
      "id": "background_color",
      "label": "Background Color"
    },
    {
      "type": "range",
      "id": "padding_top",
      "label": "Padding Top",
      "min": 0,
      "max": 200,
      "step": 2,
      "default": 50
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "label": "Padding Bottom",
      "min": 0,
      "max": 200,
      "step": 2,
      "default": 50
    },
    {
      "type": "color",
      "id": "title_color",
      "label": "Title Color"
    },
    {
      "type": "text",
      "id": "title",
      "label": "Title",
      "default": "Follow Us on Instagram"
    },
    {
      "type": "color",
      "id": "subtitle_color",
      "label": "Subtitle Color"
    },
    {
      "type": "text",
      "id": "subtitle",
      "label": "Subtitle",
      "default": "Stay connected with our latest updates"
    }
  ],
  "blocks": [
    {
      "type": "post",
      "name": "Instagram Post",
      "settings": [
        {
          "type": "url",
          "id": "instaid",
          "label": "Instapost Url"
        },
        {
          "type": "image_picker",
          "id": "profile_image",
          "label": "Profile Image"
        },
        {
          "type": "text",
          "id": "name",
          "label": "Profile Name",
          "default": "John Doe"
        },
        {
          "type": "color",
          "id": "name_color",
          "label": "Profile Name Color"
        },
        {
          "type": "text",
          "id": "username",
          "label": "Username",
          "default": "@johndoe"
        },
        {
          "type": "color",
          "id": "username_color",
          "label": "Username Color"
        },
        {
          "type": "image_picker",
          "id": "post_image",
          "label": "Post Image"
        },
        {
          "type": "text",
          "id": "text",
          "label": "Post Text",
          "default": "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
        },
        {
          "type": "color",
          "id": "text_color",
          "label": "Post Text Color"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Instagram Slider",
      "category": "Social Media"
    }
  ]
}
{% endschema %}