Custom Twig Slider

The Slider block's "Custom Twig (Advanced)" layout lets you create a fully custom hero/slider section featuring your products.

Overview

When "Custom Twig (Advanced)" is selected:

• Content fields appear (title, value, subtitle, subvalue)

• A featured image uploader appears

• A code editor appears for your custom HTML + Twig template

• Slider enabled products are automatically passed to your template

How to Use

1. In the admin panel, edit the homepage

2. Add or edit a Slider block

3. In the "Slider Style" dropdown, select "Custom Twig (Advanced)"

4. Optionally upload a featured image

5. Fill in the content fields (title, value, subtitle, subvalue)

6. Write your HTML + Twig code in the code editor

7. Save and preview

Available Variables

Block Content

Variable	Type	Description	Example
title	string	Main headline	"Win Big"
value	string	Value/amount text	"£50,000"
subtitle	string	Secondary headline	"This Week's Prize"
subvalue	string	Secondary value	"Cash Alternative"
featured_image_url	string	Uploaded image URL	Full URL or empty

Products

Slider enabled products are automatically included. Loop through them with:

{% for product in products %}
  {{ product.title }}
{% endfor %}

Product Fields:

Field	Type	Description	Example
product.id	int	Product ID	123
product.title	string	Competition name	"Win a BMW M3"
product.slug	string	Product URL slug	"win-a-bmw"
product.subtitle	string	Optional subtitle	"Limited Edition"
product.url	string	Product page link	"/product/win-a-bmw"
product.image_url	string	Featured image URL	Full URL
product.slider_image_url	string	Slider/hero image URL	Full URL
product.portrait_image_url	string	Portrait image URL	Full URL or null
product.featured_video_url	string	Featured video URL (if uploaded)	Full URL or null
product.video_embed_url	string	Player address for the Video URL, or null	"https://player.vimeo.com/video/..."
product.video_embed_type	string	"iframe" (YouTube or Vimeo) or "video" (video file), or null	"iframe"
product.video_embed_mime_type	string	File type for a video file, otherwise null	"video/mp4"
product.video_embed_orientation	string	"portrait" (YouTube Shorts) or "landscape", or null	"landscape"
product.price	string	Current price (formatted)	"£1.99"
product.price_raw	float	Current price as a number	1.99
product.price_display	string	Pretty current price (shows "Free" or "50p" for small amounts)	"£1.99"
product.original_price	string	Original price if on sale	"£2.99"
product.original_price_raw	float	Original price as a number (for calculations)	2.99
product.is_on_sale	bool	Whether on sale	true/false
product.is_free	bool	Whether the product is free to enter	true/false
product.has_question	bool	Whether an entry question is set	true/false
product.question	string	The entry question text, if any	"What colour is the sky?"
product.cash_alt	string	Cash alternative	"£50,000"
product.cash_alt_raw	float	Cash alternative as a number	50000
product.draw_date	string	Human readable draw date	"Draw On Mon Jan 5th 7:00pm"
product.end_date	string	Human readable end date	"Today 7:00pm"
product.start_date_raw	string	ISO start date (Y-m-d H:i:s)	"2026-01-01 09:00:00"
product.start_date	string	Human readable start date	"Tomorrow 9:00am"
product.start_date_seconds	int	Seconds until the competition opens (0 once open)	0
product.has_started	bool	Whether the start date has passed	true
product.draw_date_raw	string	Draw datetime (Y-m-d H:i:s)	"2026-01-05 19:00:00"
product.end_date_raw	string	End datetime (Y-m-d H:i:s)	"2026-01-05 19:00:00"
product.draw_date_seconds	int	Seconds until draw	86400
product.end_date_seconds	int	Seconds until end (for countdown)	3600
product.max_tickets	int	Total tickets available	5000
product.sold_tickets	int	Tickets sold	3421
product.tickets_remaining	int	Tickets left to sell	1579
product.percent_sold	float	Percentage sold	68.4
product.max_per_user	int	Max tickets per user (0 means no limit)	50
product.instant_wins	int	Number of instant wins	5
product.instant_wins_remaining	int	Remaining instant wins not yet won	3
product.game_type	string	Type of game	"standard"
product.winner_qty	int	Number of winners	1
product.simple_max_ticket	bool	Whether the product shows percentage sold only	true/false
product.has_ended	bool	Whether competition ended	true/false
product.is_sold_out	bool	Whether the product is sold out	true/false
product.is_active	bool	Whether the product is active	true/false
product.is_featured	bool	Whether the product is in the slider	true/false
product.auto_draw	bool	Whether the draw happens automatically	true/false
product.leaderboard_enabled	bool	Whether the product has a leaderboard	true/false
product.category	string	First category name	"Cars"
product.categories	array	All category names	["Cars", "Featured"]
product.description	string	Product description	"Win this amazing..."
product.gallery	array	Array of gallery image URLs	["https://...", "https://..."]

