Thread Rating:
  • 1 Vote(s) - 5 Average
  • 1
  • 2
  • 3
  • 4
  • 5
[For 1.8] [Tutorial] - Simply Add bxslider jQuery Content Slider to your Index and or Portal
#1
Information 
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:
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:

.zip   bxslider.zip (Size: 778.11 KB / Downloads: 59)
MyBB Themes Team - Making more professional themes by the hour. (Retired)
Reply
#2
Tried this, didnt work in my forum. I have Majestic theme. Instead of at top, slider was in bottom and it wasnt working properly.
Reply
#3
(12-12-2016, 12:38 AM)Darkrad Wrote: Tried this, didnt work in my forum. I have Majestic theme. Instead of at top, slider was in bottom and it wasnt working properly.

That is most likely because majestic already has bxslider in the portal/home page so the existing styling is most likely conflicting.., you would have to most likely modify to not conflict...
MyBB Themes Team - Making more professional themes by the hour. (Retired)
Reply
#4
I lost mine that you configured everything is the same but the slides are not showing so I have to tear the site apart to find where they are listed
May the source be with you!
Reply
#5
(10-09-2017, 02:10 AM)Starnova Wrote: I lost mine that you configured everything is the same but the slides are not showing so I have to tear the site apart to find where they are listed

In the forum folders, find: bxslider -> slides -> portal
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)