Shopify Liquid

How to Create a 3-Column Slider Section with Auto-Slide in Shopify

Write a Comment on How to Create a 3-Column Slider Section with Auto-Slide in Shopify

Here’s a complete solution for a responsive 3-column slider section where each column has its own independent auto-sliding carousel. This includes full schema settings for easy customization in the Shopify theme editor.

Step 1: Create the Section File

Create a new file called triple-column-slider.liquid in your theme’s sections directory and add this code:

            {%- style -%}
  .triple-column-slider {
    padding: {{ section.settings.section_padding }}px 0;
    background-color: {{ section.settings.background_color }};
  }

  .triple-column-slider__heading {
    text-align: center;
    margin-bottom: 30px;
    color: {{ section.settings.heading_color }};
  }

  .triple-column-slider__container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
  }

  .column-slider {
    width: calc(33.33% - 20px);
    position: relative;
    margin-bottom: 30px;
  }

  .column-slider__slides {
    position: relative;
    overflow: hidden;
    border-radius: {{ section.settings.slide_border_radius }}px;
    height: 400px; /* Fixed height for smooth transitions */
  }

  .column-slider__slide {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.6s ease;
    transform: translateX(100%);
  }

  .column-slider__slide.active {
    opacity: 1;
    transform: translateX(0);
    z-index: 1;
  }

  .column-slider__slide.prev {
    transform: translateX(-100%);
  }

  .column-slider__slide.next {
    transform: translateX(100%);
  }

  .column-slider__image-container {
    height: 100%;
    width: 100%;
    position: relative;
  }

  .column-slider__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .column-slider__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    background: rgba(0,0,0,0.5);
    color: white;
    transition: all 0.3s ease;
  }

  .column-slider__title {
    margin: 0 0 10px;
    color: {{ section.settings.text_color }};
    transition: transform 0.3s ease;
  }

  .column-slider__description {
    margin: 0 0 15px;
    color: {{ section.settings.text_color }};
    transition: transform 0.3s ease;
  }

  .column-slider__button {
    display: inline-block;
    padding: 8px 20px;
    background: {{ section.settings.button_color }};
    color: {{ section.settings.button_text_color }};
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
  }

  .column-slider__button:hover {
    background: {{ section.settings.button_hover_color }};
    transform: translateY(-2px);
  }

  .column-slider__dots {
    display: flex;
    justify-content: center;
    margin-top: 15px;
  }

  .column-slider__dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ccc;
    margin: 0 5px;
    cursor: pointer;
    transition: background 0.3s ease;
  }

  .column-slider__dot.active {
    background: {{ section.settings.button_color }};
  }

  @media (max-width: 768px) {
    .column-slider {
      width: 100%;
    }

    .column-slider__slides {
      height: 350px; /* Adjusted height for mobile */
    }

    .triple-column-slider {
      padding: {{ section.settings.mobile_section_padding }}px 0;
    }
  }
{%- endstyle -%}