The slider only includes competitions that have reached their start date, so product.has_started is always true here. Scheduled competitions join the slider automatically once they open.

Dynamic Components

Countdown Timer

<div x-data="raffleCountdown({{ product.end_date_seconds }})">
  <span x-text="time.days"></span>d
  <span x-text="pad(time.hours)"></span>h
  <span x-text="pad(time.minutes)"></span>m
  <span x-text="pad(time.seconds)"></span>s
</div>

Progress Bar

<div x-data="raffleProgress({{ product.percent_sold }})" class="progress-bar">
  <div class="progress-fill" :style="'width:' + width + '%'"></div>
</div>

Example: Ultimate SplideJS Showcase (Full-Featured)

This example demonstrates a modern, fully-featured single-slide carousel with all dynamic components, site theming, and interactive elements.

<style>
  :root {
    --slider-primary: {{ settings.primary_color|default('#4ade80') }};
    --slider-bg: {{ settings.background|default('#0f0f23') }};
    --slider-btn-text: {{ settings.button_text_color|default('#000000') }};
  }

  .ultimate-slider {
    background: var(--slider-bg);
    padding: 40px 0;
    position: relative;
    overflow: hidden;
  }

  .ultimate-slider::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 200px;
    background: linear-gradient(180deg, var(--slider-primary), transparent);
    opacity: 0.1;
    pointer-events: none;
  }

  .ultimate-header {
    text-align: center;
    margin-bottom: 30px;
    padding: 0 20px;
  }

  .ultimate-header h2 {
    color: white;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 8px;
  }

  .ultimate-header p {
    color: #9ca3af;
    font-size: 16px;
  }

  .ultimate-slide {
    padding: 0 20px;
  }

  .ultimate-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    max-width: 1200px;
    margin: 0 auto;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.1);
  }

  /* Tablet Responsive */
  @media (max-width: 900px) {
    .ultimate-card {
      grid-template-columns: 1fr;
    }
  }

  /* Mobile Responsive - Image-first layout */
  @media (max-width: 640px) {
    .ultimate-slider {
      padding: 16px 0 40px;
    }
    .ultimate-header {
      margin-bottom: 16px;
      padding: 0 12px;
    }
    .ultimate-header h2 {
      font-size: 22px;
    }
    .ultimate-header p {
      font-size: 13px;
    }
    .ultimate-slide {
      padding: 0 8px;
    }
    .ultimate-card {
      border-radius: 12px;
      display: flex;
      flex-direction: column;
    }
    /* Image takes priority on mobile - show it clearly */
    .ultimate-image-wrapper {
      position: relative;
      min-height: 220px;
      height: 220px;
    }
    .ultimate-image {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    /* Badges stay on image */
    .ultimate-badges {
      top: 10px;
      left: 10px;
      gap: 6px;
    }
    .ultimate-badge {
      padding: 4px 10px;
      font-size: 10px;
    }
    /* Price overlay on image bottom */
    .ultimate-mobile-price-overlay {
      display: flex;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 12px;
      background: linear-gradient(transparent, rgba(0,0,0,0.8));
      align-items: baseline;
      gap: 8px;
    }
    .ultimate-mobile-price-overlay .ultimate-price {
      font-size: 28px;
    }
    .ultimate-mobile-price-overlay .ultimate-original-price {
      font-size: 16px;
    }
    /* Content below image */
    .ultimate-content {
      padding: 14px;
    }
    .ultimate-category {
      font-size: 11px;
      margin-bottom: 4px;
    }
    .ultimate-title {
      font-size: 18px;
      margin-bottom: 4px;
    }
    .ultimate-subtitle {
      font-size: 13px;
      margin-bottom: 12px;
    }
    .ultimate-stat {
      margin-bottom: 12px;
      padding: 10px;
      border-radius: 8px;
    }
    .ultimate-stat-label {
      font-size: 10px;
      margin-bottom: 4px;
    }
    .ultimate-stat-value {
      font-size: 16px;
    }
    .ultimate-progress-wrapper {
      margin-bottom: 12px;
    }
    .ultimate-progress-text,
    .ultimate-progress-percent {
      font-size: 12px;
    }
    .ultimate-progress-bar {
      height: 6px;
    }
    /* Hide desktop pricing in content - shown on image */
    .ultimate-pricing {
      display: none;
    }
    .ultimate-cash-alt {
      font-size: 12px;
      margin-bottom: 12px;
    }
    .ultimate-cta {
      padding: 14px 20px;
      font-size: 15px;
      border-radius: 10px;
    }
    .ultimate-slider .splide__arrow {
      width: 36px;
      height: 36px;
    }
    .ultimate-slider .splide__arrow svg {
      width: 16px;
      height: 16px;
    }
    .ultimate-slider .splide__pagination {
      bottom: -24px;
    }
  }

  /* Desktop: hide mobile price overlay */
  .ultimate-mobile-price-overlay {
    display: none;
  }

  .ultimate-image-wrapper {
    position: relative;
    min-height: 450px;
  }

  .ultimate-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
  }

  .ultimate-badges {
    position: absolute;
    top: 16px;
    left: 16px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    z-index: 10;
  }

  .ultimate-badge {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .ultimate-badge--sale {
    background: #ef4444;
    color: white;
  }

  .ultimate-badge--ending {
    background: #f59e0b;
    color: #000;
    animation: pulse 2s infinite;
  }

  .ultimate-badge--instant {
    background: var(--slider-primary);
    color: var(--slider-btn-text);
  }

  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
  }

  .ultimate-content {
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .ultimate-category {
    color: var(--slider-primary);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
  }

  .ultimate-title {
    color: white;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.2;
  }

  .ultimate-subtitle {
    color: #9ca3af;
    font-size: 16px;
    margin-bottom: 20px;
  }

  .ultimate-stat {
    margin-bottom: 20px;
    background: rgba(0,0,0,0.3);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
  }

  .ultimate-stat-label {
    color: #9ca3af;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
  }

  .ultimate-stat-value {
    color: white;
    font-size: 20px;
    font-weight: 700;
  }

  .ultimate-progress-wrapper {
    margin-bottom: 20px;
  }

  .ultimate-progress-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
  }

  .ultimate-progress-text {
    color: #9ca3af;
    font-size: 13px;
  }

  .ultimate-progress-percent {
    color: var(--slider-primary);
    font-weight: 600;
    font-size: 13px;
  }

  .ultimate-progress-bar {
    height: 8px;
    background: rgba(255,255,255,0.1);
    border-radius: 4px;
    overflow: hidden;
  }

  .ultimate-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--slider-primary), #22d3ee);
    border-radius: 4px;
    transition: width 0.5s ease;
  }

  .ultimate-pricing {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 16px;
  }

  .ultimate-price {
    color: var(--slider-primary);
    font-size: 36px;
    font-weight: 800;
  }

  .ultimate-original-price {
    color: #6b7280;
    font-size: 18px;
    text-decoration: line-through;
  }

  .ultimate-cash-alt {
    color: #9ca3af;
    font-size: 14px;
    margin-bottom: 20px;
  }

  .ultimate-cash-alt span {
    color: white;
    font-weight: 600;
  }

  .ultimate-cta {
    display: block;
    width: 100%;
    padding: 16px 32px;
    background: var(--slider-primary);
    color: var(--slider-btn-text);
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    border-radius: 12px;
    transition: all 0.3s ease;
  }

  .ultimate-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 40px rgba(74, 222, 128, 0.3);
  }

  /* Splide Customization */
  .ultimate-slider .splide__pagination {
    bottom: -30px;
  }

  .ultimate-slider .splide__pagination__page {
    width: 10px;
    height: 10px;
    background: rgba(255,255,255,0.3);
    opacity: 1;
  }

  .ultimate-slider .splide__pagination__page.is-active {
    background: var(--slider-primary);
    transform: scale(1.2);
  }

  .ultimate-slider .splide__arrow {
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    opacity: 1;
  }

  .ultimate-slider .splide__arrow:hover {
    background: var(--slider-primary);
  }

  .ultimate-slider .splide__arrow svg {
    fill: white;
    width: 20px;
    height: 20px;
  }
