Carousel Slider

Overview

The Phenix Carousel Slider provides a powerful and flexible way to create responsive carousels and slideshows. Built on top of the SplideJS library, the Phenix Slider offers seamless integration with other Phenix components while providing an intuitive API for creating various types of sliders.

Key features include:

• Multiple slider types (loop, fade, slide)
• Responsive breakpoints
• Navigation controls and pagination
• Synchronized sliders
• Lazy loading integration
• Vertical sliders
• Multimedia support

Basic Usage

The most basic implementation requires a container with the .px-slider class and child elements with the .px-item class:

<!-- Slider Wrapper -->
<div class="px-slider">
    <!-- Slide Item -->
    <div class="px-item">Slide 1 Content</div>
    <!-- Slide Item -->
    <div class="px-item">Slide 2 Content</div>
    <!-- Slide Item -->
    <div class="px-item">Slide 3 Content</div>
</div>

// Initialize the slider
Phenix('.px-slider').slider();

Slider Types

The Phenix Slider supports three main types of animations:

• loop: Default type, perfect for continuous looping carousels
• fade: Fade in/out transitions, ideal for single slide presentations
• slide: Standard sliding animations without looping

<!-- Loop Slider (default) -->
<div class="px-slider" data-type="loop">...</div>

<!-- Fade Slider -->
<div class="px-slider" data-type="fade">...</div>

<!-- Slide Slider -->
<div class="px-slider" data-type="slide">...</div>

// Initialize with specific type
Phenix('.px-slider').slider({
    type: "fade" // Options: "loop", "fade", "slide"
});

Navigation Controls

You can add navigation arrows to your slider using the controls option:

<!-- Slider with navigation controls -->
<div class="px-slider" data-controls="1">...</div>

<!-- Slider with custom control classes -->
<div class="px-slider" data-controls="custom-controls flexbox align-between" data-arrow="btn round primary">...</div>

// Initialize with controls
Phenix('.px-slider').slider({
    controls: true, // Enable default controls
    arrow: "btn round primary" // Custom classes for control buttons
});

Pagination

Add pagination dots to your slider using the pagination option:

<!-- Slider with pagination -->
<div class="px-slider" data-pagination="1">...</div>

<!-- Slider with custom pagination classes -->
<div class="px-slider" data-pagination="custom-pagination flexbox align-center-x" data-page="btn round small">...</div>

// Initialize with pagination
Phenix('.px-slider').slider({
    pagination: true, // Enable default pagination
    page: "btn round small" // Custom classes for pagination buttons
});

Responsive Breakpoints

Control the number of slides shown at different screen sizes:

<!-- Responsive slider -->
<div class="px-slider" data-items="1" data-sm="2" data-md="3" data-lg="4">...</div>

// Initialize with responsive breakpoints
Phenix('.px-slider').slider({
    items: 1, // Default number of items
    // Breakpoints configuration
    breakpoints: {
        576: { // Small screens (sm)
            perPage: 2
        },
        768: { // Medium screens (md)
            perPage: 3
        },
        992: { // Large screens (lg)
            perPage: 4
        }
    }
});

Synchronized Sliders

Create synchronized sliders where one slider controls another:

<!-- Main slider -->
<div class="px-slider" data-sync="#thumbnails-slider">...</div>

<!-- Thumbnails slider -->
<div id="thumbnails-slider" data-is-navigation="1">...</div>

// Initialize synchronized sliders
Phenix('.px-slider').slider();

Vertical Slider

Create a vertical slider that slides from top to bottom:

<!-- Vertical slider -->
<div class="px-slider" data-direction="ttb" data-height="400px">...</div>

// Initialize vertical slider
Phenix('.px-slider').slider({
    direction: 'ttb', // top-to-bottom
    height: '400px'
});

Advanced Examples

Image Gallery with Thumbnails

<!-- Main Gallery Slider -->
<div class="px-slider mb-30" data-sync="#thumbnails-example" data-type="fade" data-controls="1">
    <div class="px-item">
        <img src="image1.jpg" alt="" class="fluid">
    </div>
    <div class="px-item">
        <img src="image2.jpg" alt="" class="fluid">
    </div>
    <div class="px-item">
        <img src="image3.jpg" alt="" class="fluid">
    </div>
</div>

<!-- Gallery Thumbnails -->
<div id="thumbnails-example" data-type="slide" data-items="2" data-md="3" data-lg="4" 
     class="row gpx-15 mb-30" data-is-navigation="1" data-controls="1">
    <div class="px-item col-6 col-md-4 col-lg-3">
        <img src="image1-thumb.jpg" alt="" class="fluid">
    </div>
    <div class="px-item col-6 col-md-4 col-lg-3">
        <img src="image2-thumb.jpg" alt="" class="fluid">
    </div>
    <div class="px-item col-6 col-md-4 col-lg-3">
        <img src="image3-thumb.jpg" alt="" class="fluid">
    </div>
