IndustriesSlider Elementor Widget

May 2, 2025 · AI Conversations

User
create elementor widget name
IndustriesSlider
content will be
Image
button – text and link
4 image at a time with prev and next arrow at bottom
Assistant
Here’s a basic Elementor widget setup for **`IndustriesSlider`**, displaying **4 images at a time**, each with a **button (text + link)**, and **Prev/Next arrows** at the bottom.

—

### 🔧 Widget Name: `IndustriesSlider`

### ✅ Features:
– Repeater control for Image + Button Text + Button Link.
– Shows 4 slides at once.
– Navigation arrows at the bottom.
– Uses SwiperJS for the slider (Elementor uses it by default).

—

### 🧩 PHP: Widget Class

Add this to your Elementor custom plugin or theme widget file:

class IndustriesSlider_Widget extends ElementorWidget_Base {

    public function get_name() {
        return 'industries_slider';
    }

    public function get_title() {
        return __( 'Industries Slider', 'textdomain' );
    }

    public function get_icon() {
        return 'eicon-slider-push';
    }

    public function get_categories() {
        return [ 'general' ];
    }

    protected function _register_controls() {
        $this->start_controls_section(
            'content_section',
            [
                'label' => __( 'Slides', 'textdomain' ),
                'tab' => ElementorControls_Manager::TAB_CONTENT,
            ]
        );

        $repeater = new ElementorRepeater();

        $repeater->add_control(
            'slide_image',
            [
                'label' => __( 'Image', 'textdomain' ),
                'type' => ElementorControls_Manager::MEDIA,
                'default' => [
                    'url' => ElementorUtils::get_placeholder_image_src(),
                ],
            ]
        );

        $repeater->add_control(
            'button_text',
            [
                'label' => __( 'Button Text', 'textdomain' ),
                'type' => ElementorControls_Manager::TEXT,
                'default' => __( 'Learn More', 'textdomain' ),
            ]
        );

        $repeater->add_control(
            'button_link',
            [
                'label' => __( 'Button Link', 'textdomain' ),
                'type' => ElementorControls_Manager::URL,
                'placeholder' => __( 'https://your-link.com', 'textdomain' ),
                'show_external' => true,
            ]
        );

        $this->add_control(
            'slides',
            [
                'label' => __( 'Slides', 'textdomain' ),
                'type' => ElementorControls_Manager::REPEATER,
                'fields' => $repeater->get_controls(),
                'default' => [],
                'title_field' => '{{{ button_text }}}',
            ]
        );

        $this->end_controls_section();
    }

    protected function render() {
        $settings = $this->get_settings_for_display();
        if ( empty( $settings['slides'] ) ) return;

        ?>
        <div class="industries-slider swiper">
            <div class="swiper-wrapper">
                <?php foreach ( $settings['slides'] as $slide ) : ?>
                    <div class="swiper-slide">
                        <img src="<?php echo esc_url( $slide['slide_image']['url'] ); ?>" alt="" />
                        <a class="industries-button" href="<?php echo esc_url( $slide['button_link']['url'] ); ?>" <?php echo $slide['button_link']['is_external'] ? 'target="_blank"' : ''; ?>>
                            <?php echo esc_html( $slide['button_text'] ); ?>
                        </a>
                    </div>
                <?php endforeach; ?>
            </div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
        <?php
    }

    public function get_style_depends() {
        return [ 'swiper' ];
    }

    public function get_script_depends() {
        return [ 'swiper' ];
    }
}

—

### 🧩 JS Init (Enqueue this or inline it)

document.addEventListener('DOMContentLoaded', function () {
  new Swiper('.industries-slider', {
    slidesPerView: 4,
    spaceBetween: 20,
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    loop: true,
  });
});

—

### 💡 Optional Styling (CSS)

.industries-slider .swiper-slide {
    text-align: center;
}

.industries-slider .industries-button {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 16px;
    background: #222;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
}

—

Would you like this as a downloadable plugin zip or added to an existing widget structure?

User
also add inline js and swipper cdn in widget iteslef also register widget in function.php
Assistant
Perfect. Below is the **complete code** for your `IndustriesSlider` Elementor widget with the following:

