I am having trouble getting the jquery cycle2 plugin to work. The slideshow doesn't load and the images. They just appear 1 underneath each other. I don't see any console errors. I have the latest jquery(3.0). Here is my code. By the way, I am relatively new to javascript and jquery.
Here is my header:
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<script type="text/javascript" src="<?php echo get_template_directory_uri();?>/assets/scripts/jquery.min.js"></script>
<!-Cycle-->
<script type= "text/javascript" src = "<?php echo get_template_directory_uri();?>/assets/scripts/jquery.cycle2.min.js"></script>
</header>
And here I inserted the javascript in my footer before the
<!-- Slideshow -->
<script language="javascript">
$('document').ready(function($){
$('#slideshow').cycle({
timeout:0, // no autoplay
fx: 'fade', //
next: '#next',
prev: '#prev'
});
});
</script>
And lastly, here is my div:
<div id="slideshow">
<div style="width:250px; height:150px; background:red;"></div>
<div style="width:250px; height:150px; background:blue;"></div>
<div style="width:250px; height:150px; background:green;"></div>
<div style="width:250px; height:150px; background:yellow;">
</div>
<div id="prev" style="float:left;">PREV</div>
<div id="next" style="float:right;">NEXT</div>
I am not sure why this isn't working. As this is an example that was previously given by someone. I am using wordpress by the way. It is not working in chrome nor firefox.
Aucun commentaire:
Enregistrer un commentaire