About this:
Use this script to make the slider use 1 step per slide instead of rows. Flatsome uses the Flickity slider and you can manipulate it by scripting the groupCell
to use 1 groupCell.
The HTML
You can build a slider and use the slide width to make it use more slides in a single view. For product sliders you can just use the UX Builders default option. In that case you can skip this step.
[ux_slider style="container" slide_width="33%" hide_nav="true" nav_pos="outside" nav_color="dark" timer="5000" pause_hover="false"]
[row_inner]
[col_inner span__sm="12" padding="0px 10px 0px 10px"]
[ux_banner height="300px" height__sm="300px" bg="1569" bg_size="1536x1536" bg_color="rgba(255, 255, 255, 0)" bg_pos="35% 40%"]
[/ux_banner]
[/col_inner]
[/row_inner]
[row_inner]
[col_inner span__sm="12" padding="0px 10px 0px 10px"]
[ux_banner height="300px" height__sm="300px" bg="1568" bg_size="1536x1536" bg_color="rgba(255, 255, 255, 0)" bg_pos="39% 0%"]
[/ux_banner]
[/col_inner]
[/row_inner]
[row_inner]
[col_inner span__sm="12" padding="0px 10px 0px 10px"]
[ux_banner height="300px" height__sm="300px" bg="1572" bg_size="1536x1536" bg_color="rgba(255, 255, 255, 0)" bg_pos="48% 59%"]
[/ux_banner]
[/col_inner]
[/row_inner]
[row_inner]
[col_inner span__sm="12" padding="0px 10px 0px 10px"]
[ux_banner height="300px" height__sm="300px" bg="1571" bg_size="1536x1536" bg_color="rgba(255, 255, 255, 0)" bg_pos="36% 39%"]
[/ux_banner]
[/col_inner]
[/row_inner]
[row_inner]
[col_inner span__sm="12" padding="0px 10px 0px 10px"]
[ux_banner height="300px" height__sm="300px" bg="1570" bg_size="1536x1536" bg_color="rgba(255, 255, 255, 0)" bg_pos="46% 42%"]
[/ux_banner]
[/col_inner]
[/row_inner]
[/ux_slider]
The CSS
It is not mandatory but you can use this style to remove the opacity from the slider container style. The styling for opacity is only needed if you use the regular slider in the UX Builder with your own images. The product slider does not use opacity. If using only for the product slider you can skip this step.
Styling can go wherever you use your CSS. Recommended in Appearance > Customizer > Style > Custom CSS.
.slider-style-container .flickity-slider>:not(.is-selected), .slider-style-focus .flickity-slider>:not(.is-selected), .slider-style-shadow .flickity-slider>:not(.is-selected){
opacity:1;
}
The Script
Now for the last and part. Copy and paste the script into your Footer scripts. Flatsome > Advanced > Global Settings > Footer scripts.
The script edits the Flickity slider settings to use groupCells = 1
instead of default. Keep in mind that this script is going to use this setting for ALL sliders. If you want to use this for some particular slider you can add a class to the slider and check for it in the script.
<script>
document.addEventListener('DOMContentLoaded', function () {
var originalLazyFlickity = jQuery.fn.lazyFlickity
jQuery.fn.lazyFlickity = function (options) {
if (options && options.groupCells === '100%') {
options.groupCells = 1
}
originalLazyFlickity.call(this, options)
}
});
</script>
Stay Connected
Flatsome is the perfect theme for your shop, company websites or client websites. It has all the tools needed to create super fast responsive websites with amazing user experience.
Starting a project?
Looking to start a website project for a new Flatsome website or webshop? Already got a Flatsome site but looking to redesign it?
Got a question?
Want to ask a question of request more information on what we do within Flatsome? Shoot us a message or feedback.