A SwiperJS-based carousel, that provides support for synchronised thumbnails with content sourced from a folder relative to the home URL.
Also allows content to be sources from WP posts (e.g., content blocks)
== Description ==
-
- Images are added by adding them to a folder (hosted on the web server).
-
- Based on SwiperJS - https://swiperjs.com/
== Installation ==
-
Upload the 'ingeni-swiper-carousel' folder to the '/wp-content/plugins/' directory.
-
Activate the plugin through the 'Plugins' menu in WordPress.
-
Display the carousel using the shortcode
== Frequently Asked Questions ==
= How do a display the carousel? =
Use the shortcode [ingeni-swiper]
The following parameters may be included:
source_path: Directory relative to the home page that contains the images to b displayed. Defaults to '/photos-bucket/',
wrapper_class: Wrapping class name. Defaults to 'ingeni-swiper-wrap'.
show_thumbs: Display a horzontal list of thumbnails below the main image. Defaults to 1 (show thumbnails). Used inconjunction with sync_thumbs.
sync_thumbs: Keep the main image and thumbnail list in sync. Defaults to 1 (equals sync the thumbnails). Used inconjunction with show_thumbs.
max_thumbs: Max. number of thumbnails to display. Defaults to 0 (show all thumbnails).
show_arrows: Show navigation arrows. Defaults to 1 (show arrows).
show_dots: Show navigation dots. Defaults to 0 (show dots).
shuffle: Randomly shuffle the order of the images. Defaults to 1 (shuffle images).
speed: msecs to display image before moving to the next. Defaults to 2000 (2 secs).
transition_speed: msecs to transition to the next image. Defaults to 1000 (1 secs).
bg_images: Display images as background images. Default = 0 (foreground images)
category: Display the featured images from posts of a specific category. Provide the category name as the parameter value.
file_ids: Comma separated list of media library file IDs. Easy way to get this list is to create a post gallery of the required images. The standard [gallery] shortcode contains a list of file IDs.
post_ids: Comma separated list of post IDs.
post_type: Used in-conjunction with the post_ids parameter. E.g., ‘post’, ‘page’. Defaults to ’content_block’.
orderby: Order in which the slides appear. Used in-conjunction with the post_ids parameter. E.g., ‘post__in’. Defaults to ‘title’.
order: Defaults to 'ASC'
center_mode: When using variable width, center the image in the div. Defaults to 0.
variable_width: Cope with variable width images. Default to 0.
fade: Defaults to 1 for fade transitions. NB, slide transition is forced when using variable_width and center_mode.
adaptive_height - When set to 1, enables adaptive height for single slide horizontal carousels. Default = 0
thumbnail_size - If displaying the thumbnail or featured image of a post, specify the size to use. Default is 'full',
show_title - If showing a carousel of images, set to 1 to have the image title displayed. Default = 0
translucent_layer_class - Specify the a translucent class name. Default = "".
link_post => Set to 1 to linking to slides sourced from posts. Default = 0
delay_start - Msec to delay video/slider start. Defaults to 0. Max value = 60000.
slides_to_show - Number of slides to show at one time. Default = 1
slides_to_scroll - Number of slides to scroll in a single scroll. Default = 1
show_content - If 1, display content from a post to be used an an overlay - e.g., text overlaying image. Defaults to 0
template - Specify a slider template. Will search in the {theme}/ingeni-swiper-templates and then the plugin template folder for a matching template file.
template_function_call: specify the calling function in a template file. Defaults to 'do_swiper_template'. Required when multiple sliders on a single page.
responsive_breakpoints: Comma delimited string containing responsive breakpoints. For example: "640,1024". Default is blank = non-responsive display.
responsive_slides_to_show: Comma delimited string containing number of slides to show for each breakpoint. For example: "2,3". Defaults is blank = non-responsive display.
slider_class - specify unique JS class to permit multiple sliders on a single page. Defaults to
'slider-'.
pause_on_hover - If set to 0 hovering over slider won't pause it. Defaults to 1 - pause on hover.
meta_key, meta_value, meta_compare - Used in conjunction to select posts that match specific meta values (e.g., selecting ACF and CPT posts of a specific type). meta_compare defaults to 'LIKE'. meta_key and meta_value default to empty.
== Examples ==
One image background images:
[ingeni-slider source_path="/assets/2020/home-photos/" show_thumbs=0 show_arrows=1 show_dots=0 variable_width=0 fade=1 speed=3000 bg_images=0]
Three image carousel:
[ingeni-swiper source_path="/products/" show_thumbs=0 show_arrows=1 show_dots=0 slides_to_show=3 slides_to_scroll=3 center_mode=1 variable_width=0 wrapper_class="product_slider" speed=5000 fade=0]
Responsive slider. Small = 1, Medium = 2, Large = 3:
[ingeni-swiper source_path="/products/" show_thumbs=0 show_arrows=1 show_dots=0 slides_to_show=1 slides_to_scroll=1 center_mode=1 variable_width=0 wrapper_class="product_slider" speed=3000 fade=0 bg_images=1 responsive_breakpoints="640,1024" responsive_slides_to_show="2,3"]
Responsive slider, with filtered meta values:
[ingeni-swiper show_thumbs=0 shuffle=0 post_type="bench_colour" template="colours-preview.php" show_arrows=1 show_dots=0 slides_to_show=1 loop=1 slides_to_scroll=1 speed=5000 responsive_breakpoints="768,992" responsive_slides_to_show="3,5" slider_class="home_colours_carousel" autoplay=1 meta_key="type" meta_value="timber"]
NOTE: MobileFirst is auto selected, so the mobile settings is defined by slides_to_show and slides_to_scroll. Larger sizes are defined in the responsive_breakpoints and responsive_slide_to_show parameters.
Carousel with content from Content Blocks and template:
[ingeni-swiper show_thumbs=0 shuffle=0 post_ids="153,158" post_type="content_block" template="right-featured.php" template_function_call="do_right_featured_template"]
Carousel of Woocommerce Products, with responsive breakpoints and custom template:
[ingeni-swiper show_thumbs=0 shuffle=0 post_ids="1291,1293,1296,1297" post_type="product" template="product_thumb.php" template_function_call="do_product_thumb_template" show_arrows=0 show_dots=0 slides_to_show=1 slides_to_scroll=1 center_mode=1 variable_width=0 wrapper_class="mbm_product_slider" speed=50000 fade=0 responsive_breakpoints="640,1024" responsive_slides_to_show="2,4" slider_class="mbm_carousel]
Carousel of media library images of category 'gallery' with a Lightbox:
[ingeni-swiper show_thumbs=0 shuffle=0 post_type="attachment" template="gallery-preview.php" show_arrows=1 show_dots=0 slides_to_show=1 loop=1 slides_to_scroll=1 speed=60000 responsive_breakpoints="768,992" responsive_slides_to_show="3,5" slider_class="home_gallery_carousel" autoplay=1 category="gallery" lightbox=1 lightbox_caption=1 template_function_call="do_gallery_preview"]
== Changelog ==
v2025.01 - Based on ingeni-slick-carousel v2023.06
v2025.02 - Fixed syntax for responsive breakpoints and arrow navigation.
v2025.03 - Added the meta_key, meta_value and meta_compare fields.
v2025.04 - Added 'zoom' parameter
v2025.05 - Added lightbox support
V2025.06 - Added lightbox_caption option - pulls either the ALT tag or the TITLE of the image.
- Updated to PluginUpdateChecker v5.6
- Lightbox caption uses the caption, alt text or file name, in that order of preference