</style>

<section class="ultimate-slider">
  <div class="ultimate-header">
    <h2>{{ title|default('This Week\'s Top Prizes') }}</h2>
    <p>{{ subtitle|default('Don\'t miss your chance to win big') }}</p>
  </div>

  <div class="splide" x-data x-init="new Splide($el, {
    type: 'loop',
    perPage: 1,
    autoplay: true,
    interval: 6000,
    pauseOnHover: true,
    pagination: true,
    arrows: true,
    speed: 800,
    easing: 'cubic-bezier(0.25, 1, 0.5, 1)',
    gap: '20px',
    padding: { left: 20, right: 20 }
  }).mount()">
    <div class="splide__track">
      <ul class="splide__list">
        {% for product in products %}
          <li class="splide__slide">
            <div class="ultimate-slide">
              <div class="ultimate-card">
                <div class="ultimate-image-wrapper">
                  <img src="{{ product.image_url }}" alt="{{ product.title }}" class="ultimate-image" loading="lazy">
                  <div class="ultimate-badges">
                    {% if product.is_on_sale %}
                      <span class="ultimate-badge ultimate-badge--sale">Sale</span>
                    {% endif %}
                    {% if product.instant_wins > 0 %}
                      <span class="ultimate-badge ultimate-badge--instant">{{ product.instant_wins }} Instant Wins</span>
                    {% endif %}
                  </div>
                  <!-- Mobile: Price overlay on image -->
                  <div class="ultimate-mobile-price-overlay">
                    <span class="ultimate-price">{{ product.price }}</span>
                    {% if product.is_on_sale and product.original_price %}
                      <span class="ultimate-original-price">{{ product.original_price }}</span>
                    {% endif %}
                  </div>
                </div>

                <div class="ultimate-content">
                  {% if product.category %}
                    <span class="ultimate-category">{{ product.category }}</span>
                  {% endif %}

                  <h3 class="ultimate-title">{{ product.title }}</h3>

                  {% if product.subtitle %}
                    <p class="ultimate-subtitle">{{ product.subtitle }}</p>
                  {% endif %}

                  <div class="ultimate-stat">
                    <div class="ultimate-stat-label">Tickets Sold</div>
                    <div class="ultimate-stat-value">{{ product.sold_tickets }} <span style="color:#6b7280;font-size:14px">/ {{ product.max_tickets }}</span></div>
                  </div>

                  <div class="ultimate-progress-wrapper" x-data="raffleProgress({{ product.percent_sold }})">
                    <div class="ultimate-progress-header">
                      <span class="ultimate-progress-text">Tickets Remaining</span>
                      <span class="ultimate-progress-percent" x-text="percent.toFixed(1) + '% Sold'"></span>
                    </div>
                    <div class="ultimate-progress-bar">
                      <div class="ultimate-progress-fill" :style="'width:' + width + '%'"></div>
                    </div>
                  </div>

                  <div class="ultimate-pricing">
                    <span class="ultimate-price">{{ product.price }}</span>
                    {% if product.is_on_sale and product.original_price %}
                      <span class="ultimate-original-price">{{ product.original_price }}</span>
                    {% endif %}
                  </div>

                  {% if product.cash_alt %}
                    <p class="ultimate-cash-alt">Cash Alternative: <span>{{ product.cash_alt }}</span></p>
                  {% endif %}

                  <a href="{{ product.url }}" class="ultimate-cta">
                    Enter Now - {{ product.price }}
                  </a>
                </div>
              </div>
            </div>
          </li>
        {% endfor %}
      </ul>
    </div>
  </div>
