WebSite X5Help Center

 
John Wilkins
John Wilkins
User

Install slider script - How ?  en

Author: John Wilkins
Visited 3196, Followers 2, Shared 0  

I 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>

Posted on the
1 ANSWERS
Incomedia
Claudio D.
Incomedia

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.

Read more
Posted on the from Claudio D.