Owl Carousel Activation for Elementor Widget Development

<?php

protected function render(){
            $settings = $this->get_settings_for_display();
      $active_contract = get_option("smartnft_active_contract_address",false);
      $collections = $this->get_collections($settings['limit']);
      $ethToWei = 1000000000000000000;

      $unique_id = "owl-carousel-" . uniqid();
?>

        <style>
                    .collections-grid{
                            grid-template-columns: repeat(<?php echo $settings['columns'] ?>,1fr);
                    }
        </style>

    <div class= "<?php echo  "collections-grid owl-theme owl-carousel " . $unique_id ?>" >
    <?php foreach( $collections as $collection ): ?>

        <?php if($settings['carousel_style'] === 'modern'): ?>

            <a href="<?php echo $collection['permalink']; ?>">
                <div class="collection-grid">
                    <div class="collection-grid__top">
                        <?php if( !empty ( $collection['collectionBanner'][0] ) ): ?>
                            <img class="banner" src="<?php echo   $collection['collectionBanner'][0]; ?>" alt="<?php echo $collection['name']; ?>">
                        <?php else: ?>
                            <figure class="no-banner"></figure>
                        <?php endif; ?>
                        <?php if( !empty ( $collection['collectionImg'][0] ) ): ?>
                            <img class="profile" src="<?php echo   $collection['collectionImg'][0]; ?>" alt="<?php echo $collection['name']; ?>">
                        <?php else: ?>
                            <figure class="no-profile"></figure>
                        <?php endif; ?>
                        <h2 class="name"><?php echo $collection['name']; ?></h2>
                    </div>

                    <div class="collection-grid__bottom">
                        <div>
                            <p><?php esc_html_e("Floor price",WP_SMART_NFT) ?></p>
                            <span><?php echo round($collection['floor_price'] / $ethToWei, 2) ?> <?php echo $active_contract['network']['currencySymbol']; ?></span>
                        </div>
                        <div>
                            <p><?php esc_html_e("Total volume",WP_SMART_NFT) ?></p>
                            <span><?php echo round($collection['total_vol'] / $ethToWei, 2) ?> <?php echo $active_contract['network']['currencySymbol']; ?></span>
                        </div>
                        <div>
                            <p><?php esc_html_e("Owners",WP_SMART_NFT) ?></p>
                            <span><?php echo $collection['owners'] ?></span>
                        </div>
                    </div>
                </div>
            </a>

        <?php else: ?>

            <a href="<?php echo $collection['permalink']; ?>">
                <div class="collection-grid-classic">
                        <?php if( !empty ( $collection['collectionImg'][0] ) ): ?>
                            <img class="profile" src="<?php echo   $collection['collectionImg'][0]; ?>" alt="<?php echo $collection['name']; ?>">
                        <?php else: ?>
                            <figure class="no-profile"></figure>
                        <?php endif; ?>
                        <div class="info">
                            <h2 class="name"><?php echo $collection['name']; ?></h2>
                            <div>
                                <p><?php esc_html_e("Floor:",WP_SMART_NFT) ?></p>
                                <span><?php echo round($collection['floor_price'] / $ethToWei, 2) ?> <?php echo $active_contract['network']['currencySymbol']; ?></span>
                            </div>
                        </div>
                </div>
            </a>

        <?php endif; ?>


    <?php endforeach; ?>
</div>

      <script>
        jQuery(document).ready(function(){
            const options = {
                            margin:<?php echo intval( $settings['columns_gap'] ); ?>,
                            responsive:{
                                0:{
                                    nav:false,
                                    items:1,
                                    dots:true,
                                    autoplay:true,
                                },
                                700:{
                                    nav:false,
                                    items:2,
                                    dots:true,
                                    autoplay:true,
                                },
                                900:{
                                    items:2,
                                    nav:false,
                                    dots:true,
                                    autoplay:true,
                                },
                                1000:{
                                    items:3,
                                    autoplay:true,
                                },
                                1001:{
                                    items:<?php echo intval( $settings['columns'] ) ?>,
                                    loop:true,
                                    nav:true,
                                    dots:false,
                                    autoplay:<?php echo $settings['carousel_auto_play'] === "yes" ? 1 : 0 ?>,
                                }


                            }
                        }
            jQuery(".<?php  echo $unique_id; ?>").owlCarousel(options);
        });
      </script>
<?php   }