Install slider script - How ?
Autor: John WilkinsI have this slider script and want to install the slider in my home page below the menu,
I have no idea how to do this, can anyone help ?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Trisquel 6 Slider</title>
<!-- bjqs.css contains the *essential* css needed for the slider to work -->
<link rel="stylesheet" href="bjqs.css">
<!-- load jQuery and the plugin -->
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="js/bjqs-1.3.min.js"></script>
</head>
<body>
<div id="container">
<h2>Trisquel 6</h2>
<!-- Outer wrapper for presentation only, this can be anything you like -->
<div id="banner-fade">
<!-- start Basic Jquery Slider -->
<ul class="bjqs">
<li><img src="img/Cinnamon.jpg" width="620" height="387" alt="" border="0" title="Trisquel 6 with Cinnamon Desktop"></li>
<li><img src="img/banner02.jpg" title="Automatically generated caption"></li>
<li><img src="img/banner03.jpg" title="Automatically generated caption"></li>
<li><img src="img/banner03.jpg" title="Automatically generated caption"></li>
<li><img src="img/banner03.jpg" title="Automatically generated caption"></li>
<li><img src="img/banner03.jpg" title="Automatically generated caption"></li>
<li><img src="img/banner03.jpg" title="Automatically generated caption"></li>
<li><img src="img/banner03.jpg" title="Automatically generated caption"></li>
</ul>
<!-- end Basic jQuery Slider -->
</div>
<!-- End outer wrapper -->
<script class="secret-source">
jQuery(document).ready(function($) {
$('#banner-fade').bjqs({
height : 320,
width : 620,
responsive : true
});
});
</script>
</div>
</body>
</html>
Hello John,
Unfortunately I cannot give you support to custom code since the functionalities, doesn't depends on the program but I can explain you how to add it in the program.
You need to use the HTML&Widget Object in step 3, where you paste the code, but only the part between <body> and </body> and then in the Expert tab you add the javascript file bjqs-1.3.min.js by choosing to add it in a folder called js
Following code is not necessary:
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
Then you need to add also all images in the expert tab and choose to add them in a folder called img
Please feel free to write back if you need more information.