Help - Search - Members - Calendar
Full Version: bxslider script
HTMLHelp Forums > Programming > Client-side Scripting
cjr
I am setting up this bxslider script: Examples | Responsive jQuery Slider | bxSlider


Where does this JS code go? (I believe I have all css and js files in the correct location)
JS:
$('.bxslider').bxSlider({
video: true,
useCSS: false
});






**I know where this goes**


HTML:
<!-- <script src="/js/plugins/jquery.fitvids.js"></script> must be included in the <head>
after the jQuery library, and before the jquery.bxslider.js file. See the source code
of this page for an example. -->


<ul class="bxslider">
<li>
<iframe src="http://player.vimeo.com/video/17914974" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</li>
<li><img src="/images/730_200/houses.jpg" /></li>
</ul>
The file jquery.fitvids.js (found in the plugins folder) must be called AFTER the jQuery library, and BEFORE the jquery.bxslider.js file. An example <head> could look like the following:


<head>
<!-- other stuff here -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="/js/plugins/jquery.fitvids.js"></script>
<script src="/js/jquery.bxslider.js"></script>
</head>
Frederiek
The bxslider can be found here: http://bxslider.com/examples/video . (You forgot to post the link here.)

Place that js either directly in a script tag or in an external js file.

In either case, it needs to go inside the HEAD of the page, AFTER the three script files you should already place there, as shown above in the example.
cjr
QUOTE(Frederiek @ Aug 13 2014, 03:28 AM) *

The bxslider can be found here: http://bxslider.com/examples/video . (You forgot to post the link here.)

Place that js either directly in a script tag or in an external js file.

In either case, it needs to go inside the HEAD of the page, AFTER the three script files you should already place there, as shown above in the example.



I have uploaded bxslider to this url: bxslider All js and css files are placed. Any error you can see for why it's not working? No syntax errors in Dreamweaver.
Frederiek
No need to PM me, I'll see your replies in the thread.

Did you also read the readme.md file that came with the download?
It says you need jquery's ready() function, like this:
CODE
$(document).ready(function(){
    $('.bxslider').bxSlider({
        video: true,
        useCSS: false
    });
});

And I'd say you also need some DIVs around that UL list, so that it can be styled in CSS.
Classes are provided for that in the jquery.bxslider.css file. Maybe you need to adapt those to fit your slider size.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2024 Invision Power Services, Inc.