[TUT] - Simply Add BXSlider to your Index and or Portal (in 5 easy steps)

[TUT] - Simply Add BXSlider to your Index and or Portal (in 5 easy steps) *

* simply a quick share again of the tutorial from 2016 upon re-visting it just now while applying a few minor edits (primarily almost identical to original tutorial with minor addition of caption and links but on using bxSlider v4.2.12 now I noticed an issue when adding links so a minor tweak to the js was required to sort that out) (*note all the styling variants that were once provided via replies to this particular tutorial will not be re-added as those were lost when the original thread was deleted, but, hey, here is at least the simple tutorial for anyone still interested in say simply adding bxslider to their forum and then taking it from there...)

ie:



1) download the required files: http://s000.tinyupload.com/index.php?fil...2819964765

2) extract the bxslider.zip file

3) upload the extracted "bxslider" directory to your forum root directory ie: forum/bxslider

4) Edit Template: headerinclude

find:

{$stylesheets}

Add this after:

<!-- bxSlider CSS file -->
<link href="{$mybb->asset_url}/bxslider/css/jquery.bxslider.css" rel="stylesheet" />

<!-- bxSlider JS file -->
<script src="{$mybb->asset_url}/bxslider/js/jquery.bxslider.js"></script>

<!-- bxSlider init start -->
<script type="text/javascript">
$(document).ready(function () {
	$('.bxslider').bxSlider({
		mode: 'fade',
		auto: true,
		autoControls: true,
		stopAutoOnClick: true,
		captions: true,		
		pager: true
	});
});
</script>
<!-- bxSlider init end -->

Next, for either 5.A or 5.B or both....

Now, if desired on the index page:

5.A) Edit Template: index

Find:

{$headerinclude}

Add this after:

<!-- index-slider inline style start -->
<style>
.index-slider-wrapper {
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

@media screen and (max-width: 414px) {
	.bx-wrapper .bx-caption span {
		padding: 1px;
	}
</style>
<!-- index-slider inline style end -->

Find:

{$header}

Add this after:

<!-- index-slider start -->
<div class="index-slider-wrapper">
   <ul class="bxslider">
      <li><a href="{$mybb->asset_url}/portal.php"><img src="{$mybb->asset_url}/bxslider/slides/index/pic1.jpg" title="Click to visit our portal!"></a></li>
      <li><a href="{$mybb->asset_url}/member.php?action=register"><img src="{$mybb->asset_url}/bxslider/slides/index/pic2.jpg" title="Click to register today!"></a></li>
      <li><a href="{$mybb->asset_url}/misc.php?action=help"><img src="{$mybb->asset_url}/bxslider/slides/index/pic3.jpg" title="Click to visit our help section!"></a></li>
   </ul>
</div>
<!-- index-slider end -->

Now, if desired on the portal page:

5.B) Edit Template: portal

Find:

{$headerinclude}

Add this after:

<!-- portal-slider inline style start -->
<style>
.portal-slider-wrapper {
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

@media screen and (max-width: 414px) {
	.bx-wrapper .bx-caption span {
		padding: 1px;
	}
</style>
<!-- portal-slider inline style end -->

Find:

{$header}

Add this after:

<!-- portal-slider start -->
<div class="portal-slider-wrapper">
   <ul class="bxslider">
      <li><a href="{$mybb->asset_url}/index.php"><img src="{$mybb->asset_url}/bxslider/slides/portal/pic1.jpg" title="Click to visit our forum!"></a></li>
      <li><a href="{$mybb->asset_url}/member.php?action=register"><img src="{$mybb->asset_url}/bxslider/slides/portal/pic2.jpg" title="Click to register today!"></a></li>
      <li><a href="{$mybb->asset_url}/misc.php?action=help"><img src="{$mybb->asset_url}/bxslider/slides/portal/pic3.jpg" title="Click to visit our help section!"></a></li>
   </ul>
</div>
<!-- portal-slider end -->

You would then keep modifying further for your usages...


Best of luck! Happy Editing!    ~ V