Custom page external CSS and JS

How do I include external Slick Carousel CSS and JS in the Filament custom page?
I have used it directly in a custom filament page, and it is working.
I want to know what is the right approach to include CSS and JS of the external Slick JS library so that I can not get a CSS and JS conflict issue.

I tried the following code in AppServiceProvider.php, but it does not seem to be working.

<?php 
  //Register css assets     

         FilamentAsset::register([
            asset('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css'),
            asset('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css'),
            asset('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css'),
        ]);

        // Register JavaScript assets
        FilamentAsset::register([
            asset('https://code.jquery.com/jquery-3.6.0.min.js'),
            asset('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js'),
        ]);

?>

<?php 
  //Register css assets     

         FilamentAsset::register([
            asset('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css'),
            asset('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css'),
            asset('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css'),
        ]);

        // Register JavaScript assets
        FilamentAsset::register([
            asset('https://code.jquery.com/jquery-3.6.0.min.js'),
            asset('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js'),
        ]);

?>

share-and-promote.blade.php1.67KB

<?php 
  //Register css assets     

         FilamentAsset::register([
            asset('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css'),
            asset('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css'),
            asset('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css'),
        ]);

        // Register JavaScript assets
        FilamentAsset::register([
            asset('https://code.jquery.com/jquery-3.6.0.min.js'),
            asset('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js'),
        ]);

?>

<?php 
  //Register css assets     

         FilamentAsset::register([
            asset('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css'),
            asset('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css'),
            asset('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css'),
        ]);

        // Register JavaScript assets
        FilamentAsset::register([
            asset('https://code.jquery.com/jquery-3.6.0.min.js'),
            asset('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js'),
        ]);

?>

share-and-promote.blade.php1.67KB

Custom page external CSS and JS

Similar Threads

Custom page external CSS and JS

Similar Threads

Similar Threads

Similar Threads