</div>

/* Style active thumbnail */
#thumbnails-example .px-item {transition: opacity 300ms linear;}
#thumbnails-example .px-item:not(.is-active) {opacity: 0.35;}

News Slider with Vertical Thumbnails

<!-- Grid -->
<div class="row">
    <!-- Main Content Column -->
    <div class="col-12 col-md-6 col-lg-7">
        <!-- Main Slider -->
        <div class="px-slider mb-30" data-sync="#news-thumbnails" data-controls="1" data-type="fade">
            <!-- Item -->
            <div class="px-item">
                <img src="news1.jpg" alt="" class="fluid">
                <div class="content position-absolute fluid bottom-0 pdx-25 pdy-15 bg-gradient-bottom">
                    <h3 class="fs-19 color-white">News Headline 1</h3>
                    <p class="mb-0 color-white">News excerpt goes here...</p>
                </div>
            </div>
            <!-- Additional items... -->
        </div>
    </div>
    
    <!-- Thumbnails Column -->
    <div class="col-12 col-md-6 col-lg-5 mb-30">
        <!-- Vertical Carousel -->
        <div id="news-thumbnails" data-direction="ttb" data-items="3" 
             data-is-navigation="1" data-pagination="reset-list col-12 flexbox align-center-x">
            <!-- Card Block -->
            <div class="px-item">
                <div class="post-card flexbox align-center-y bg-white radius-sm overflow-hidden mb-15">
                    <img src="news1-thumb.jpg" alt="" class="width-70 height-70 cover">
                    <div class="col pdx-15">
                        <h5 class="fs-14 mb-5">News Headline 1</h5>
                        <p class="fs-12 mb-0 tx-nowrap">News date...</p>
                    </div>
                </div>
            </div>
            <!-- Additional items... -->
        </div>
    </div>
</div>

Events

The Phenix Slider dispatches several events that you can listen for:

// Listen for slider events
Phenix('.px-slider').slider().on('mounted', event => {
    // Access slider elements
    const sliderElement = event.detail.slider;
    const trackElement = event.detail.track;
    
    console.log('Slider mounted!');
});

// Other available events: 'move', 'moved', 'visible', 'hidden', 'active', 'inactive'

Integration with Other Components

The Phenix Slider automatically integrates with other Phenix components:

• Multimedia: Automatically initializes media elements with data-src attributes
• Lazyloading: Handles elements with .px-loading or .px-loader classes
• Popup Modals: Initializes any .px-lightbox or [data-modal] elements
• Audio Buttons: Sets up audio triggers with [data-audio] attributes
• WooCommerce: Handles add-to-cart functionality for WooCommerce products

Configuration Options

Option	Type	Default	Description
type	String	'loop'	Slider type: 'loop', 'slide', or 'fade'
focus	Number/String	'center'	Determines which slide should be active
items	Number	1	Number of slides to show at once
steps	Number	1	Number of slides to move at once
speed	Number	700	Sliding animation speed in milliseconds
start	Number	0	Start index of the first slide
duration	Number	6000	Autoplay interval duration in milliseconds
autoplay	Boolean	false	Enable/disable autoplay
controls	Boolean/String	false	Enable arrows and add custom classes
pagination	Boolean/String	false	Enable pagination and add custom classes
arrow	String	null	Custom classes for control buttons
page	String	null	Custom classes for pagination buttons
direction	String	'ltr'	Slider direction: 'ltr', 'rtl', or 'ttb'
sync	String	null	Selector for another slider to sync with
isNavigation	Boolean	false	Whether slides act as navigation
pauseOnHover	Boolean	false	Pause autoplay on hover
intersection	Boolean	false	Only initialize when in viewport
rewind	Boolean	false	Rewind to the opposite end
wheel	Boolean	false	Enable mouse wheel navigation
drag	Boolean	true	Enable mouse/touch drag

CSS Classes

Class	Description
.px-slider	Main slider container
.px-item	Slide item
.px-slider-controls	Controls wrapper
.px-slider-button	Control button
.px-prev	Previous button
.px-next	Next button
.px-slider-pagination	Pagination wrapper
.px-slider-page	Pagination button
.is-active	Active slide or pagination item
.is-visible	Visible slide

Browser Compatibility

The Phenix Slider is compatible with all modern browsers. It dynamically loads the SplideJS library only when needed, ensuring optimal performance.