– ✅ **Swiper CDN added inline** (CSS and JS).
– ✅ **Swiper initialized via inline JS in widget render**.
– ✅ **Widget registered in `functions.php`**.
– ✅ **Fully self-contained** — no need to enqueue scripts separately.

—

### 🧩 `IndustriesSlider_Widget.php`

if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly

class IndustriesSlider_Widget extends ElementorWidget_Base {

    public function get_name() {
        return 'industries_slider';
    }

    public function get_title() {
        return __( 'Industries Slider', 'textdomain' );
    }

    public function get_icon() {
        return 'eicon-slider-push';
    }

    public function get_categories() {
        return [ 'general' ];
    }

    protected function _register_controls() {
        $this->start_controls_section(
            'content_section',
            [
                'label' => __( 'Slides', 'textdomain' ),
                'tab' => ElementorControls_Manager::TAB_CONTENT,
            ]
        );

        $repeater = new ElementorRepeater();

        $repeater->add_control(
            'slide_image',
            [
                'label' => __( 'Image', 'textdomain' ),
                'type' => ElementorControls_Manager::MEDIA,
                'default' => [
                    'url' => ElementorUtils::get_placeholder_image_src(),
                ],
            ]
        );

        $repeater->add_control(
            'button_text',
            [
                'label' => __( 'Button Text', 'textdomain' ),
                'type' => ElementorControls_Manager::TEXT,
                'default' => __( 'Learn More', 'textdomain' ),
            ]
        );

        $repeater->add_control(
            'button_link',
            [
                'label' => __( 'Button Link', 'textdomain' ),
                'type' => ElementorControls_Manager::URL,
                'placeholder' => __( 'https://your-link.com', 'textdomain' ),
                'show_external' => true,
            ]
        );

        $this->add_control(
            'slides',
            [
                'label' => __( 'Slides', 'textdomain' ),
                'type' => ElementorControls_Manager::REPEATER,
                'fields' => $repeater->get_controls(),
                'default' => [],
                'title_field' => '{{{ button_text }}}',
            ]
        );

        $this->end_controls_section();
    }

    protected function render() {
        $settings = $this->get_settings_for_display();
        if ( empty( $settings['slides'] ) ) return;

        $widget_id = 'industries-slider-' . $this->get_id(); // unique per widget
        ?>

        <!-- Swiper CDN CSS -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />

        <div id="<?php echo esc_attr($widget_id); ?>" class="industries-slider swiper">
            <div class="swiper-wrapper">
                <?php foreach ( $settings['slides'] as $slide ) : ?>
                    <div class="swiper-slide">
                        <img src="<?php echo esc_url( $slide['slide_image']['url'] ); ?>" alt="" />
                        <a class="industries-button" href="<?php echo esc_url( $slide['button_link']['url'] ); ?>" <?php echo $slide['button_link']['is_external'] ? 'target="_blank"' : ''; ?>>
                            <?php echo esc_html( $slide['button_text'] ); ?>
                        </a>
                    </div>
                <?php endforeach; ?>
            </div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>

        <!-- Swiper CDN JS -->
        <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
        <!-- Inline JS -->
        <script>
        document.addEventListener('DOMContentLoaded', function () {
            new Swiper('#<?php echo esc_js($widget_id); ?>', {
                slidesPerView: 4,
                spaceBetween: 20,
                navigation: {
                    nextEl: '#<?php echo esc_js($widget_id); ?> .swiper-button-next',
                    prevEl: '#<?php echo esc_js($widget_id); ?> .swiper-button-prev',
                },
                loop: true,
            });
        });
        </script>

        <style>
        #<?php echo esc_attr($widget_id); ?> .swiper-slide {
            text-align: center;
        }

        #<?php echo esc_attr($widget_id); ?> .industries-button {
            display: inline-block;
            margin-top: 10px;
            padding: 8px 16px;
            background: #222;
            color: #fff;
            text-decoration: none;
            border-radius: 4px;
        }
        </style>

        <?php
    }
}

—

### 🧩 `functions.php` — Register Widget

function register_industries_slider_widget( $widgets_manager ) {
    require_once get_template_directory() . '/elementor-widgets/IndustriesSlider_Widget.php'; // adjust path as needed
    $widgets_manager->register( new IndustriesSlider_Widget() );
}
add_action( 'elementor/widgets/register', 'register_industries_slider_widget' );

