I am making my first steps learning to code. I made some courses on Internet an now I decided to build a Wordpress theme so like this I can continue learning from the practice.
I decided to make an image slider, so for this I decided to install a Jquery plugin. I know that I can install a wordpress plugin but I think that it's convenient to learn how to install a Jquery plugin too for many reasons.
I followed these steps to install the bxSlider plugin, but unfortunately there is something that it's not ok and it makes my plugin doesn't work:
1) Functions.php: I loaded all the files that I need
function loadbxslider() {
wp_enqueue_style('bxstyle', '/jquery.bxslider/jquery.bxslider.css');
wp_enqueue_script('bxscript', '/jquery.bxslider/jquery.bxslider.min.js', array('jquery'));
}
add_action('init', 'loadbxslider');
2) Header.php: I wrote this before <?php wp_head(); ?>:
<!--?php wp_enqueue_script('jquery'); ?-->
<!--?php wp_head(); ?-->
And this inmediately after <?php wp_head(); ?>:
<script type="text/javascript">// <![CDATA[
jQuery(document).ready(function(){
jQuery('#slidebx').bxSlider({
mode: 'horizontal',
infiniteLoop: true,
speed: 2000,
pause: 8000,
auto: true,
pager: false,
controls: true
});
});
// ]]></script>
So the first part of my header.php is like this:
?><!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<?php if ( is_singular() && pings_open( get_queried_object() ) ) : ?>
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php endif; ?>
<!--?php wp_enqueue_script('jquery'); ?-->
<!--?php wp_head(); ?-->
<?php wp_head(); ?>
<script type="text/javascript">// <![CDATA[
jQuery(document).ready(function(){
jQuery('#slidebx').bxSlider({
mode: 'horizontal',
infiniteLoop: true,
speed: 2000,
pause: 8000,
auto: true,
pager: false,
controls: true
});
});
// ]]></script>
</script>
</head>
3) bxSlider inside my content: using the id slidebx
<div id="slidebx">
<div><?php the_field('image1'); ?></div>
<div><?php the_field('image2'); ?></div>
<div><?php the_field('image3'); ?></div>
<div><?php the_field('image4'); ?></div>
<div><?php the_field('image5'); ?></div>
<div><?php the_field('image6'); ?></div>
<div><?php the_field('image7'); ?></div>
<div><?php the_field('image8'); ?></div>
<div><?php the_field('image9'); ?></div>
<div><?php the_field('image10'); ?></div>
</div>
I have a week trying to discover why this plugin doesn't work. If you have some suggestion would be good for my learning process.