</section>

Common Splide Options:

Option	Description	Example
type	Slide type	"loop", "slide", "fade"
perPage	Slides visible	3
gap	Space between slides	"1rem", "20px"
autoplay	Auto-advance slides	true
interval	Autoplay delay (ms)	4000
pauseOnHover	Pause on mouse hover	true
arrows	Show prev/next arrows	true
pagination	Show dot navigation	true
breakpoints	Responsive settings	See example above

Tips

1. Slider enabled products only - The slider automatically shows products enabled for the slider in the admin

2. Use the first product - Access with products|first for a single hero product

3. Handle empty state - Always check {% if products|length > 0 %} before displaying

4. Use countdown timers - Add live countdowns with raffleCountdown(product.end_date_seconds)

5. Featured image - Upload a background image and use {{ featured_image_url }}

6. Use SplideJS with Alpine.js - Initialize with x-data x-init="new Splide($el, {...}).mount()"

7. Use site colours - Access via {{ settings.primary_color }}, {{ settings.background }}, {{ settings.button_text_color }}

8. Mobile responsive - Always include @media queries with reduced padding (24px/12px) to fit more above the fold

---

AI Context

For AI Assistants: This documents the RaffleX Slider block's Twig layout for creating custom slider sections.

Block Location: Homepage only (visible when page layout is "home")

