0

So I have been trying to add the carousel as a shortcode but whenever I try it will end up crashing or not displaying this is being done in functions php and it appends to the body as of now please see the code below

    function flexslider_js() {
     
    $images = get_field('gallery');
    if( $images ): ?>
        <div id="carousel" class="flexslider">
            <ul class="slides">
                <?php foreach( $images as $image ): ?>
                    <li>
                        <img src="<?php echo esc_url($image['sizes']['thumbnail']); ?>" alt="Thumbnail of <?php echo esc_url($image['alt']); ?>" />
                    </li>
                <?php endforeach; ?>
            </ul>
        </div>
    <?php endif; 
    ?>
               <script>
                // Can also be used with $(document).ready()
                $(window).load(function () {
                    $(".flexslider").flexslider({
                        animation: "slide",
                        animationLoop: false,
                        itemWidth: 210,
                        itemMargin: 5
                    });
                });
                </script>                      
    <?php
    }
add_action('wp_head', 'flexslider_js');
3
  • I don't see any attempt at adding a shortcode?
    – CBroe
    Jul 18, 2022 at 11:17
  • add_action('wp_head' - this will cause the output to land in the head element - clearly your carousel's HTML code does not belong in there.
    – CBroe
    Jul 18, 2022 at 11:18
  • Have you read through the shortcode API documentation?
    – Chris Haas
    Jul 18, 2022 at 12:22

1 Answer 1

1

thank you for the help I have found the answer this may not be the most efficient way of doing so if there any suggestions of a better way please be sure to say

function flexslider_js() {

?>
           <script>
            // Can also be used with $(document).ready()
            $(window).load(function () {
                $(".flexslider").flexslider({
                    animation: "slide",
                    animationLoop: false,
                    itemWidth: 210,
                    itemMargin: 20
                });
            });
            </script>
            
            

<?php

$images = get_field('gallery');
$html = '';

foreach( $images as $image ) {
               $slides .= '<li><div class="slide-contents"><a href="' . $image['sizes']['medium'] . '" data-lightbox="carousel"><img src="' . $image['sizes']['thumbnail'] . '" class="slide-image"/></a></div></li>';
}

$html .= '<div id="carousel" class="flexslider"><ul class="slides">' . $slides . '</ul></div>';

console.log($html);
return $html;

}

add_shortcode( 'carousel', 'flexslider_js' );
1
  • That is pretty exactly how to do it! One mistake is that console.log($html); is JavaScript, not PHP, but I think I’d just a copy-paste problem
    – Chris Haas
    Jul 18, 2022 at 23:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.