<div class="triple-column-slider">
  {%- if section.settings.heading != blank -%}
    <h2 class="triple-column-slider__heading">{{ section.settings.heading }}</h2>
  {%- endif -%}

  <div class="triple-column-slider__container">
    {%- for block in section.blocks -%}
      {%- if block.type == 'column' -%}
        <div class="column-slider" data-slider-id="{{ forloop.index }}" data-autoplay="{{ section.settings.auto_slide }}" data-autoplay-speed="{{ section.settings.slide_duration }}">
          <div class="column-slider__slides">
            {%- for i in (1..3) -%}
              {%- assign image_key = 'image_' | append: i -%}
              {%- assign title_key = 'title_' | append: i -%}
              {%- assign description_key = 'description_' | append: i -%}
              {%- assign button_text_key = 'button_text_' | append: i -%}
              {%- assign button_link_key = 'button_link_' | append: i -%}

              {%- if block.settings[image_key] != blank -%}
                <div class="column-slider__slide {% if forloop.first %}active{% endif %}" data-slide-index="{{ forloop.index0 }}">
                  <div class="column-slider__image-container">
                    <img decoding="async" class="column-slider__image" src="{{ block.settings[image_key] | img_url: '800x' }}" alt="{{ block.settings[title_key] | escape }}" loading="lazy">

                    <div class="column-slider__content">
                      {%- if block.settings[title_key] != blank -%}
                        <h3 class="column-slider__title">{{ block.settings[title_key] }}</h3>
                      {%- endif -%}

                      {%- if block.settings[description_key] != blank -%}
                        <p class="column-slider__description">{{ block.settings[description_key] }}</p>
                      {%- endif -%}

                      {%- if block.settings[button_text_key] != blank -%}
                        <a href="{{ block.settings[button_link_key] }}" class="column-slider__button">
                          {{ block.settings[button_text_key] }}
                        </a>
                      {%- endif -%}
                    </div>
                  </div>
                </div>
              {%- endif -%}
            {%- endfor -%}
          </div>

          <div class="column-slider__dots">
            {%- for i in (1..3) -%}
              {%- assign image_key = 'image_' | append: i -%}
              {%- if block.settings[image_key] != blank -%}
                <div class="column-slider__dot {% if forloop.first %}active{% endif %}" data-slide-index="{{ forloop.index0 }}"></div>
              {%- endif -%}
            {%- endfor -%}
          </div>
        </div>
      {%- endif -%}
    {%- endfor -%}
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const sliders = document.querySelectorAll('.column-slider');

  sliders.forEach(slider => {
    const slides = slider.querySelectorAll('.column-slider__slide');
    const dots = slider.querySelectorAll('.column-slider__dot');
    const autoSlide = slider.dataset.autoplay === 'true';
    const slideDuration = parseInt(slider.dataset.autoplaySpeed) * 1000;
    let slideIndex = 0;
    let slideInterval;

    function showSlide(index) {
      // Update classes for smooth transition
      slides.forEach((slide, i) => {
        if (i === index) {
          slide.classList.add('active');
          slide.classList.remove('prev', 'next');
        } else {
          slide.classList.remove('active');
          if (i < index) {
            slide.classList.add('prev');
            slide.classList.remove('next');
          } else {
            slide.classList.add('next');
            slide.classList.remove('prev');
          }
        }
      });

      dots.forEach((dot, i) => {
        dot.classList.toggle('active', i === index);
      });

      slideIndex = index;
    }

    function nextSlide() {
      const newIndex = (slideIndex + 1) % slides.length;
      showSlide(newIndex);
    }

    dots.forEach((dot, index) => {
      dot.addEventListener('click', () => {
        showSlide(index);

        if (autoSlide) {
          clearInterval(slideInterval);
          startAutoSlide();
        }
      });
    });

    function startAutoSlide() {
      if (autoSlide && slides.length > 1) {
        slideInterval = setInterval(nextSlide, slideDuration);
      }
    }

    // Initialize first slide
    if (slides.length > 0) {
      showSlide(0);
    }

    startAutoSlide();

    // Pause on hover
    if (autoSlide) {
      slider.addEventListener('mouseenter', () => {
        clearInterval(slideInterval);
      });

      slider.addEventListener('mouseleave', () => {
        startAutoSlide();
      });
    }
  });
});
</script>

