Alicia St Rose
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:
The HTML:
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' );
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>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Yes!! Option number #2, the Non-IIFE solution, worked!!!
Thank you SO much!!
Thank you SO much!!
You are welcome.
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