TinyPortal
Development => Block Codes => Topic started by: SamoanOnion on September 20, 2022, 08:24:34 AM
hello,
I was looking for the code to create the block like the one on the frontpage that scrolls through a few selected images.
Welcome to TinyPortal.
The block you are referring to is using a html code with a 'slider'.
It was asked about before here: https://www.tinyportal.net/index.php?topic=36201.msg295560#msg295560
Mind you: you will need to install some script...
The slider code comes from here: https://bxslider.com/
And to give you an example: the block is a HTML/Javascript block, that holds below code...
<!-- Start HEAD section --> <!-- add to the <head> of your page -->
<!--<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> -->
<!-- End HEAD section -->
<!-- Start BODY section --> <!-- add to the <body id="tpbody" class="tpcontnainer"> of your page -->
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({
auto: true,
autoControls: true,
speed: 600,
responsive: true,
captions: true,
});
});
</script>
<ul class="bxslider">
<li><img src="data1/images/articles.png" title="A Powerful Article System"/></li>
<li><img src="data1/images/blocks.png" title="Blocks Built in, or Create Your Own"/></li>
<li><img src="data1/images/downloads.png" title="A Built In Downloads System"/></li>
<li><img src="data1/images/menu.png" title="Menu's and Site Maps"/></li>
<li><img src="data1/images/shoutbox.png" title="A Great Shoutbox"/></li>
<li><img src="data1/images/adminp.png" title="A Neat Admin Panel"/></li>
</ul>
<!-- bxSlider Javascript file -->
<script src="https://tinyportal.net/bxslider/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="https://tinyportal.net/bxslider/jquery.bxslider.css" rel="stylesheet" /> <!-- replace with link to the css -->
Thanks!