Custom Carousel Element Code
<script>
jQuery(document).ready(function($) {
$('.owl-carousel').each(function() {
var $this = $(this);
$this.owlCarousel({
items: parseInt($this.data('items')),
autoplay: $this.data('autoplay') === 'true',
autoplayTimeout: parseInt($this.data('autoplay-speed')),
loop: true,
margin: 10,
nav: true,
});
});
});
</script>### Updated Code
<?php
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly
}
if ( ! class_exists( 'Fusion_Carousel_Element' ) ) {
class Fusion_Carousel_Element {
public function __construct() {
// Hook into Avada to register the element
add_action( 'fusion_builder_before_init', array( $this, 'register_carousel_element' ) );
}
public function register_carousel_element() {
if ( class_exists( 'FusionBuilder' ) ) {
// Register the new custom carousel element with Fusion Builder
fusion_builder_map( array(
'name' => 'Custom Carousel',
'shortcode' => 'custom_carousel',
'icon' => 'fusiona fa-sliders', // Font Awesome icon for the element
'category' => 'Avada Custom Elements',
'params' => array(
array(
'type' => 'upload',
'heading' => esc_attr__( 'Upload Images', 'fusion-builder' ),
'description' => esc_attr__( 'Add images to display in the carousel.', 'fusion-builder' ),
'param_name' => 'images',
'multiple' => true, // Allow multiple image uploads
),
array(
'type' => 'textfield',
'heading' => 'Carousel Speed',
'param_name' => 'speed',
'description' => 'Set the speed of the carousel (in milliseconds).',
'value' => '3000',
),
array(
'type' => 'select',
'heading' => 'Autoplay',
'param_name' => 'autoplay',
'description' => 'Enable or disable autoplay.',
'value' => array(
'Yes' => 'yes',
'No' => 'no',
),
'default' => 'yes',
),
),
) );
}
}
}
// Initialize the carousel element class
new Fusion_Carousel_Element();
}
function custom_carousel_shortcode( $atts, $content = null ) {
// Define default attributes
$atts = shortcode_atts(
array(
'images' => '',
'speed' => '3000',
'autoplay' => 'yes',
'class' => '',
'items' => '1',
),
$atts,
'custom_carousel'
);
// Split the images into an array
$images = explode( ',', $atts['images'] );
ob_start();
?>
<div class="owl-carousel <?php echo esc_attr( $atts['class'] ); ?>"
data-items="<?php echo esc_attr( $atts['items'] ); ?>"
data-autoplay="<?php echo esc_attr( $atts['autoplay'] === 'yes' ? 'true' : 'false' ); ?>"
data-autoplay-speed="<?php echo esc_attr( $atts['speed'] ); ?>">
<?php if ( ! empty( $images ) ) : ?>
<?php foreach ( $images as $image ) : ?>
<div class="carousel-item">
<img src="<?php echo esc_url( $image ); ?>" alt="Carousel Image">
</div>
<?php endforeach; ?>
<?php endif; ?>
</div>
<script>
jQuery(document).ready(function($) {
$('.owl-carousel').each(function() {
var $this = $(this);
$this.owlCarousel({
items: parseInt($this.data('items')),
autoplay: $this.data('autoplay') === 'true',
autoplayTimeout: parseInt($this.data('autoplay-speed')),
loop: true,
margin: 10,
nav: true,
});
});
});
</script>
<?php
return ob_get_clean();
}
add_shortcode( 'custom_carousel', 'custom_carousel_shortcode' );### Key Updates
1. **`multiple` Image Upload Option**:
– In the `fusion_builder_map` function, the `type: 'upload'` now supports `multiple => true`, enabling users to upload multiple images.
2. **Shortcode Handling**:
– The `custom_carousel_shortcode` now splits the `images` parameter into an array using `explode( ',', $atts['images'] )`.
– Each image URL is rendered as an “ element inside a carousel “.
3. **Autoplay Option**:
– Added a dropdown (`select` type) parameter in the Fusion Builder map to enable or disable autoplay.
4. **Enhanced JavaScript**:
– The JavaScript initializes the Owl Carousel with settings dynamically passed via data attributes.
### Result
This updated code allows users to upload multiple images, configure the carousel speed, and enable or disable autoplay via the Fusion Builder interface. It integrates seamlessly with the `Owl Carousel` plugin to render the carousel on the frontend.
Here's the corrected and updated code:
### Updated Code
<?php
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly
}
if ( ! class_exists( 'Fusion_Carousel_Element' ) ) {
class Fusion_Carousel_Element {
public function __construct() {
// Hook into Avada to register the element
add_action( 'fusion_builder_before_init', array( $this, 'register_carousel_element' ) );
}
public function register_carousel_element() {
if ( class_exists( 'FusionBuilder' ) ) {
// Register the new custom carousel element with Fusion Builder
fusion_builder_map( array(
'name' => 'Custom Carousel',
'shortcode' => 'custom_carousel',
'icon' => 'fusiona fa-sliders', // Font Awesome icon for the element
'category' => 'Avada Custom Elements',
'params' => array(
array(
'type' => 'upload',
'heading' => esc_attr__( 'Upload Images', 'fusion-builder' ),
'description' => esc_attr__( 'Add multiple images to display in the carousel. Separate multiple images with commas.', 'fusion-builder' ),
'param_name' => 'images',
'value' => '', // Default empty value
),
array(
'type' => 'textfield',
'heading' => 'Carousel Speed',
'param_name' => 'speed',
'description' => 'Set the speed of the carousel (in milliseconds).',
'value' => '3000',
),
array(
'type' => 'select',
'heading' => 'Autoplay',
'param_name' => 'autoplay',
'description' => 'Enable or disable autoplay.',
'value' => array(
'Yes' => 'yes',
'No' => 'no',
),
'default' => 'yes',
),
),
) );
}
}
}
// Initialize the carousel element class
new Fusion_Carousel_Element();
}
function custom_carousel_shortcode( $atts, $content = null ) {
// Define default attributes
$atts = shortcode_atts(
array(
'images' => '',
'speed' => '3000',
'autoplay' => 'yes',
'class' => '',
'items' => '1',
),
$atts,
'custom_carousel'
);
// Split the images into an array
$images = explode( ',', $atts['images'] );
ob_start();
?>
<div class="owl-carousel <?php echo esc_attr( $atts['class'] ); ?>"
data-items="<?php echo esc_attr( $atts['items'] ); ?>"
data-autoplay="<?php echo esc_attr( $atts['autoplay'] === 'yes' ? 'true' : 'false' ); ?>"
data-autoplay-speed="<?php echo esc_attr( $atts['speed'] ); ?>">
<?php if ( ! empty( $images ) ) : ?>
<?php foreach ( $images as $image ) : ?>
<div class="carousel-item">
<img src="<?php echo esc_url( trim( $image ) ); ?>" alt="Carousel Image">
</div>
<?php endforeach; ?>
<?php endif; ?>
</div>
<script>
jQuery(document).ready(function($) {
$('.owl-carousel').each(function() {
var $this = $(this);
$this.owlCarousel({
items: parseInt($this.data('items')),
autoplay: $this.data('autoplay') === 'true',
autoplayTimeout: parseInt($this.data('autoplay-speed')),
loop: true,
margin: 10,
nav: true,
});
});
});
</script>
<?php
return ob_get_clean();
}
add_shortcode( 'custom_carousel', 'custom_carousel_shortcode' );### Key Updates
1. **`upload` Parameter**:
– Updated the description for the `upload` parameter to instruct users to add multiple image URLs separated by commas.
2. **Handling Multiple Images**:
– The `custom_carousel_shortcode` splits the `images` parameter into an array using `explode(',', $atts['images'])` to handle multiple image URLs.
3. **Frontend Carousel**:
– Ensures each image URL is trimmed (using `trim()` to remove extra spaces) and properly displayed within the carousel.
### Instructions for Use
1. **Upload Multiple Images**:
– Use the Fusion Builder element interface and upload multiple image URLs separated by commas in the `Upload Images` field.
2. **Save and Render**:
– When the shortcode is rendered on the frontend, it will process and display the images in the carousel format.
3. **Autoplay and Speed**:
– Use the options in the Fusion Builder to customize the carousel's autoplay and speed settings.
This approach keeps it simple while ensuring multiple images can be uploaded and displayed in the carousel.