Question

I am a complete beginner to website design and I am trying to create a more modern website for my company. The current one is less than glamorous (Greenlite.co.uk).

After spending a lot of time trying to make a Flash banner for the homepage it occurred to me that Flash is probably quite outdated and not view able from all platforms. This is when I came across the BxSlider, and it really looks great! If only I could get it to work on my site.

I am using CoffeeCup Visual Site Designer, I then used the ‘Add HTML’ tool. Into the ‘Insert HTML’ window I have placed as follows;

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="js/jquery.bxslider.min.js"></script>
<link href="js/jquery.bxslider.css" rel="stylesheet" />


<ul class="bxslider">
  <li><img src="images/timeline1.jpg" title="An Energy Conservation Company"></li>
 <li><img src="images/image1.jpg" title="Designers and Manufactors of Quality Lighting Controls"></li>
<li><img src="images/back12.jpg" title="Caption to go here"></li>

</ul>

<script type="text/javascript">$(document).ready(function(){
$('.bxslider').bxSlider();
});
mode: fade,
captions: true,
auto: true,
autoControls: false
});
});
</script>

I have followed, as well as I could, the instructions shown on bxslider.com. I downloaded the package from bxslider, adding the files to coffeecup and linking the location in the script. I also added my images to CoffeeCup and wrote in their location.

When I preview my website I am rewarded with my three images all shown at once, each underneath the other, with a mouse over caption. Alongside the images are a bullet point.

What I am trying to achieve is a Bxslider with auto start, displaying stop/start controls and with captions.

I have attempted many variations, the script I have shown being my original attempt.

The closest I have got to a working Bxslider is by copying code I found from a website for the old version bxslider. This gave me an image slideshow with headers. If I tried to edit the code to my specifications then it would take me back to square one.

I am entirely aware that I am likely to be making a very obvious mistake. However, to the untrained eye it’s giving me nothing but headaches. Any help would be largely appreciated.

Answer 1

The Javascript you’ve got is invalid. Try changing the Javascript to:

<script type="text/javascript">
  $(document).ready(function(){
    $('.bxslider').bxSlider({
        mode: 'fade',
        captions: true,
        auto: true,
        autoControls: false
    });
  });
</script>

See working jsfiddle – http://jsfiddle.net/FLuRH/