b1234 b1234 - 3 months ago 10
CSS Question

Simple Jquery slide not working?

I have a simple FlexSlider 2 slideshow on my website however it isn't working the images just go on to the page underneath each other? I'm new to Jquery so just stuck as to why it won't work?
I have these links in my header.php

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script src="js/jquery.flexslider-min.js"></script>


slideshow.php

<script src="assets/js/slideshow.js"></script> //js and images are in assets folder
<div class="flexslider">
<ul class="slides">
<li>
<img src="assets/images/winter.jpg" />
</li>
<li>
<img src="assets/images/sunset.jpg" />
</li>
<li>
<img src="assets/images/dock.jpg" />
</li>
<li>
<img src="assets/images/snow.jpg" />
</li>
</ul>
</div>
<div class="custom-navigation">
<a href="#" class="flex-prev">Prev</a>
<div class="custom-controls-container"></div>
<a href="#" class="flex-next">Next</a>
</div>


slideshow.js

<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
controlsContainer: $(".custom-controls-container"),
customDirectionNav: $(".custom-navigation a")
});
});
</script>

Answer
  1. Remove the second script and the fourth one.
  2. Be sure that Jquery fires before FlexSlider.

Example:

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div class="flexslider">
<ul class="slides">
<li>
  <img src="assets/images/winter.jpg" />
</li>
<li>
  <img src="assets/images/sunset.jpg" />
</li>
<li>
  <img src="assets/images/dock.jpg" />
</li>
<li>
  <img src="assets/images/snow.jpg" />
</li>
</ul>
</div>
  <div class="custom-navigation">
 <a href="#" class="flex-prev">Prev</a>
 <div class="custom-controls-container"></div>
 <a href="#" class="flex-next">Next</a>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/jquery.flexslider-min.js"></script>
<script type="text/javascript" charset="utf-8">
     $(window).load(function() {
     $('.flexslider').flexslider({
     animation: "slide",
     controlsContainer: $(".custom-controls-container"),
     customDirectionNav: $(".custom-navigation a")
     });
     });
</script>
</body>
</html>
Comments