{% schema %}
{
  "name": "Triple Column Slider",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Section Heading",
      "default": "Featured Collections"
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "Background Color",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "heading_color",
      "label": "Heading Color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text Color",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "button_color",
      "label": "Button Color",
      "default": "#ff5500"
    },
    {
      "type": "color",
      "id": "button_text_color",
      "label": "Button Text Color",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "button_hover_color",
      "label": "Button Hover Color",
      "default": "#e04b00"
    },
    {
      "type": "range",
      "id": "slide_border_radius",
      "label": "Slide Border Radius",
      "min": 0,
      "max": 50,
      "step": 1,
      "unit": "px",
      "default": 8
    },
    {
      "type": "range",
      "id": "section_padding",
      "label": "Section Padding (Desktop)",
      "min": 0,
      "max": 100,
      "step": 5,
      "unit": "px",
      "default": 50
    },
    {
      "type": "range",
      "id": "mobile_section_padding",
      "label": "Section Padding (Mobile)",
      "min": 0,
      "max": 50,
      "step": 5,
      "unit": "px",
      "default": 30
    },
    {
      "type": "checkbox",
      "id": "auto_slide",
      "label": "Enable Auto Slide",
      "default": true
    },
    {
      "type": "range",
      "id": "slide_duration",
      "label": "Slide Duration (seconds)",
      "min": 1,
      "max": 10,
      "step": 1,
      "default": 3
    }
  ],
  "blocks": [
    {
      "type": "column",
      "name": "Column",
      "limit": 3,
      "settings": [
        {
          "type": "header",
          "content": "Slide 1"
        },
        {
          "type": "image_picker",
          "id": "image_1",
          "label": "Image"
        },
        {
          "type": "text",
          "id": "title_1",
          "label": "Title",
          "default": "Slide 1 Title"
        },
        {
          "type": "textarea",
          "id": "description_1",
          "label": "Description",
          "default": "Slide 1 description text goes here."
        },
        {
          "type": "text",
          "id": "button_text_1",
          "label": "Button Text",
          "default": "Shop Now"
        },
        {
          "type": "url",
          "id": "button_link_1",
          "label": "Button Link"
        },
        {
          "type": "header",
          "content": "Slide 2"
        },
        {
          "type": "image_picker",
          "id": "image_2",
          "label": "Image"
        },
        {
          "type": "text",
          "id": "title_2",
          "label": "Title",
          "default": "Slide 2 Title"
        },
        {
          "type": "textarea",
          "id": "description_2",
          "label": "Description",
          "default": "Slide 2 description text goes here."
        },
        {
          "type": "text",
          "id": "button_text_2",
          "label": "Button Text",
          "default": "Shop Now"
        },
        {
          "type": "url",
          "id": "button_link_2",
          "label": "Button Link"
        },
        {
          "type": "header",
          "content": "Slide 3"
        },
        {
          "type": "image_picker",
          "id": "image_3",
          "label": "Image"
        },
        {
          "type": "text",
          "id": "title_3",
          "label": "Title",
          "default": "Slide 3 Title"
        },
        {
          "type": "textarea",
          "id": "description_3",
          "label": "Description",
          "default": "Slide 3 description text goes here."
        },
        {
          "type": "text",
          "id": "button_text_3",
          "label": "Button Text",
          "default": "Shop Now"
        },
        {
          "type": "url",
          "id": "button_link_3",
          "label": "Button Link"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Triple Column Slider",
      "category": "Custom"
    }
  ]
}
{% endschema %}
Step 2: Add the Section to Your Theme

  1. Go to your Shopify admin

  2. Navigate to Online Store > Themes

  3. Click “Edit code” on your current theme

  4. Create a new file in the sections folder called triple-column-slider.liquid

  5. Paste the code above and save

Step 3: Add the Section to a Template

  1. Go to the theme editor

  2. Add a new section and select “Triple Column Slider”

  3. Configure the settings and add your content

Key Features:

  1. Three Independent Sliders – Each column has its own auto-sliding carousel

  2. Fully Responsive – Stacks to single column on mobile

  3. Customizable Settings:

    • Colors for text, buttons, background

    • Slide duration control

    • Auto-slide toggle

    • Padding controls

  4. Rich Content Options:

    • Image, title, description and button for each slide

    • Up to 3 slides per column

  5. Visual Indicators – Dots navigation for each slider

  6. Pause on Hover – Auto-slide pauses when user hovers

Customization Tips:

  1. To change the number of slides per column, modify the {% for i in (1..3) %} loops and add corresponding schema settings

  2. To change the slide transition effect, modify the CSS transitions

  3. To add more columns, increase the block limit in the schema

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *