TransWikia.com

Creating a slider shortcode to use with bxslider

WordPress Development Asked by DevSem on January 6, 2021

So I’m building a shortcode so that I can use with bxSlider (https://bxslider.com/examples/image-slideshow-captions/) but for some reason I am unable to have my javascript work.

Here is the example of my shortcode:

[slider]
[slide headline="Hack Your Newsfeed" image="/wp-content/uploads/2019/10/M2020DayOne.jpg" body="<p>Test.</p>" link="Learn How Now|https://www.howtogeek.com/665935/how-to-sort-your-facebook-feed-by-most-recent/"]
[slide headline="Branch Out" image="/wp-content/uploads/2019/10/M2020DayOne.jpg" body="<p>Test</p>" link="Facebook|https://facebook.com" link="Instagram|https://instagram.com"]
[/slider]

Here is the code that I have so far:

function slider_wrapper_shortcode($atts, $content = null)
{
    $atts = shortcode_atts(
            [
                'id' => '',
            ], $atts, 'slider');

    $id = $atts['id'] ?: rawurldecode(sanitize_title($atts['title']));

    $cleaned_content = wpautop(trim($content));

    $output = '<div id="bxslider' . $id . '" class="bxslider">';
    $output .= do_shortcode($cleaned_content);
    $output .= '</div>';

    $output .= '<script type="text/javascript">
                    jQuery(document).ready(function() {
                        jQuery(".bxslider").bxSlider({
                            pager: false,
                            auto: true,
                            pause: 3000,
                            captions: false,
                        })
                    })
                </script>';

    return $output;
}
add_shortcode('slider', 'slider_wrapper_shortcode');

function slide_item_shortcode($atts, $content = null)
{
    extract(shortcode_atts([
            "image" => 'image',
        ], $atts)
    );

    return '<div><img src="' . home_url(esc_url($image)) . '" alt="" /></div>';
}
add_shortcode('slide', 'slide_item_shortcode');

Here is how the shortcodes are being rendered currently:

<div id="bxslider" class="bxslider">
<p></p><div><img src="https://*****.com.local/wp-content/uploads/2019/10/M2020DayOne.jpg" alt=""></div>
<p></p>
<p></p><div><img src="https://*****.com.local/wp-content/uploads/2019/10/M2020DayOne.jpg" alt=""></div>
<p></p>
</div>

For some reason, it looks like the script tag is not being detected at all, since I don’t see a reference in my console at all.

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP