Slider settings - General (Slide background image fill)

This is where you can find the slider settings.

These are the basic settings of the slider, it's name, how it can be controlled, and how it should show up.

Name

The name of your slider. It's important to give unique names, because probably you will create many sliders, and after a while, it's not that easy to find, which one is used where.

Controls
  • Mouse scroll - You can use your mouse scroll to switch your slides.
  • Mouse drag - With this option turned on you will be able to drag your slides with your cursor.

    The direction chosen at the Touch will be used as the direction for this option too.

  • Touch - Switch your slides in tablets and phones by touching them. Choose the appropriate direction.
  • Keyboard - You can turn on to be able to switch your slides with the left and right arrows on your keyboard too.
  • Tilt Expert- There are mobile phones and tablets, that can do actions, when you tilt them. With this option turned on, the slider's action will be to switch to the next or previous slide.
Thumbnail

The thumbnail of the slider which shows up at the Dashboard.

Align

You might not want our slider to have 100% width, and in this case you can choose to put your slider into the left, center or right position. (This only works, if you use either Auto or Adaptive responsiveness. If it's Auto, then the Upscale should be turned off.)

The place where you put the slider will still take up the whole 100% space, only the slider will align itself inside that 100% space, so if you want to align it next to your texts, you have to do that in the HTML code of your page/post or article!

Example:

<div style="float:left; width:30%">[slider]</div> Your text
Slide background image fill

You can set a default fill mode here, which will be used on each slide where the fill mode is set to Slider's default.

Fill mode Description Original slider size Responsive behavior
Fill Your image will cover your slide.
Fit Your whole image will be on your slide without being cropped. The image will also be in the vertical or horizontal center.
Stretch Your image will be stretched out to cover the whole slide, so if it's ratio is very different from the slider's size, it will be kind of distorted.
Center Your image will be on your slide in the center, with its original size, and it won't change it's size based on the screen's width, so it will be cropped on small screens!
Tile Your image will have its original size, and it will be repeated to cover the whole slide.
Parallax Your background will be in a fixed position, not moving lower or higher, as you scroll. Check out the sliders and video here to better understand this, and all available parallax effects. Some tablets and mobiles aren't supporting the codes necessary for this, so if you want to, you can turn it off for tablets and mobiles in here.

Shape divider 3.2.5

You can select shape dividers for your slider. You can select a separate divider for the top and bottom of the slider.

The Shape Divider is not available for the Accordion Slider Type.

At the Showcase and Carousel slider the shapes will be below the actual slide, and are below the layers at every slider type.

  • Type - You can select the look of the shape divider.
  • Color - The color of the divider. Semi-transparent colors are supported.
  • Secondary - The secondary color of the divider, which is available only at the 2 color types. Semi-transparent colors are supported.
  • Width - The width of the divider in percent.
  • Height - The height of the divider in px.
  • Flip - You can flip the divider horizontally.
  • Animate - You can animate the diver. Some dividers animate only upon loading, some of them animate continuously.
Particles 3.2.5

You can select the Particle effect for your slider. We have predefined particles which you can select, or you can generate your own at http://vincentgarreau.com/particles.js/ . When you are done Download current config (json) and paste content into the field of the Custom type particle.

The Particle Effect is not available for the Accordion Slider Type.

At the Showcase and Carousel slider the particles will be below the actual slide, and are below the layers at every slider type.

  • Color - You can change the color of the particles.
  • Line color - You can change the color of the line between the particles.
  • Speed - This is how fast the particles move on the slider. The bigger the number the faster they move.
  • Number of particles - This is the number of particles shown on the slider. The bigger the number the more particle is visible.
  • Hover - You can define an interaction between the user and the particles when the mouse is over the slider.
    • Off - Disables the interaction between the mouse cursor and the particles
    • Grab - Makes the cursor act like another particle, and connects it with the nearest particles
    • Bubble - The size of the particles which are closest to the cursor is temporarily increased.
    • Repulse - The particles move away from the cursors radius
  • Click - You can define an interaction between the user and the particles when the user clicks on the slider.
    • Off - Disables the interaction between the mouse click and the particles
    • Repulse - The particles move away from the cursor radius
    • Push - Adds new articles to the slide. Might slow down the site if the user clicks too many times.
    • Remove - Removes some particles from the slider. Might remove all particles if the user clicks too many times.
    • Bubble - The size of the particles which are closest to the cursor is temporarily increased.

Slider Type Expert

The slider type is an important part of the slider, this is defining how the slides will be on the slider. Check them out at the "Slider type" documentations in  here.