Context Variables:

• Block content: title, value, subtitle, subvalue, featured_image_url

• Products: products array (slider enabled products only, sorted by sort order; only competitions that have reached their start date)

• Settings: settings.primary_color, settings.background, settings.button_text_color, settings.site_name, settings.currency_icon

Product fields: id, title, subtitle, slug, url, image_url, slider_image_url, portrait_image_url, featured_video_url, video_embed_url, video_embed_type, video_embed_mime_type, video_embed_orientation, price, price_raw, price_display, original_price, original_price_raw, is_on_sale, is_free, has_question, question, cash_alt, cash_alt_raw, draw_date, end_date, start_date, start_date_raw, start_date_seconds, has_started, draw_date_raw, end_date_raw, draw_date_seconds, end_date_seconds, max_tickets, sold_tickets, tickets_remaining, percent_sold, max_per_user, has_ended, is_sold_out, is_active, is_featured, auto_draw, leaderboard_enabled, instant_wins, instant_wins_remaining, game_type, winner_qty, simple_max_ticket, category, categories, description, gallery

SplideJS (IMPORTANT): Use Alpine.js for initialization - NOT data-splide attribute. Pattern:

<div class="splide" x-data x-init="new Splide($el, {
  type: 'loop',
  perPage: 1,
  autoplay: true
}).mount()">

Common options: type (loop/slide/fade), perPage, gap, autoplay, interval, pauseOnHover, arrows, pagination, breakpoints, speed, easing.

Dynamic Alpine Components:

• raffleCountdown(seconds) - Live countdown. Props: time.days/hours/minutes/seconds, hasEnded, pad()

• raffleProgress(percent) - Progress bar. Props: percent, width

Best Practices:

• Always use settings variables for colours via CSS custom properties (e.g., --slider-primary: {{ settings.primary_color|default('#4ade80') }})

• All templates MUST be mobile responsive with @media queries

• Reduce padding on mobile (24px vertical, 12px horizontal) to maximize above-the-fold content

• Reduce font sizes, image heights, and element padding on mobile for better space efficiency

• Use loading="lazy" on images

• Include hover states and transitions for interactive elements

• Examples are used only for context, always follow the customers design directives.

---

See also: Settings Variables for the global settings available in all Twig templates, and How the Slider Chooses Competitions for how products are picked for the slider.