Fügen Sie JavaScript-Code zu einer Vorlage Seite in Wordpress

Question

Ich möchte dieses Grid Column Carousel verwenden. Ich habe etwas Code in functions.php hinzugefügt, weil ich möchte, dass dieses Karussell nur auf einigen Seiten ist. So bedarf es eine js-Datei, die Last auf meiner Homepage zu schließen, aber auch dieses Stück Code:

<!-- Include the script--< 
<script src="js/GridColumnCarousel.js"></script> 

<!-- initialize the carousel --> 
<script> 
    window.onload = function() { 
    var options = { 
     elem: document.getElementsByClassName('example-1')[0], 
     gridColClasses: 'col-xs-12 col-sm-6 col-md-4 col-lg-3' 
    }; 

    var gCCarousel = new GCCarousel(options);  
    }; 
</script> 

Wie kann ich es nur auf meinem Seite-custom.php?

Mein Code in Funktionen

add_action('wp_enqueue_scripts','load_js_slider'); 
    function load_js_slider(){ 
     if (is_page_template('accueil_page.php')) { 
      wp_enqueue_script('slider_script', get_template_directory_uri() . '/js/GridColumnCarousel.js'); 
      wp_enqueue_script('slider_script', get_template_directory_uri() . '/js/slider.js'); 
     } 
    } 

Danke

Answer 1

Sie auf Ihrer Seite-custom.php wie einige Container hinzufügen:

<div class="carusel"></div> 

Und in Ihrem JavaScript-Code zu überprüfen, ob diese Element existiert - führe deinen Code aus. Etwas wie dieses:

<script> 
    window.onload = function() { 
    if(document.getElementsByClassName('carusel')[0].length > 0) { 
    var options = { 
     elem: document.getElementsByClassName('example-1')[0], 
     gridColClasses: 'col-xs-12 col-sm-6 col-md-4 col-lg-3' 
    }; 

    var gCCarousel = new GCCarousel(options); 
    }  
    }; 
</script>