Advanced Slider and carousel

Slider/Carousel Block is a universal customizable block that can slide anything – from simple images to complex inner blocks. You can add a slider to anything

On this page we show some examples of sliders with 1 item per slide, you can place any other blocks or complex groups inside each slide.

1

Slider with inner blocksIt has also custom Slider effect

Fēnix 6X smartwatch – Pro and Sapphire Editions Black with Black Band and sport health functions

US$699.99 US$799.99
Find actual price at Garmin.com
fenix® 6X – Pro & Sapphire Editions is a GPS Smartwatch with music, Pulse Ox & Dynamic PacePro, a feature that helps you run smarter over diff…

Enduro smartwatches

US$799.99
Find actual price at Garmin.com
Garmin Enduro™ features a Power Glass™ solar charging lens that extends battery life, lightweight nylon strap, and other performance features built fo…

Instinct® Solar

US$399.99
Find actual price at Garmin.com
Instinct Solar is a smartwatch built to conquer the elements featuring a solar charging lens, GPS/GLONASS/GALILEO, and built-in training apps.
2

Slider with custom effectThis slider has also custom arrow buttons, scrollbar and custom sliding effect

Say Hello to Greenshift Sliders

Make custom sliders faster with better design

Unlimited possibilities for slider

Make custom sliders faster with better design

Best design and options

Make custom sliders faster with better design

3

Slider as Cards EffectIt has also inner block with buttons as Card

Best Accessories for this summer

Bags & Acsessories &
Lingerie & Sportswear &
Beauty & Swimwear

Best Accessories for this summer

Bags & Acsessories &
Lingerie & Sportswear &
Beauty & Swimwear

Best Accessories for this summer

Bags & Acsessories & Lingerie & Sportswear & Beauty & Swimwear

4

Vertical Slider OrientationYou can change orientation of slider

Say Hello Greenshift Sliders

Make custom sliders faster with better design

Unlimited possibilities for slider

Make custom sliders faster with better design

Best design and options

Make custom sliders faster with better design

5

Full visible items for sliderAlso, this example has Scale effect

Say Hello to Greenshift Sliders

Make custom sliders faster with better design

Unlimited possibilities for slider

Make custom sliders faster with better design

Best design and options

Make custom sliders faster with better design

6

Custom control buttons + custom effectAlso, this example has Scale effect

You can also add custom control to slider. For this, place custom elements in the same row as slider and add classes: gs-slider-control-btn gs-slideto-2. This will trigger second slide and class “active” to your control element

Say Hello to Greenshift Sliders

Make custom sliders faster with better design

Unlimited possibilities for slider

Make custom sliders faster with better design

Best design and options

Make custom sliders faster with better design

7

Slider synchronizationSynchronize two sliders together

You can synchronize two sliders together. For this, use next panel in Slider options. Each slide has own unique class, you can copy it from one slide and use as control option for another slide. You can use it as direct control and also as reverse (when two sliders synchronized with each other)

In this example, we use two sliders with different directions

Best Car for this summer

Bags & Acsessories &
Lingerie & Sportswear &
Beauty & Swimwear

Best Car for this autumn

Bags & Acsessories &
Lingerie & Sportswear &
Beauty & Swimwear

Best Car for this winter

Bags & Acsessories &
Lingerie & Sportswear &
Beauty & Swimwear

8

Full page SliderHow to make full page slider

Greenshift slider has some special features like Keyboard and mouseWheel control. This makes it available for such complex things like Full page sliders. Click on image to see the demo

9

Ken Burns EffectsEasily enable popular ken Burns effect

You can download this slider in Greenshift Library – Experimental. (click on top right blue icon in editor)

10

Parallax SliderBuild complex parallax effects

To add parallax effect, you need to enable parallax in Slider Image effects panel. You can also add parallax strength for slider images.

You can also add parallax to inner items, for this, select special data-parallax attributes.

Example of slider is available in Library – Experimental

Slider Conversions

For time saving, you can also easily convert regular Core gallery to slider. See how it works in video

You can convert also CSS grid to slider

Slider Synchronization with Containers

You can sync not only slider to slider but slider to containers or accordions. This works based on child items. For example, you have slider with 3 slides. Now, add container and put direct 3 childs to container, add specific class to container in class system and put the same class in Slider option – Container Synchronizations. Now, each child of container is paired with each slide. If you click on second child of container, this will also turn second slide. Also, each slide changing will add “active” class to paired container.

Important. This works better with Loop option and autoplay.

Check demo on Fancy Academy page

Animations inside Slider

You can also add some animations for inner elements in slider. They will be animated only when your slider item is active. For this, you can use Css transform or Animation Container.

Css transform

In Css transform panel, you can set Initial value and Active value. For initial value, set, for example 0 opacity and 40px shift y. For Active state, select 1 opacity and 0 shift.

Another way to add animation is Animation Container, which has Active Slide Trigger

Copy this post’s content
Copy code below, and paste it (CTRL+V) in content of page
«
»

One response to “Advanced Slider and carousel”

  1. Milano Avatar

    This is incredible! It’s amazingly easiest than other builders!!