—

Would you like me to wrap this into a downloadable ZIP for easy install or help move it into a plugin structure?

User
set layout like attached in widget above
Assistant
To replicate the layout shown in your screenshot within the Elementor `IndustriesSlider` widget, here’s how to **update the `render()` method** for:

### ✅ Design Features to Match:
– Black background container.
– 4 cards with **image on top**, **rounded white button-like label** overlay on image.
– Centered **slider title** with arrow decoration.
– Navigation arrows **circular and centered below** the slider.

—

### 🔧 ✅ Replace `render()` method in your `IndustriesSlider_Widget` class with this:

protected function render() {
    $settings = $this->get_settings_for_display();
    if ( empty( $settings['slides'] ) ) return;

    $widget_id = 'industries-slider-' . $this->get_id(); // unique ID
    ?>

    <!-- Swiper CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />

    <div class="industries-slider-wrapper" style="background:#111; padding: 60px 20px; color: white; text-align:center;">
        <h2 style="font-size: 28px; margin-bottom: 40px; position: relative; display: inline-block;">
            <span style="border-bottom: 4px dotted #f13d68; padding-bottom: 4px;">Branscher vi betjänar</span>
            <span style="position: absolute; left: -30px; top: 12px; color: #f13d68;">➞</span>
        </h2>

        <div id="<?php echo esc_attr($widget_id); ?>" class="industries-slider swiper" style="padding-bottom: 60px;">
            <div class="swiper-wrapper">
                <?php foreach ( $settings['slides'] as $slide ) : ?>
                    <div class="swiper-slide" style="position: relative;">
                        <img src="<?php echo esc_url( $slide['slide_image']['url'] ); ?>" alt="" style="width: 100%; height: auto; border-radius: 6px;" />
                        <a class="industries-button"
                           href="<?php echo esc_url( $slide['button_link']['url'] ); ?>"
                           <?php echo $slide['button_link']['is_external'] ? 'target="_blank"' : ''; ?>
                           style="position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
                                  background: #fff; color: #000; padding: 8px 20px; border-radius: 30px;
                                  font-weight: 500; text-decoration: none; min-width: 60%; text-align: center;">
                            <?php echo esc_html( $slide['button_text'] ); ?>
                        </a>
                    </div>
                <?php endforeach; ?>
            </div>

            <div class="swiper-button-prev" style="bottom: 10px; top: auto; left: 48%; transform: translateX(-100%);"></div>
            <div class="swiper-button-next" style="bottom: 10px; top: auto; right: 48%; transform: translateX(100%);"></div>
        </div>
    </div>

    <!-- Swiper JS -->
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <script>
    document.addEventListener('DOMContentLoaded', function () {
        new Swiper('#<?php echo esc_js($widget_id); ?>', {
            slidesPerView: 4,
            spaceBetween: 30,
            navigation: {
                nextEl: '#<?php echo esc_js($widget_id); ?> .swiper-button-next',
                prevEl: '#<?php echo esc_js($widget_id); ?> .swiper-button-prev',
            },
            loop: true,
            breakpoints: {
                0: { slidesPerView: 1 },
                600: { slidesPerView: 2 },
                992: { slidesPerView: 3 },
                1200: { slidesPerView: 4 }
            }
        });
    });
    </script>

    <style>
    #<?php echo esc_attr($widget_id); ?> .swiper-button-prev,
    #<?php echo esc_attr($widget_id); ?> .swiper-button-next {
        background: #f13d68;
        color: #fff;
        border-radius: 50%;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        z-index: 10;
    }
    #<?php echo esc_attr($widget_id); ?> .swiper-button-prev::after,
    #<?php echo esc_attr($widget_id); ?> .swiper-button-next::after {
        font-size: 16px;
        font-weight: bold;
    }
    </style>

    <?php
}

—

### 🔧 Notes:
– The title arrow is styled using simple emoji and CSS.
– Responsive breakpoints are added for better mobile handling.
– You can replace the arrow emoji `➞` or style it with an SVG if preferred.

Would you like a ZIP version with this widget and a loader plugin setup for one-click install?

Leave a Comment

Your email address will not be published. Required fields are marked *