Moving slider script options from footer.php to inc/enqueue.php and js/slider_settings.js

footer.php

@@ -40,36 +40,6 @@
 
 <?php wp_footer(); ?>
 
-<!-- Loads slider script and settings if a widget on pos hero is published -->
-<?php if ( is_active_sidebar( 'hero' ) ): ?>
-
-<script>
-    jQuery(document).ready(function() {
-        var owl = jQuery('.owl-carousel');
-        owl.owlCarousel({
-            items:<?php echo get_theme_mod( 'understrap_theme_slider_count_setting', 1 );?>,
-            loop:<?php echo get_theme_mod( 'understrap_theme_slider_loop_setting', true );?>,
-            autoplay:true,
-            autoplayTimeout:<?php echo get_theme_mod( 'understrap_theme_slider_time_setting', 5000 );?>,
-            animateOut: 'fadeOut',
-            animateIn: 'fadeIn',
-            nav: false,
-            dots: true,
-            autoplayHoverPause:true,
-            margin:0,
-            autoHeight:true
-        });
-
-        jQuery('.play').on('click',function(){
-            owl.trigger('autoplay.play.owl',[1000])
-        });
-        jQuery('.stop').on('click',function(){
-            owl.trigger('autoplay.stop.owl')
-        });
-    });
-</script>
-<?php endif; ?>
-
 </body>
 
 </html>

inc/enqueue.php

@@ -17,3 +17,24 @@ function understrap_scripts() {
 
 add_action( 'wp_enqueue_scripts', 'understrap_scripts' );
 
+/** 
+*Loading slider script conditionally
+**/
+
+if ( is_active_sidebar( 'hero' ) ):
+add_action("wp_enqueue_scripts","understrap_slider");
+  
+function understrap_slider(){
+    if ( is_front_page() ) {    
+    $data = array(
+    	"timeout"=>get_theme_mod( 'understrap_theme_slider_time_setting', 5000 ),
+    	"items"=>get_theme_mod( 'understrap_theme_slider_count_setting', 1 )
+    	);
+
+
+    wp_enqueue_script("understrap-slider-script", get_stylesheet_directory_uri() . '/js/slider_settings.js', array(), '0.4.3');
+    wp_localize_script( "understrap-slider-script", "understrap_slider_variables", $data );
+    }
+}
+endif;
+

js/slider_settings.js

@@ -0,0 +1,24 @@
+
+    jQuery(document).ready(function() {
+        var owl = jQuery('.owl-carousel');
+        owl.owlCarousel({
+            items:(understrap_slider_variables.items),
+            loop:true,
+            autoplay:true,
+            autoplayTimeout:(understrap_slider_variables.timeout),
+            animateOut: 'fadeOut',
+            animateIn: 'fadeIn',
+            nav: false,
+            dots: true,
+            autoplayHoverPause:true,
+            margin:0,
+            autoHeight:true
+        });
+
+        jQuery('.play').on('click',function(){
+            owl.trigger('autoplay.play.owl',[1000])
+        });
+        jQuery('.stop').on('click',function(){
+            owl.trigger('autoplay.stop.owl')
+        });
+    });