Slider

Want to raise your website design to the next level? You can do so using sliders!

Sliders are intuitive tools for navigating content within a website, we will guide you through the various aspects of incorporating and customizing sliders.

How to add

You can add a slider by opening your element panel, you can find it by going to the Layer panel and clicking on the + sign (or using the element panel shortcut “a”) here under Utilities you will have the Slider.

Once it’s added you can see the Slider on the Layer panel and on your canvas.

Structure

The slider is constituted by the following elements:

  • Slider - This is the parent element and everything related to the slider will be under it.

  • Slides - This is where you can add additional slides, by default you will have three slides but you can add additional slides by clicking on the + sign in front of this layer.

  • Slide - The slide itself, by default will have an image inside, however, you can customize it however you want and add other elements.

  • Navigation - The arrows you see on the canvas are the navigation, your website visitors will be able to click on the arrows to navigate and see other slides.

Pagination - Other than navigation, to navigate to other slides we also give you pagination which is the dots you see on your canvas under the slide.

Settings

With the Slider element selected go to the right-hand side and click on the Settings tab.

Here you can see a Slider section, where you can customize the functionality of the slides more in-depth, keep in mind the changes made here are applied globally to all of the elements inside of your slider.

Let’s go through them!

Right next to the Slider settings text, you will see two icons of arrows, this lets you go to the previous or next slide.

Navigation: This lets you turn on or off the navigation layer we talked about above, by default it’s turned on.

Parameters

Under parameters, we have:

Group slide you can group up to ten slides and enable group sliding.

Loop here you have three options:

  • None which is selected by default

  • Loop which lets you loop your slider continuously

  • Rewind 

Behavior: You can control what behaviors your slides will use, multiple behaviors can be chosen and you aren’t restricted to just one.

  • Centered slides

  • Touch events

  • Slide to clicked slide

  • Mousewheel control

Clicking on More options gives you an additional option.

Looped slide: This is a more advanced setting, this will be needed when you are using slides with bigger widths, etc.

Pagination

Under pagination, we have:

Pagination: This lets you turn on or off the pagination element we talked about above, by default it’s turned on.

Type: You can choose between Bullet or Fraction designs.

Behavior: Clickable is turned on by default, removing it makes it so it can’t be used to navigate the slides by clicking on the pagination element.

Autoplay

Under autoplay, we have:

Autoplay: Your slides will play automatically without any input needed, this is turned off by default.

Delay: This is the amount of time it will take to go from one slide to the next, only usable if you have autoplay on.

Animation

Animations are a staple in sliders, so we give you a few options to play with on the settings, you can always find more general animations by going to the Animation tab.

Effect there are six different effects you can choose from:

  • Slide

  • Fade

  • Cube

  • Flip

  • Coverflow

  • Cards

Easing: This is the type of transition and motion you want your animation to take, there are a few options to choose from:

  • Linear

  • Ease in

  • Ease in out

  • Ease out

  • Back in

  • Back in out

  • Back out

Duration: Here you can choose how long the animation will last.

Sliders can also be used dynamically with your Ycode CMS collections and items, so you can have dynamically driven slides on your website!