CODEWITHSUNDEEP
javascriptjqueryhtmljquery-pluginsbxslider
Craig Walker
Craig Walker

Reputation: 43

Installing BxSlider

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.

Upvotes: 0

Views: 11754

Answers (3)

Raman Singh
Raman Singh

Reputation: 161

Here is working code(just create new html file where u extract bxslider folder)

    <!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="jquery.bxslider.min.js"></script>
    <link href="jquery.bxslider.css" rel="stylesheet" />
    <script type="text/javascript">
        $(document).ready(function () {
            $(".bxslider").bxSlider();
        });
    </script>
</head>

<body>
    <div style="width:700px;height:250px;align:center;padding-left:250px;">
        <ul class="bxslider">
            <li>
                <img src="http://localhost/wordpress-4.1/wordpress/wp-content/uploads/2015/02/Desert.jpg" />
            </li>
            <li>
                <img src="http://localhost/wordpress-4.1/wordpress/wp-content/uploads/2015/02/Desert.jpg" />
            </li>
            <li>
                <img src="http://localhost/wordpress-4.1/wordpress/wp-content/uploads/2015/02/Desert.jpg" />
            </li>
        </ul>
    </div>
</body>
</html>

Upvotes: 0

David Pilcha
David Pilcha

Reputation: 15

i noticed some thing that might be a problem:
You didn't closed some code part properly
This is yours:

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


This is mine:

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


Also i put this code part in the "head" section and it worked. Give it a try. I hope i helped somehow.

Upvotes: 0

christian.thomas
christian.thomas

Reputation: 1122

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/

Upvotes: 1

Related Questions