Just a basic tutorial to show you how to quickly add bxslider to your forum on either portal or index or both...
Simple example on Index:
![[Image: 119m3p5.png]]()
Simple example on Portal:
![[Image: v7qv44.png]]()
Edit template: headerinclude
find:
Add after:
Edit template: index
Find:
Add after:
Then also in index find:
Add above:
in portal find:
add after:
Still in portal find:
add after:
Download / extract and upload the bxslider folder to your forum root directory:
![.zip]( "Zip File")
bxslider.zip (Size: 778.11 KB / Downloads: 13)
Simple example on Index:
Simple example on Portal:
Edit template: headerinclude
find:
Code:
{$stylesheets}Add after:
Code:
<!-- bxSlider CSS file -->
<link href="{$mybb->asset_url}/bxslider/css/jquery.bxslider.css" rel="stylesheet" />
<!-- bxSlider Javascript file -->
<script src="{$mybb->asset_url}/bxslider/js/jquery.bxslider.js"></script>
<!-- bxSlider init start -->
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({
auto: true,
mode: 'fade'
});
});
</script>
<!-- bxSlider init end -->Edit template: index
Find:
Code:
<script type="text/javascript">
<!--
lang.no_new_posts = "{$lang->no_new_posts}";
lang.click_mark_read = "{$lang->click_mark_read}";
// -->
</script>Add after:
Code:
<!-- index-slider inline style start -->
<style>
.index-slider-wrapper {
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
</style>
<!-- index-slider inline style end-->Then also in index find:
Code:
{$forums}Add above:
Code:
<!-- index-slider start-->
<div class="index-slider-wrapper">
<ul class="bxslider">
<li><img src="{$mybb->asset_url}/bxslider/slides/index/picto.png" /></li>
<li><img src="{$mybb->asset_url}/bxslider/slides/index/houses.jpeg" /></li>
<li><img src="{$mybb->asset_url}/bxslider/slides/index/hillside.jpeg" /></li>
</ul>
</div>
<!-- index-slider end -->in portal find:
Code:
{$headerinclude}add after:
Code:
<!-- portal-slider inline style start -->
<style>
.portal-slider-wrapper {
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
</style>
<!-- portal-slider inline style end-->Still in portal find:
Code:
{$header}add after:
Code:
<!-- portal-slider start-->
<div class="portal-slider-wrapper">
<ul class="bxslider">
<li><img src="{$mybb->asset_url}/bxslider/slides/portal/picto.png" /></li>
<li><img src="{$mybb->asset_url}/bxslider/slides/portal/houses.jpeg" /></li>
<li><img src="{$mybb->asset_url}/bxslider/slides/portal/hillside.jpeg" /></li>
</ul>
</div>
<!-- portal-slider end -->Download / extract and upload the bxslider folder to your forum root directory:
bxslider.zip (Size: 778.11 KB / Downloads: 13)