Link to home
Start Free TrialLog in
Avatar of Alicia St Rose
Alicia St RoseFlag for United States of America

asked on

jQuery slider not working at all. Possible conflict with code and $?

My javascript is dead in the water. I'm trying to add a slider to my page. I keep getting "

I've got the html in a html block and I can see it. Somehow I'm enqueuing my Javascript wrong, or not able to do it in stealth mode. I have no errors in the console.
Here's what I have in my functions file:

function paulschurch_child_enqueue_scripts() {
	
		$parent_style = 'generatepress-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.
 
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
    wp_enqueue_style( 'lightslider', trailingslashit( get_stylesheet_directory_uri() ) . 'css/lightslider.css' );
	
	if ( is_rtl() ) {
		wp_enqueue_style( 'generatepress-rtl', trailingslashit( get_template_directory_uri() ) . 'rtl.css' );
	}
		
		wp_enqueue_script( 'lightslider', trailingslashit( get_stylesheet_directory_uri() ) . 'js/lightslider.js', array('jquery'), true );
}

add_action( 'wp_enqueue_scripts', 'paulschurch_child_enqueue_scripts', 100 );


function paulschurch_child_add_scripts() { ?>
		
		<script>
			
			(function($) {
				
	    	
	            $('#image-gallery').lightSlider({
	                gallery:true,
	                item:1,
	                thumbItem:9,
	                slideMargin: 0,
	                speed:500,
	                auto:true,
	                loop:true,
	                onSliderLoad: function() {
	                    $('#image-gallery').removeClass('cS-hidden');
	                }  
	            });
			
			
    });
   
</script>

<?php }

add_action( 'wp_head', 'paulschurch_child_add_scripts' );

Open in new window


The HTML:

<div class="demo">
        <div class="item">            
            <div class="clearfix" style="max-width:474px;">
                <ul id="image-gallery" class="gallery list-unstyled cS-hidden">
                    <li data-thumb="http://paulschurch.dev.cc/wp-content/uploads/2020/01/cS-1.jpg"> 
                        <img src="http://paulschurch.dev.cc/wp-content/uploads/2020/01/cS-1.jpg" />
                         </li>
                    <li data-thumb="http://paulschurch.dev.cc/wp-content/uploads/2020/01/cS-2.jpg"> 
                        <img src="http://paulschurch.dev.cc/wp-content/uploads/2020/01/cS-2.jpg" />
                         </li>
                    <li data-thumb="http://paulschurch.dev.cc/wp-content/uploads/2020/01/cS-3.jpg"> 
                        <img src="http://paulschurch.dev.cc/wp-content/uploads/2020/01/cS-3.jpg" />
                         </li>
                    <li data-thumb="http://paulschurch.dev.cc/wp-content/uploads/2020/01/cS-4.jpg"> 
                        <img src="http://paulschurch.dev.cc/wp-content/uploads/2020/01/cS-4.jpg" />
                         </li>
                    <li data-thumb="http://paulschurch.dev.cc/wp-content/uploads/2020/01/cS-5.jpg"> 
                        <img src="http://paulschurch.dev.cc/wp-content/uploads/2020/01/cS-5.jpg" />
                         </li>
                    <li data-thumb="http://paulschurch.dev.cc/wp-content/uploads/2020/01/cS-6.jpg"> 
                        <img src="http://paulschurch.dev.cc/wp-content/uploads/2020/01/cS-6.jpg" />
                         </li>
                    <li data-thumb="http://paulschurch.dev.cc/wp-content/uploads/2020/01/cS-7.jpg"> 
                        <img src="http://paulschurch.dev.cc/wp-content/uploads/2020/01/cS-7.jpg" />
                         </li>
                    <li data-thumb="http://paulschurch.dev.cc/wp-content/uploads/2020/01/cS-8.jpg"> 
                        <img src="http://paulschurch.dev.cc/wp-content/uploads/2020/01/cS-8.jpg" />
                         </li>
                    <li data-thumb="http://paulschurch.dev.cc/wp-content/uploads/2020/01/cS-9.jpg"> 
                        <img src="http://paulschurch.dev.cc/wp-content/uploads/2020/01/cS-9.jpg" />
                         </li>
                    <li data-thumb="http://paulschurch.dev.cc/wp-content/uploads/2020/01/cS-10.jpg"> 
                        <img src="http://paulschurch.dev.cc/wp-content/uploads/2020/01/cS-10.jpg" />
                         </li>
                    <li data-thumb="http://paulschurch.dev.cc/wp-content/uploads/2020/01/thumb/cS-11.jpg"> 
                        <img src="http://paulschurch.dev.cc/wp-content/uploads/2020/01/cS-11.jpg" />
                         </li>
                    <li data-thumb="http://paulschurch.dev.cc/wp-content/uploads/2020/01/cS-12.jpg"> 
                        <img src="http://paulschurch.dev.cc/wp-content/uploads/2020/01/cS-12.jpg" />
                         </li>
                    <li data-thumb="http://paulschurch.dev.cc/wp-content/uploads/2020/01/cS-13.jpg"> 
                        <img src="http://paulschurch.dev.cc/wp-content/uploads/2020/01/cS-13.jpg" />
                         </li>
                    <li data-thumb="http://paulschurch.dev.cc/wp-content/uploads/2020/01/cS-14.jpg"> 
                        <img src="http://paulschurch.dev.cc/wp-content/uploads/2020/01/cS-14.jpg" />
                         </li>
                    <li data-thumb="http://paulschurch.dev.cc/wp-content/uploads/2020/01/cS-15.jpg"> 
                        <img src="http://paulschurch.dev.cc/wp-content/uploads/2020/01/cS-15.jpg" />
                         </li>
                </ul>
            </div>
        </div>
        
    </div>

Open in new window

Avatar of Mrunal
Mrunal
Flag of India image

Hi Alicia,
Check step by step.
1. Just add simple alert in Javascript code instead of calling 'lightslider' code.
2. If you are getting alert then only add lightslider code.
Also make sure you have added reference to related javascript and css in same page.

Check this live example:
https://codepen.io/sachinchoolur/pen/Ihoev
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Alicia St Rose

ASKER

Yes!! Option number #2, the Non-IIFE solution, worked!!!

Thank you SO much!!
You are welcome.