Liyanit Responsive Slider provides flexible options for customizing the appearance of your sliders. You can adjust the slider layout, spacing, navigation, pagination, and other visual elements to match the design of your WordPress website.

The plugin is designed to work with your existing theme without requiring changes to the plugin’s core files.

Slider Layout

The slider layout determines how your slides are displayed on the frontend.

Depending on your configuration, you can control:

• Number of slides visible at a time
• Spacing between slides
• Slider width
• Slide alignment
• Navigation placement
• Pagination display

For example, you can display a single large slide or multiple slides side by side.

Number of Visible Slides

You can control the number of slides displayed simultaneously using the slides_per_view option.

For example:

[liyan_gs_slider id="123" slides_per_view="3"]

This displays three slides at the same time when the selected layout supports multiple visible slides.

For a single-slide layout:

[liyan_gs_slider id="123" slides_per_view="1"]

Spacing Between Slides

Use the space_between option to control the distance between slides.

[liyan_gs_slider id="123" space_between="20"]

The value is specified in pixels.

You can increase or decrease the value depending on the spacing required by your website design.

Navigation Arrows

Navigation arrows allow visitors to move between slides manually.

You can enable them using:

[liyan_gs_slider id="123" navigation="true"]

To hide the navigation arrows:

[liyan_gs_slider id="123" navigation="false"]

Pagination Dots

Pagination dots provide a visual indication of the current slide and the total number of slides.

Enable pagination with:

[liyan_gs_slider id="123" pagination="true"]

To hide pagination:

[liyan_gs_slider id="123" pagination="false"]

Autoplay

Autoplay automatically moves the slider between slides.

You can enable autoplay with:

[liyan_gs_slider id="123" autoplay="true"]

You can also control the transition timing using the speed attribute:

[liyan_gs_slider id="123" autoplay="true" speed="5000"]

If autoplay is not required, you can disable it:

[liyan_gs_slider id="123" autoplay="false"]

Custom CSS

For advanced visual customization, you can target the slider using CSS.

You can add a custom CSS class through the shortcode:

[liyan_gs_slider id="123" class="my-custom-slider"]

You can then target that class from your theme’s custom CSS.

For example:

.my-custom-slider {
    margin-top: 30px;
    margin-bottom: 30px;
}

You can also customize individual elements depending on the HTML structure generated by the plugin.

Using Theme Customizer CSS

If your WordPress theme provides an Additional CSS section, you can add your custom slider styles there.

Typically, this can be found under:

Appearance → Customize → Additional CSS

Add your custom CSS and save the changes.

The exact location may vary depending on your active theme and WordPress setup.