Last updated: 01/01/22
keen-slider is a very lightweight library for carousels that has a very smooth and natural touch feeling.
Made ADA COMPLIANT by Simplistic, adding features like navigation with the keyboard and indicating the corresponding elements that can be on focus. We have also introduced other custom features in the base code to allow our Theme to support certain configurations that do not come by default in the library.
Include in your Theme the latest keen_slider.js and keen_slider.css files that can be found in the latest version of Simplistic's Theme.
keen-slider will be initialized on a container, and the direct children of that container must be the slides.
We suggest to stick to the following HTML structure and classes to make sure it works properly:
<div class="keen"> <!-- this wrapper is not required, but the Arrows/Dots/navBar should be inside this wrapper for default styling -->
<div class="keen-slider"> <!-- this is the required container, where the library is initialized. Use the class "keen-slider" for default styling -->
<div class="keen-slider-slide"> <!-- the direct children of the container must be the slides -->
This is a slide.
</div><!-- Do NOT include any other element inside the container, only the slides -->
</div>
<button class="keen-arrow prev"> <!-- the BACK arrow need the "keen-arrow prev" classes for default styling. Arrows can be moved around inside the .keen wrapper -->
{% include 'icons', icon: 'arrow-left' %}
</button>
<button class="keen-arrow next"> <!-- the NEXT arrow need the "keen-arrow next" classes for default styling. Arrows can be moved around inside the .keen wrapper -->
{% include 'icons', icon: 'arrow-left' %}
</button>
<div class="keen-dots"></div> <!-- optional (when dots are enabled), use this class for default styling. This element can be moved around inside the .keen wrapper -->
<div class="keen-nav-bar"></div> <!-- optional (when navBar is enabled), use this class for default styling. This element can be moved around inside the .keen wrapper -->
</div>
var slider = document.querySelector(".keen-slider"); // be more specific like "#shopify-section-{{section.id}} .keen-slider"
new KeenSlider(slider, {
mode: "free-snap",
loop: true,
slidesPerView: 2.25,
dots: '.keen-dots', // be more specific like "slider.closest('.keen').querySelector('.keen-dots')" or "#shopify-section-{{section.id}} .keen-dots"
navBar: '.keen-nav-bar', // be more specific...
prevButton: '.keen-arrow.prev', // be more specific...
nextButton: '.keen-arrow.next' // be more specific...
});
Option | Description |
---|---|
autoAdjustSlidesPerView |
New feature by simplistic: July 2021
Type: boolean
Default: false
When the slides available are LESS than the slidesPerView (aka. there are not enough slides to fill the space of the first page), and this option is set to "true", the slides will be forced to enlarge and fill all the available space.
|
automove |
New feature by simplistic: December 2021
Type: number
Default: 0
This option will move the slides automatically at a constant pace. The value entered here is the speed of the movement (normally between 1 and 4, 1 being slow and 4 fast). Accepts decimals.
Example
|
autoplay |
New feature by simplistic: July 2021
Type: number
Default: 0
This option will activate the "Next" action to move the slider automatically after a given interval of time. The value entered here is the interval, in seconds. It accepts decimals.
Example
|
breakpoints |
Type: object
Default: undefined
Changes the options or event hooks for a given breakpoint by overriding the options at the root level. Each key has to be a valid media query string e.g. '(orientation: portrait) and (min-width: 500px)'. Each value has to be an object with options and/or event hooks. Note: If multiple media queries match, the last one is applied. See the example below:
Example:
|
centered |
Type: boolean
Default: false
Active slide will be centered - only makes sense when slidesPerView is greater than
1 |
controls |
Type: boolean
Default: true
Control slider with mouse or touch gestures
|
customAnimation |
New feature by simplistic: September 2021
Type: string
Default: false
The word entered as value will be added as a class to the slider wrapper (unless it's 'false'). The animation for 'fade' is ready to use (comes by default in the stylesheet). More custom CSS animations can be added to the stylesheet.
Important: this option will make the slides be one over each other (with position: absolute) instead of one next to each other. Therefore, you may also want to add the property setContainerHeight to true to auto calculate the height of the slider (based on the height of its slides), otherwise you must set a height with css to the .keen-slider element.
Example:
Example
|
dots |
New feature by simplistic: July 2021
Type: object
Default: false
Injects the dots to the element indicated as value. The element must be empty because its inner HTML will be replaced.
Example:
Example
|
drag |
New feature by simplistic: December 2021
Type: boolean
Default: true
Enables or disables mouse and touch control.
|
dragSpeed |
Type: number
Default: 1
Adjust the speed that is translated to the slider when dragging - minus values would invert the swipe direction
|
duration |
Type: number
Default: 500
Set the animation duration for the "snap"-mode
|
initial |
Type: number
Default: 0
Index of the initial activated slide
|
loop |
Type: boolean
Default: false
Infinite loop of slides
|
mode |
Type: "snap" | "free-snap" | "free"
Default: "snap"
Sets the mode of movement of the slider
|
navBar |
New feature by simplistic: December 2021
Type: object
Default: false
Injects the navigation bar to the element indicated as value. The element must be empty because its inner HTML will be replaced.
Example:
Example
|
navBarType |
New feature by simplistic: December 2021
Type: "scroll" | "progress"
Default: scroll
Sets the type of navigation bar.
Important: the "progress" bar will not work correctly on infinite carousels, it just makes sense for sliders that have a begining and ending. So please set the option loop to false if you want to use the progress bar.
Example:
Example of both types
|
nextButton |
New feature by simplistic: July 2021
Type: object
Default: false
Indicates which element from the DOM will trigger the NEXT function (scrolling the quantity of slides set in the slidesToScroll option).
Example:
Example
|
prevButton |
New feature by simplistic: July 2021
Type: object
Default: false
Indicates which element from the DOM will trigger the PREV function (scrolling the quantity of slides set in the slidesToScroll option).
Example:
Example
|
pauseOnHover |
Type: boolean
Default: true
Will pause the movement (autoplay or automove) when you hover the mouse over the slider.
Example
|
preventEvent |
Type: string
Default: "data-keen-slider-pe"
Name of the attribute that prevents the events from the slider on the element
|
resetSlide |
Type: boolean
Default: false
Reset to initial when the breakpoint changes
|
rtl |
Type: boolean
Default: false
Set the direction in which the slides are positioned to right-to-left
|
rubberband |
Type: boolean
Default: true
Noticeable when the slider is NOT on the loop mode. Adds a bouncing effect when you reach the beginning or the end of the slider and try to keep scrolling in that direction. This effect is automatically turned OFF when you're scrolling with the mouse or trackpad on desktop (to prevent a bad UX).
Example:
Example (on/off)
|
setContainerHeight |
New feature by simplistic: July 2021
Type: boolean
Default: false
Automatically gets the height of the taller slide, and sets it to the .keen-slider element (the parent of the slides). This is useful for custom animations like Fade, where the slides are positioned with "positon: absolute", therefore the container needs to have a defined height (but it's ooptional, you can also set the height of the .keen-slider manually with css).
|
slides |
Type: DOMString | Function | HtmlElement[] | number
Default: ".keen-slider-slide"
|
slidesActiveClass |
New feature by simplistic: July 2021
Type: string
Default: active
The value entered will be set as css class of the active slide.
|
slidesPerView |
Type: number
Default: 1
Number of slides per view. It accepts decimals, such as 2.5 (two slides and a half will be visible per page).
|
slidesToScroll |
New feature by simplistic: July 2021
Type: number
Default: 1
Number of slides to scroll when the "Next" button is pressed. It accepts decimals, such as 2.5 (two slides and a half will be visible per page).
|
spacing |
Type: number
Default: 0
Spacing between slides in pixel
|
vertical |
Type: boolean
Default: false
Set the slider direction to vertical
|
wheel |
New feature by simplistic: December 2021
Type: boolean
Default: true
Enables/disables the scrolling the ability to move the slider using the wheel of the mouse or the scrolling geatures of the trackpad. When disabled, you can still move it freely by drag/drop with your mouse or trackpad, but not with the scrolling wheel or gesture.
Example of disabled wheel
|
The following event hooks are available and can be set during initialization, just like the options. Every event hook comes with the instance of the slider.
new KeenSlider('#my-slider', {
created: slider => {
console.log(slider.details())
}
})
Event | Description |
---|---|
afterChange | is fired after an animation is finished or the slider position is changed externally or internally |
beforeChange | is fired before an animation is finished or the slider position is changed externally or internally |
mounted | is fired after the slider is mounted to a container and the events are initialized |
created | is fired after the slider has been initialized for the first time |
slideChanged | is fired when the currently visible slide has changed |
dragEnd | is fired when the dragging of the container has ended |
dragStart | is fired when the dragging of the container has started |
move | is fired every time the slider changes the position |
destroyed | is fired after the slide is destroyed |
Event | Description |
---|---|
controls |
Param: active(boolean)
Activate or deactivate touch or mouse controls of the slider
|
details |
Returns the internal details of the slider See the examples for use cases
Example Return:
|
moveToSlide |
Param: slide(number) duration(number)
Move to given slide (absolute slide - track is infinite when loop is active!) - optionally with the duration of the animation
|
moveToSlideRelative |
Param: slide(number) nearest(boolean) duration(number)
Move to given slide (relative slide - Range 0...n-1 - n is the number of slides)
|
next | Move to next slide |
prev | Move to previous slide |
refresh |
Param: options(object)
Reinitialize slider and optionally overwrite options
|
resize | Manually trigger a resize - to recalculate width/height of slides or when a new slide was added |
destroy | Remove events and styles set by the slider - refresh() would undo this |
Numeric value, accepts decimals.
var slider = document.querySelector(".keen .keen-slider");
new KeenSlider(slider, {
slidesPerView: 2.25,
mode: "free-snap",
loop: true,
dots: '.keen .keen-dots',
prevButton: '.keen .keen-arrow.prev',
nextButton: '.keen .keen-arrow.next'
});
Numeric value, accepts decimals (but should be a round number to keep the same structure when moving the slider).
var slider = document.querySelector(".keen .keen-slider");
new KeenSlider(slider, {
slidesPerView: 3.25,
slidesToScroll: 3,
mode: "free-snap",
loop: true,
dots: '.keen .keen-dots',
prevButton: '.keen .keen-arrow.prev',
nextButton: '.keen .keen-arrow.next'
});
var slider = document.querySelector(".keen .keen-slider");
new KeenSlider(slider, {
mode: "free-snap",
loop: true,
slidesPerView: 2,
dots: '.keen .keen-dots',
prevButton: '.keen .keen-arrow.prev',
nextButton: '.keen .keen-arrow.next'
});
var slider = document.querySelector(".keen .keen-slider");
new KeenSlider(slider, {
centered: true,
mode: "free-snap",
loop: true,
slidesPerView: 2,
dots: '.keen .keen-dots',
prevButton: '.keen .keen-arrow.prev',
nextButton: '.keen .keen-arrow.next'
});
Knowing that the centered slide has the class "active", we could create an animation like this:
.keen-slider-slide .wrap {transform: scale(0.8); opacity: 0.5;}
.keen-slider-slide.active .wrap {transform: scale(1); opacity: 1;}
var slider = document.querySelector(".keen .keen-slider");
new KeenSlider(slider, {
centered: true,
mode: "snap",
loop: true,
slidesPerView: 2,
dots: '.keen .keen-dots',
prevButton: '.keen .keen-arrow.prev',
nextButton: '.keen .keen-arrow.next'
});
The .keen-slider element of a Vertical slider must have a height set.
.keen-slider {height: 30em;}
var slider = document.querySelector(".keen .keen-slider");
var sliderObj = new KeenSlider(slider, {
vertical: true,
mode: "free-snap",
loop: true,
slidesPerView: 2,
dots: '.keen .keen-dots',
prevButton: '.keen .keen-arrow.prev',
nextButton: '.keen .keen-arrow.next',
});
The .keen-slider element of a Vertical slider must have a height set.
.keen-slider {height: 30em;}
.keen .keen-dots {position: absolute; top: 0; right: 1em; width: auto; height: 100%; margin: 0;}
var slider = document.querySelector(".keen .keen-slider");
var sliderObj = new KeenSlider(slider, {
vertical: true,
centered: true,
mode: "free",
loop: true,
slidesPerView: 2,
dots: '.keen .keen-dots',
prevButton: '.keen .keen-arrow.prev',
nextButton: '.keen .keen-arrow.next',
});
Example of Loop turned off:
var slider = document.querySelector(".keen .keen-slider");
new KeenSlider(slider, {
mode: "free-snap",
loop: false,
slidesPerView: 2.25,
dots: '.keen .keen-dots',
prevButton: '.keen .keen-arrow.prev',
nextButton: '.keen .keen-arrow.next'
});
Noticeable when the slider is NOT on the loop mode. Adds a bouncing effect when you reach the beginning or the end of the slider and try to keep scrolling in that direction (similar effect as in iOS).
This effect is automatically turned OFF when you're scrolling with the mouse or trackpad on desktop (to prevent a bad UX). Try dragging-dropping with the mouse instead, or scrolling on a mobile phone, to notice the difference between true/false.
var slider = document.querySelector(".keen .keen-slider");
new KeenSlider(slider, {
rubberband: true,
mode: "free-snap",
loop: false,
slidesPerView: 2.25,
navBar: '.keen .keen-nav-bar',
prevButton: '.keen .keen-arrow.prev',
nextButton: '.keen .keen-arrow.next'
});
var slider = document.querySelector(".keen .keen-slider");
new KeenSlider(slider, {
rubberband: false,
mode: "free-snap",
loop: false,
slidesPerView: 2.25,
navBar: '.keen .keen-nav-bar',
prevButton: '.keen .keen-arrow.prev',
nextButton: '.keen .keen-arrow.next'
});
Although the spacing is added between all the slides, the first and last slides will get to the edge of the carousel container, so it's easier to match the design.
var slider = document.querySelector(".keen .keen-slider");
var sliderObj = new KeenSlider(slider, {
spacing: 15,
mode: "free-snap",
loop: true,
dots: '.keen .keen-nav-bar',
prevButton: '.keen .keen-arrow.prev',
nextButton: '.keen .keen-arrow.next'
});
If we want to apply a padding/offset on the left side on a LOOPING carousel (infinite), we will have to set the spacing option to 0 in the javascript, and set a padding-left to the items in css.
Designers: please note that the separation between the edge of the viewport and the first slide, must be the same as the separation between each slide (not larger, not smaller).
.keen .keen-slider-slide {padding-left: 15px;}
.keen .keen-arrows,
.keen .keen-dots {padding-left: 15px;}
var slider = document.querySelector(".keen .keen-slider");
var sliderObj = new KeenSlider(slider, {
spacing: 0,
mode: "free-snap",
loop: true,
slidesPerView: 1.25,
dots: '.keen .keen-dots',
prevButton: '.keen .keen-arrow.prev',
nextButton: '.keen .keen-arrow.next'
});
Please note: If you don't mind that the carousel DOESN'T LOOP (isn't infinite), we have more flexibility for the paddings. Then you can apply this solution where we play with the overflows.
The shadow of the slides gets cut off on the edges of the carousel. This happens because the .keen-slider element (the parent of the slides) has overflow: hidden, and we can't remove that. We can't even add a padding to the .keen-slider element because it will mess up the calculations of the next/prev steps.
.keen .keen-slider {margin: 0 -10px;}
.keen .keen-slider-slide {padding: 10px;}
.keen .keen-slider-slide .wrap {box-shadow: 4px 4px 9px rgb(0,0,0,0.5);}
var slider = document.querySelector(".keen .keen-slider");
var sliderObj = new KeenSlider(slider, {
spacing: 0,
mode: "free-snap",
loop: true,
slidesPerView: 3,
dots: '.keen .keen-dots',
prevButton: '.keen .keen-arrow.prev',
nextButton: '.keen .keen-arrow.next'
});
The difference is more noticeable on Mobile Phones or when you move the carousel with drag-and-drop with the mouse.
The slides will scroll based on the number set for slidesToScroll (default: 1), and at the end of the animation they will adjust/snap to match the original position settings.
var slider = document.querySelector(".keen .keen-slider");
new KeenSlider(slider, {
mode: "snap",
loop: true,
spacing: 15,
slidesPerView: 2,
dots: '.keen .keen-dots',
prevButton: '.keen .keen-arrow.prev',
nextButton: '.keen .keen-arrow.next'
});
The slides will scroll freely based on the strength and length of the scrolling movement, and at the end of the animation they will stay exactly where you left them (even if they're not symmetric).
var slider = document.querySelector(".keen .keen-slider");
new KeenSlider(slider, {
mode: "free",
loop: true,
spacing: 15,
slidesPerView: 2,
dots: '.keen .keen-dots',
prevButton: '.keen .keen-arrow.prev',
nextButton: '.keen .keen-arrow.next'
});
The slides will scroll freely based on the strength and length of the scrolling movement, and at the end of the animation they will adjust/snap to match the original position settings.
var slider = document.querySelector(".keen .keen-slider");
new KeenSlider(slider, {
mode: "free-snap",
loop: true,
spacing: 15,
slidesPerView: 2,
dots: '.keen .keen-dots',
prevButton: '.keen .keen-arrow.prev',
nextButton: '.keen .keen-arrow.next'
});
The option 'wheel' turns on/off the ability to move the slider using the wheel of the mouse or the scrolling geatures of the trackpad. When disabled, you can still move it freely by drag/drop with your mouse or trackpad, but not with the scrolling wheel or gesture. It's set to true by default, let's disable it in this example:
var slider = document.querySelector(".keen .keen-slider");
new KeenSlider(slider, {
wheel: false,
mode: "free",
loop: true,
spacing: 15,
slidesPerView: 2,
dots: '.keen .keen-dots',
prevButton: '.keen .keen-arrow.prev',
nextButton: '.keen .keen-arrow.next'
});
We can achieve this by enabling the dots, and adding the numbers with a CSS counter.
.keen-dots {counter-reset: line-number 0;}
.keen-dots-dot {counter-increment: line-number 1;}
.keen-dots-dot:after {content: counter(line-number, decimal);}
var slider = document.querySelector(".keen .keen-slider");
new KeenSlider(slider, {
mode: "free-snap",
loop: true,
spacing: 15,
slidesPerView: 2,
dots: '.keen .keen-dots',
prevButton: '.keen .keen-arrow.prev',
nextButton: '.keen .keen-arrow.next'
});
The .keen-slider element of a Vertical slider must have a height set.
The nav bar must be placed next to the slider with css or helper classes.
.keen-slider {height: 30em;}
var slider = document.querySelector(".keen .keen-slider");
var sliderObj = new KeenSlider(slider, {
vertical: true,
mode: "free-snap",
slidesPerView: 2,
loop: false,
navBar: '.keen .keen-nav-bar',
navBarType: 'scroll',
prevButton: '.keen .keen-arrow.prev',
nextButton: '.keen .keen-arrow.next',
});
This option changes the options for a given breakpoint by overriding the options at the root level.
var slider = document.querySelector(".keen .keen-slider");
new KeenSlider(slider, {
mode: "free",
spacing: 15,
loop: true,
dots: '.keen .keen-dots',
prevButton: '.keen .keen-arrow.prev',
nextButton: '.keen .keen-arrow.next'
breakpoints: {
'(min-width: {{settings.breakpoint_tablet | plus: 1}}px)': {
slidesPerView: 2.25,
center: false
},
'(min-width: {{settings.breakpoint_mobile | plus: 1}}px) and (max-width: 900px)': {
slidesPerView: 2,
centered: true
},
'(max-width: {{settings.breakpoint_mobile}})': {
slidesPerView: 1.25,
centered: true,
spacing: 0
}
}
});
You can hide them with CSS, or using the corresponding Helper CSS Classes on the elements (such as: large--show medium-down--hide, large--hide medium-down--show).
In this example we're hiding the dots and arrows on Tablets and Mobile:
<!-- Use the helpers to hide the arrows or dots on the corresponding breakpoint. -->
<button class="keen-arrow prev medium-down--hide">
[...]
</button>
<button class="keen-arrow next medium-down--hide">
[...]
</button>
<div class="keen-dots medium-down--hide"></div>
The destroy() function will remove everything that was added by the library (the elements inside the keen-dots, the styles that were added to the slides automatically (min-width, max-width, transform), etc.
But the classes that already existed in the document will NOT be removed on destroy() (keen, keen-slider, keen-slider-slide, keen-dots, keen-arrow, etc) . If we want the classes to be removed on destroy (mainly .keen-slider and .keen-slider-slide which are the ones that may cause troubles), those elements should not have the classes by default, and we should add them via javscript afterwards.
We should also show/hide the arrows and dots in the corresponding breakpoints using the Helper CSS classes.
In this example the items are displayed in a grid on Desktop and Tablet, and as a Slider on Mobile.
<div class="keen">
<!-- replace the keen-slider and keen-slider-slide classes with different ones -->
<div class="items-wrapper">
<div class="item">
[...]
</div>
</div>
<!-- use the CSS helper classes to show/hide the arrows and dots in the corresponding breakpoint -->
<button class="keen-arrow prev hide medium-down--show">
[...]
</button>
<button class="keen-arrow next hide medium-down--show">
[...]
</button>
<div class="keen-dots hide medium-down--show"></div>
</div>
var slider;
var sliderObj;
var itemsWrapper = document.querySelector('.keen .items-wrapper');
function initSlider() {
// Add the keen classes to the corresponding elements
itemsWrapper.classList.add('keen-slider');
itemsWrapper.querySelectorAll(':scope > div').forEach((item)=>{;
item.classList.add('keen-slider-slide')
});
// Init the keen slider
slider = document.querySelector(".keen .keen-slider");
sliderObj = new KeenSlider(slider, {
spacing: 15,
mode: "free",
loop: true,
slidesPerView: 2.25,
dots: '.keen .keen-dots',
prevButton: '.keen .keen-arrow.prev',
nextButton: '.keen .keen-arrow.next',
breakpoints: {
'(max-width: {{settings.breakpoint_mobile}})': {
slidesPerView: 1.5,
centered: true,
spacing: 0
}
}
});
// Optional, remove the classes that make the elements display as a grid:
itemsWrapper.classList.remove('grid');
itemsWrapper.querySelectorAll(':scope > div').forEach((item)=>{
item.classList.remove('grid-item', 'one-third')
});
}
function destroySlider() {
// Destroy the keen slider:
if(sliderObj) {
sliderObj.destroy();
sliderObj = false;
}
// Remove the keen classes to the elements:
itemsWrapper.classList.remove('keen-slider');
itemsWrapper.querySelectorAll(':scope > div').forEach((item)=>{
item.classList.remove('keen-slider-slide');
});
// Optional, add the classes that make the elements display as a grid:
itemsWrapper.classList.add('grid');
itemsWrapper.querySelectorAll(':scope > div').forEach((item)=>{
item.classList.add('grid-item', 'one-third')
});
}
function updateSlider() {
if($s.media.isSmall) {
initSlider();
} else {
destroySlider();
}
}
window.addEventListener('mediaChange', updateSlider);
updateSlider();
The word that we pass to the customAnimation option will be set as a class on the keen-slider element.
The property setContainerHeight: true, is required so that the slides can take up the corresponding space (otherwise they will not show up cause they have position: absolute on this mode).
The styles for a "fade" effect is already included in the keen_slider.css, therefore if you set customAnimation to "fade", that effect will automatically be applied.
var slider = document.querySelector(".keen .keen-slider");
new KeenSlider(slider, {
customAnimation: 'fade',
setContainerHeight: true,
slidesPerView: 1,
mode: "snap",
loop: true,
dots: '.keen .keen-dots',
prevButton: '.keen .keen-arrow.prev',
nextButton: '.keen .keen-arrow.next'
});
Knowing that the active slide always have the class "active", we can apply any custom animations by our own to the stylesheet, either to the slides themselves or to the inner elements, for example, for a "zoom" animation we could do the following:
@keyframes zoomIn {
0%{opacity:0;transform:scale(0.8);}
100%{opacity:1;transform:none}
}
@keyframes fadeOut {
0%{opacity:1;}
100%{opacity:0;}
}
.keen-slider.custom-animation.zoom .keen-slider-slide {animation-name: fadeOut;}
.keen-slider.custom-animation.zoom .keen-slider-slide.active {animation-name: zoomIn;}
var slider = document.querySelector(".keen .keen-slider");
new KeenSlider(slider, {
customAnimation: 'zoom',
setContainerHeight: true,
slidesPerView: 1,
mode: "snap",
loop: true,
dots: '.keen .keen-dots',
prevButton: '.keen .keen-arrow.prev',
nextButton: '.keen .keen-arrow.next'
});
If we want the slides to zoom in/out when they slide in/out instead of staying put, it's even easier. Do not use the customAnimation option, just do it with css.
Keep in mind that in this case the animation should be applied not to the keen-slider-slide object but to its inner content (because the slide is already being animated differently for the sliding movement):
.keen-slider .keen-slider-slide .wrap {-webkit-transform: scale(0.8); transform: scale(0.8);}
.keen-slider .keen-slider-slide.active .wrap {-webkit-transform: scale(1); transform: scale(1);}
var slider = document.querySelector(".keen .keen-slider");
new KeenSlider(slider, {
slidesPerView: 1,
mode: "snap",
loop: true,
dots: '.keen .keen-dots',
prevButton: '.keen .keen-arrow.prev',
nextButton: '.keen .keen-arrow.next'
});
Or leave the default Slide animation (remove the customAnimation and setContainerHeight properties) and apply an effect to the inner elements of the Active slides like this:
@keyframes fadeInUp {
0%{opacity:0;transform:translate3d(0,50%,0)}
100%{opacity:1;transform:none}
}
@keyframes fadeOut {
0%{opacity:1;}
100%{opacity:0;}
}
.keen-slider-slide .title {animation-name: fadeOut; animation-delay: 0.2s; animation-duration: 1s; animation-fill-mode: both;}
.keen-slider-slide .btn {animation-name: fadeOut; animation-delay: 0.5s; animation-duration: 1s; animation-fill-mode: both;}
.keen-slider-slide.active .title,
.keen-slider-slide.active .btn {animation-name: fadeInUp;}
var slider = document.querySelector(".keen .keen-slider");
new KeenSlider(slider, {
slidesPerView: 1,
mode: "snap",
loop: true,
dots: '.keen .keen-dots',
prevButton: '.keen .keen-arrow.prev',
nextButton: '.keen .keen-arrow.next'
});
The value is the interval in seconds (accepts decimals).
var slider = document.querySelector(".keen .keen-slider");
new KeenSlider(slider, {
autoplay: 1,
pauseOnHover: false,
slidesPerView: 1.5,
centered: true,
mode: "snap",
loop: true,
dots: '.keen .keen-dots',
prevButton: '.keen .keen-arrow.prev',
nextButton: '.keen .keen-arrow.next'
});
The value is the scrolling speed (normally between 1 and 4, 1 being slow and 4 fast). Accepts decimals.
var slider = document.querySelector(".keen .keen-slider");
new KeenSlider(slider, {
automove: 1,
pauseOnHover: true,
slidesPerView: 1.5,
centered: true,
mode: "snap",
loop: true,
dots: '.keen .keen-dots',
prevButton: '.keen .keen-arrow.prev',
nextButton: '.keen .keen-arrow.next'
});
Important:
For this example, we will have to play with the overflow of the section and the keen-slider. This option doesn't work with Loop carousels (it would have a glitch at the end), but it doesn't really make sense with loop anyway.
.my-section-wrapper {overflow: hidden;}
.keen-slider {overflow: visible;}
<div class="container-left container-right"> <!-- wrap the slider in a div with the .container-left class to set up the container only on the left side (while the right side reaches the edge of the screen), that's what you will see initially. Then also add the .container-right class too so that when the slider reaches the end, it aligns to the right side of the container too. This last piece is optional, but desired. -->
<div class="keen-slider">
<div class="keen-slider-slide">
This is a slide.
</div>
</div>
</div>
var slider = document.querySelector(".keen .keen-slider");
new KeenSlider(slider, {
loop: false, /* This is required for this demo */
mode: "free",
spacing: 15,
navBar: '.keen .keen-nav-bar',
navBarType: 'progress',
prevButton: '.keen .keen-arrow.prev',
nextButton: '.keen .keen-arrow.next',
breakpoints: {
'(min-width: {{settings.breakpoint_tablet | plus: 1}}px)': {
slidesPerView: 3
},
'(max-width: {{settings.breakpoint_tablet}})': {
slidesPerView: 1.25
}
}
});
This is easier, and it can be on Loop mode. No additional CSS required, other than the helper class .container-left
Take a look (and compare it with the example above to understand the differences):
<div class="container-left container-right"> <!-- wrap the slider in a div with the .container-left class to set up the container only on the left side (while the right side reaches the edge of the screen), that's what you will see initially. Then also add the .container-right class too so that when the slider reaches the end, it aligns to the right side of the container too. This last piece is optional, but desired. -->
<div class="keen-slider">
<div class="keen-slider-slide">
This is a slide.
</div>
</div>
</div>
var slider = document.querySelector(".keen .keen-slider");
new KeenSlider(slider, {
loop: true, /* Compared to the previous example, this can be true (it won't glitch), though for this example I will use "false" to compare easily with the previous example */
mode: "free",
spacing: 15,
dots: '.keen .keen-dots',
prevButton: '.keen .keen-arrow.prev',
nextButton: '.keen .keen-arrow.next',
breakpoints: {
'(min-width: {{settings.breakpoint_tablet | plus: 1}}px)': {
slidesPerView: 3.35
},
'(max-width: {{settings.breakpoint_tablet}})': {
slidesPerView: 1.25
}
}
});