Infinite Slick Slider Blocks - User Guide

This guide explains how to use the "Infinite Slick Slider Blocks" WordPress plugin to create and display content blocks in an infinite scrolling slider with navigation buttons.

1. Using the Shortcode:

The plugin provides a shortcode [infinite_slick_slider] to insert the slider into your posts or pages.

Basic Usage:

[infinite_slick_slider]
[block]Your Content Block 1
[block]Your Content Block 2
[block]Your Content Block 3
[/infinite_slick_slider]

• Replace Your Content Block 1, Your Content Block 2, etc., with the content you want to display in each slide.

• Use [block] to separate each content block.

Adding More Blocks:

You can add as many [block] sections as you need:

[infinite_slick_slider]
[block]Content 1
[block]Content 2
[block]Content 3
[block]Content 4
[block]Content 5
[/infinite_slick_slider]

Customising the Number of Items Per Slide:

Use the items_per_slide attribute to specify how many content blocks should be visible in each slide:

[infinite_slick_slider items_per_slide="3"]
[block]Content 1
[block]Content 2
[block]Content 3
[block]Content 4
[block]Content 5
[/infinite_slick_slider]

• In this example, three content blocks will be visible at a time.

• Adjust the number as needed.

• If the number of slides matches or is lower than the items per slide, the slider will not slide.

Example with HTML and Shortcodes Inside Blocks:

You can include HTML and other shortcodes within your content blocks:

[infinite_slick_slider items_per_slide="2"]
[block]
&lt;div class="infinite-slick-slider--title"&gt;<br>Example Title One<br>&lt;/div&gt;<br>&lt;div class="infinite-slick-slider--image"&gt;<br>&lt;img src="https://url.to.image.png" alt="description of the image" loading="lazy"&gt;<br>&lt;/div&gt;<br>&lt;div class="infinite-slick-slider--description"&gt;<br>Some useful text.<br>&lt;/div&gt;<br>[block]
&lt;div class="infinite-slick-slider--title"&gt;<br>Example Title Two<br>&lt;/div&gt;<br>&lt;div class="infinite-slick-slider--image"&gt;<br>&lt;img src="https://url.to.image.png" alt="description of the image" loading="lazy"&gt;<br>&lt;/div&gt;<br>&lt;div class="infinite-slick-slider--description"&gt;<br>Some useful text.<br>&lt;/div&gt;
[/infinite_slick_slider]

3. Navigation Buttons:

The slider includes "Previous" and "Next" buttons to manually navigate the slides. These buttons are automatically added by the plugin.