Carousel Slider
Documentation and examples to learn how to build a carousel and sliders, with the amazing third-party plugin SplideJS in combination with phenix
Overview
phenix .slider() is a method to make the creating of a carousel or slider with splide.js third-party plugin easier and works great with the design system to create integration between the plugin and phenix javascript plugins, the splide.js loads only if your run a slider() component otherwise it doesn’t exist on your document,
for further information about SplideJS features and what it can do in its original Documentation you might take a look, and you can use it once you run the .slider() the method you also have new Splide() available for you if you need a slider without a phenix pattern on it,
the slider(); always return a collection of splide.js objects that you can loop through it and use the methods and the events or even change the options in some specified cases, available from splide.js originally.
Basic Usage
in the next example, we will use the slider() method to activate and load splide slider and use it with the default settings, and the very basic structure of a carousel with wrapper and a list of slides.
<!-- Slider Wrapper --> <div class="px-slider" ...data-options> <!-- Slide Item --> <div class="px-item">...</div> <!-- Slide Item --> <div class="px-item">...</div> <!-- // Slide Item --> </div> <!-- // Slider Wrapper -->
//===> Run Sliders <===//
Phenix('.px-slider').slider({...options});
Sliders Types
the splide.js offers by default three types of sliders for transition and animations purposes first we have the loop type which is the default type and perfect for multiple slides carousel looping and sliding without a pause,
and we have the fade the type which is a good choice for single slide carousel or gallery slider with fading in/out animations and the slide the type which also good for single/gallery sliders with sliding animations
<!-- Slider Wrapper --> <div class="px-slider" data-type="loop"> <!-- Slide Item --> <div class="px-item">...</div> <!-- Slide Item --> <div class="px-item">...</div> <!-- // Slide Item --> </div> <!-- // Slider Wrapper -->
//===> Run Sliders <===//
Phenix('.px-slider').slider({
type : "loop", //===> types : slide, loop, fade
});
Slider Controls
in the next example, we will use data attributes to activate the slider next, previous buttons with data-controls attribute and for customizing the controls elements and change the default theme classes you can use the option data-controls and your classes as value for the controls wrapper, and data-arrow for the buttons classes,
<!-- Slider With Arrows --> <div class="px-slider mb-30" data-controls="classes or 1" data-arrow="classes"> <div class="px-item pdy-75 pdx-30 tx-align-center bg-alpha-05">Slide #01 Testing</div> <div class="px-item pdy-75 pdx-30 tx-align-center bg-alpha-05">Slide #02 Testing</div> <div class="px-item pdy-75 pdx-30 tx-align-center bg-alpha-05">Slide #03 Testing</div> <div class="px-item pdy-75 pdx-30 tx-align-center bg-alpha-05">Slide #04 Testing</div> </div> <!-- // Slider With Arrows -->
//===> Run Sliders <===//
Phenix('.px-slider').slider({
controls: true || "classes";
arrow: "classes";
});
Slider Pagination
in the next example, we will use data attributes to activate the dot’s pagination with data-pagination attribute, as for customizing the pagination elements and change the default theme classes you can use the option data-pagination and your classes as value for the controls wrapper, and data-page for the buttons classes,
<!-- Slider With Pagination --> <div class="px-slider mb-30" data-pagination="classes or 1" data-page="classes"> <div class="px-item pdy-75 pdx-30 tx-align-center bg-alpha-05">Slide #01 Testing</div> <div class="px-item pdy-75 pdx-30 tx-align-center bg-alpha-05">Slide #02 Testing</div> <div class="px-item pdy-75 pdx-30 tx-align-center bg-alpha-05">Slide #03 Testing</div> <div class="px-item pdy-75 pdx-30 tx-align-center bg-alpha-05">Slide #04 Testing</div> </div> <!-- // Slider With Pagination -->
//===> Run Sliders <===//
Phenix('.px-slider').slider({
pagination: true || "classes";
page: "classes";
});
Carousel Example
in the next example, we will use data attributes to create a responsive multi-slide carousel that changes the displayed slides number on each screen, with data-items you define how many slides to be visible from the smallest screen and up, with the help of the Grid System utilities,
and for changing the visible number of the slides you can use data-sm from the small screen and up, data-md for medium screens and up, data-lg for large screens and up, data-xl for the xLarge screens and forward.
<!-- Slider with Grid --> <div class="px-slider row mb-30" data-controls="1" data-items="1" data-sm="2" data-md="3" data-lg="4"> <!-- Column --> <div class="col-12 col-sm-6 col-md-4 col-lg-3 px-item"> <div class="pdy-75 pdx-30 tx-align-center bg-alpha-05">Slide #01 Testing</div> </div> <!-- Column --> <div class="col-12 col-sm-6 col-md-4 col-lg-3 px-item"> <div class="pdy-75 pdx-30 tx-align-center bg-alpha-05">Slide #02 Testing</div> </div> <!-- Column --> <div class="col-12 col-sm-6 col-md-4 col-lg-3 px-item"> <div class="pdy-75 pdx-30 tx-align-center bg-alpha-05">Slide #03 Testing</div> </div> <!-- Column --> <div class="col-12 col-sm-6 col-md-4 col-lg-3 px-item"> <div class="pdy-75 pdx-30 tx-align-center bg-alpha-05">Slide #04 Testing</div> </div> <!-- // Column --> </div> <!-- // Slider with Grid -->
//===> Run Sliders <===//
Phenix('.px-slider').slider();
Slider Events
the slider comes with a set of events to help you do stuff to the slider and its elements whenever an event of them Fired on your slider element and you can use them as any javascript events or with the .on() of Phenix Javascript, and you can find a List of all available Events from the Original Documentation of Splide.js, and all events return to you the slider and its track, slides-list elements with event.detail method.
//====> Event With Phenix <====//
Phenix('.px-slider').slider().on('mounted', mounted => {
//... do stuff when the slider is mounted...//
mounted.detail.slider //===> Get the Slider Element
mounted.detail.track //===> Get the Slider Track Element
mounted.detail.list //===> Get the Slider List Element
});
//====> Event With JS <====//
document.querySelector("#slider-id").addEventListener('mounted', mounted => {
//... do stuff when the slider is mounted...//
});
Gallery Example
in the next example we will learn how to create a gallery slider with a custom thumbnails slider that sync and interactive with the large slider, A carousel can sync with another carousel by sync option, and isNavigation the option makes the carousel clickable for navigation. By using these 2 features, we can make a carousel with a thumbnail control like this:
as you can see we did give the #thumbnail-slider the data options for a slider but without running the js on it because it will build its slider structure and run it from the main slider option data-sync, and you can use the data-focus="center" to make the activated thumbnail in the center.
<!-- Gallery Slider --> <div class="px-slider mb-30" data-sync="#thumbnails-example" data-pagination="1" data-controls="1"> <div class="px-item"> <img src="https://via.placeholder.com/900x500.png?text=01" alt="" class="fluid"> </div> <div class="px-item"> <img src="https://via.placeholder.com/900x500.png?text=02" alt="" class="fluid"> </div> <div class="px-item"> <img src="https://via.placeholder.com/900x500.png?text=03" alt="" class="fluid"> </div> <div class="px-item"> <img src="https://via.placeholder.com/900x500.png?text=04" alt="" class="fluid"> </div> <div class="px-item"> <img src="https://via.placeholder.com/900x500.png?text=05" alt="" class="fluid"> </div> <div class="px-item"> <img src="https://via.placeholder.com/900x500.png?text=06" alt="" class="fluid"> </div> <div class="px-item"> <img src="https://via.placeholder.com/900x500.png?text=07" 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="https://via.placeholder.com/900x500.png?text=01" alt="" class="fluid"> </div> <div class="px-item col-6 col-md-4 col-lg-3"> <img src="https://via.placeholder.com/900x500.png?text=02" alt="" class="fluid"> </div> <div class="px-item col-6 col-md-4 col-lg-3"> <img src="https://via.placeholder.com/900x500.png?text=03" alt="" class="fluid"> </div> <div class="px-item col-6 col-md-4 col-lg-3"> <img src="https://via.placeholder.com/900x500.png?text=04" alt="" class="fluid"> </div> <div class="px-item col-6 col-md-4 col-lg-3"> <img src="https://via.placeholder.com/900x500.png?text=05" alt="" class="fluid"> </div> <div class="px-item col-6 col-md-4 col-lg-3"> <img src="https://via.placeholder.com/900x500.png?text=06" alt="" class="fluid"> </div> <div class="px-item col-6 col-md-4 col-lg-3"> <img src="https://via.placeholder.com/900x500.png?text=07" alt="" class="fluid"> </div> </div> <!-- // Gallery Slider -->
//====> Activate Sliders <====//
Phenix('.px-slider').slider({sync: '#Thumbnails_Slider'});
/*==== Make the Current Active Slide More Visible then other Thumbnails ====*/
#thumbnails-example .px-item {transition: opacity 300ms linear;}
#thumbnails-example .px-item:not(.is-active) {opacity: 0.35;}
Vertical Slider
in the next example, we will create a vertical example of the carousel and the slider with the data-direction="ttb" attribute or the javascript option direction you can turn the slider flow top to bottom vertically instead of ltr or rtl,
and one last tip : the slides items most be equal in their height.
<!-- Vertical Carousel --> <div class="px-slider" data-direction="ttb" data-items="3"> <!-- Card Block --> <div class="mb-20 post-card"> <div class="pd-20 bg-white border-1 radius-sm border-alpha-10"> <!-- Content --> <h4 class="fs-16">....</h4> <p class="fs-12 mb-0 overflow-hidden">.....</p> </div> </div> <!-- // Card Block --> ... more blocks .... </div> <!-- // Vertical Carousel --> <!-- Vertical Slider --> <div class="px-slider mb-30" data-controls="1" data-direction="ttb"> <div class="px-item pdy-75 pdx-30 tx-align-center bg-alpha-05">Slide #01 Testing</div> <div class="px-item pdy-75 pdx-30 tx-align-center bg-alpha-05">Slide #02 Testing</div> <div class="px-item pdy-75 pdx-30 tx-align-center bg-alpha-05">Slide #03 Testing</div> <div class="px-item pdy-75 pdx-30 tx-align-center bg-alpha-05">Slide #04 Testing</div> </div> <!-- // Vertical Slider -->
//====> Activate Sliders <====//
Phenix('.px-slider').slider({direction: 'ttb'});
News Slider Example
in the next example, we will use the same options that we used on the gallery slider, and the vertical slider above to create another synced slider, with a vertical small cards slider.
Slide #01 Testing
learn how to build any kind of carousel and sliders, with the amazing third-party plugin SplideJS in combination with phenix.
Slide #02 Testing
learn how to build any kind of carousel and sliders, with the amazing third-party plugin SplideJS in combination with phenix.
Slide #03 Testing
learn how to build any kind of carousel and sliders, with the amazing third-party plugin SplideJS in combination with phenix.
Slide #04 Testing
learn how to build any kind of carousel and sliders, with the amazing third-party plugin SplideJS in combination with phenix.
Slide #01 Card
Learn how to build with Phenix CSS Utilities and Javascript Methods.
Slide #02 Card
Learn how to build with Phenix CSS Utilities and Javascript Methods.
Slide #03 Card
Learn how to build with Phenix CSS Utilities and Javascript Methods.
Slide #04 Card
Learn how to build with Phenix CSS Utilities and Javascript Methods.
<!-- Grid --> <div class="row"> <!-- 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 tx-align-center bg-alpha-05 position-rv"> <!-- image --> <img src="https://via.placeholder.com/900x500.png?text=01" alt="" class="radius-md"> <!-- content--> <div class="radius-md radius-bottom pdy-15 pdx-30 position-ab pos-bottom-0 pos-start-0 pos-end-0 bg-alpha-50"> <h4 class="fs-16 color-white">....</h4> <p class="mb-0 fs-14 color-white">.....</p> </div> <!-- //content--> </div> <!-- // Item --> ... more items ... </div> <!-- // Main Slider --> </div> <!-- 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="mb-15 post-card"> <div class="pdy-15 pdx-20 bg-white border-1 radius-sm border-alpha-10"> <!-- Content --> <h4 class="fs-16">....</h4> <p class="fs-12 mb-0 tx-nowrap">....</p> </div> </div> <!-- // Card Block --> ... more items ... </div> <!-- // Vertical Carousel --> </div> <!-- // Column --> </div> <!-- // Grid -->
//====> Activate Sliders <====//
Phenix('.px-slider').slider();
/*==== Coloring the Current Active Card ====*/
#news-thumbnails .post-card:not() .bg-white {transition: all 300ms linear;}
#news-thumbnails .post-card.is-active .bg-white {
color: #FFF;
background-color: var(--primary-color);
}
Multimedia Example
in the next example, we will use videos and iframes inside our slider and see how it pauses the video if its slide is not visible anymore and all that happens dynamically,
what happens is the .slider() checks for any <video> in the slide, after it has been inactivated, and watch over its status to pause it when the slide becomes inactive, and for the iframe, you know that it stops the video not paused it.
<!-- Multimedia Slider --> <div class="px-slider" data-controls="1" data-pause-hover="1"> <!-- item --> <div class="px-item"> <!-- Normal Image --> <img src="http://via.placeholder.com/610x345?text=Regular Image" alt="" class="fluid"> </div> <!-- item --> <div class="px-item" data-media="1"> <!-- Aspect Ratio Video --> <div class="px-media ratio-16x9" data-type="video"> <video src="https://phenixthemes.com/sample.mp4" controls></video> </div> <!-- // Aspect Ratio Video --> </div> <!-- item --> <div class="px-item" data-media="1"> <!-- Aspect Ratio Embed --> <div class="px-media ratio-16x9" data-type="iframe"> <iframe src="https://www.youtube.com/embed/rId62CdFGg4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> <!-- // Aspect Ratio Embed --> </div> <!-- item --> <div class="px-item"> <!-- Aspect Ratio Element --> <div class="px-media ratio-16x9" data-src="http://via.placeholder.com/720x480?text=Mixed Media" data-type="mixed-bg" data-gradient="rgba(0,196,255, 0.5), rgba(26,105,244, 0.5)"></div> </div> <!-- item --> <div class="px-item"> <!-- Aspect Ratio Element --> <div class="px-media ratio-16x9" data-src="http://via.placeholder.com/720x480?text=Media Background" data-gradient="rgba(0,196,255, 0.5), rgba(26,105,244, 0.5)"></div> </div> <!-- // item --> </div> <!-- // Multimedia Slider -->
//====> Activate Sliders <====//
Phenix('.px-slider').slider();
//====> Activate Multimedia <====//
Phenix('[data-src]').multimedia();
Slider on Demand
in the next example, we will use intersection option to activate a method on our slider using phenix.inView() to lazyload the slider mount to when it’s visible to the user on the viewport, kind of like the splide.js extension Intersection but without the extension.
<!-- Slider Wrapper --> <div class="px-slider" data-intersection="1"> <!-- Slide Item --> <div class="px-item">...</div> <!-- Slide Item --> <div class="px-item">...</div> <!-- // Slide Item --> </div> <!-- // Slider Wrapper -->
//====> Activate Sliders <====//
Phenix('.px-slider').slider({ intersection : true });
Grid Slider
in the next example, we will use the splide.js extension Grid to create a slider with grid layout as row/columns
JS Options
in the table below you can find all options available with splide.js and phenix.slider().
| Options | Description | Default | Data Type |
|---|---|---|---|
| slide, loop, and fade | loop | string |
focus | # of the slide should be active if there are multiple slides on a page | 0 | |
| the number of slides to show at once. | 1 | |
| the number of slides to move at once. | 1 | |
| sliding animation transition speed in milliseconds | 700 | |
| and the autoplay interval duration in milliseconds. | 6000 | |
| enable/disable autoplay. | true | |
| enable arrow buttons and add classes to them. | false | |
| replace phenix controls buttons classes with a new one. | none | |
| enable pagination and add classes to it. | false | |
| replace phenix pagination buttons classes with a new one. | none | |
| determines the page direction rtl or ltr | dynamic | |
| array of objects for screen width breakpoints to apply different options in each screen. | none | |
| Defines the start index of the first slide. | 0 | |
| define a selector for another slider to sync | false | |
| and define if the synced thumbnails are navigation buttons between slides. | false | |
| enable/disable pause on hover | false | |
| enable/disable mounting the slider only when it’s visible in the viewport. | false | |
Data Options
in the table below you can find all data-attributes options on the slider component wrapper, available with splide.js and phenix.slider().
| Options | Description | Default | Data Type |
|---|---|---|---|
| slide, loop, fade | loop | string |
data- | the number of slides to show at once from extra small screens and up. | 1 | |
data | the number of slides to show at once from small screens and up. | —— | |
data- | the number of slides to show at once from medium screens and up. | —— | |
data- | the number of slides to show at once from large screens and up. | —— | |
data- | the number of slides to show at once from extra large screens and up. | —— | |
| determines which slide should be active if the carousel has multiple slides on a page. | 0 | |
| the number of slides to move at once. | 1 | |
| sliding animation transition speed in milliseconds | 700 | |
| and the autoplay interval duration in milliseconds. | 6000 | |
| enable/disable autoplay. | true | |
data- | enable arrow buttons and add classes to them. | false | |
| replace phenix controls buttons classes with a new one. | none | |
data- | enable pagination and add classes to it. | false | |
| replace phenix pagination buttons classes with a new one. | none | |
| determines the page direction rtl or ltr | dynamic | |
| Defines the start index of the first slide. | 0 | |
| define a selector for another slider to sync | false | |
| and define if the synced thumbnails are navigation buttons between slides. | false | |
data-pause-hover | enable/disable pause on hover | false | |
| enable/disable mounting the slider only when it’s visible in the viewport. | false | |
CSS Classes
in the table below you can find all the plugin classes added with phenix to customize the slider components.
| class-name | Description |
|---|---|
| phenix main slider component class-name. |
| phenix slider controls wrapper class-name |
.px-slider-button | phenix slider controls buttons class-name |
| phenix slider controls previous button class-name |
| phenix slider controls next button class-name |
| phenix slider pagination wrapper class-name |
| phenix slider pagination buttons class-name |
| slides and pagination active class-name |
| visible slides class-name |
[aria-hidden="true"] | hidden slides attribute |