Just a basic tutorial to show you how to quickly add Nivo Slider to your forum on either portal or index or both...
Edit template: headerinclude
find:
Add after:
Basic Example on Index:
![[Image: sgie8p.png]]()
Edit template: index
find:
Add above:
Basic example on portal:
![[Image: 2zg6ttl.png]]()
in portal find:
add after:
Download / extract and upload the nivo-slider folder to your forum root directory:
![.zip]( "Zip File")
nivo-slider.zip (Size: 338.09 KB / Downloads: 6)
Edit template: headerinclude
find:
Code:
{$stylesheets}Add after:
Code:
<!-- Nivo-Slider Styling Start -->
<!-- CSS Incudes -->
<link rel="stylesheet" href="{$mybb->asset_url}/nivo-slider/themes/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="{$mybb->asset_url}/nivo-slider/themes/light/light.css" type="text/css" media="screen" />
<link rel="stylesheet" href="{$mybb->asset_url}/nivo-slider/themes/dark/dark.css" type="text/css" media="screen" />
<link rel="stylesheet" href="{$mybb->asset_url}/nivo-slider/themes/bar/bar.css" type="text/css" media="screen" />
<link rel="stylesheet" href="{$mybb->asset_url}/nivo-slider/css/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="{$mybb->asset_url}/nivo-slider/css/style.css" type="text/css" media="screen" />
<!-- JS Includes -->
<script type="text/javascript" src="{$mybb->asset_url}/nivo-slider/js/jquery.nivo.slider.js"></script>
<!-- Nivo-Slider Styling End -->
<!-- Nivo-Slider Init Start-->
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
<!-- Nivo-Slider Init End-->Basic Example on Index:
Edit template: index
find:
Code:
{$forums}Add above:
Code:
<!-- Nivo-Slider Index Start-->
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="nivo-slider/images/slides/toystory.jpg" data-thumb="nivo-slider/images/slides/toystory.jpg" alt="" />
<a href="https://mybb.com"><img src="nivo-slider/images/slides/up.jpg" data-thumb="nivo-slider/images/slides/up.jpg" alt="" title="This is an example of a caption" /></a>
<img src="nivo-slider/images/slides/walle.jpg" data-thumb="nivo-slider/images/slides/walle.jpg" alt="" data-transition="slideInLeft" />
<img src="nivo-slider/images/slides/nemo.jpg" data-thumb="nivo-slider/images/slides/nemo.jpg" alt="" title="#htmlcaption" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>
</div>
<!-- Nivo-Slider Index End -->Basic example on portal:
in portal find:
Code:
{$header}add after:
Code:
<!-- Nivo-Slider Portal Start-->
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="nivo-slider/images/slides/toystory.jpg" data-thumb="nivo-slider/images/slides/toystory.jpg" alt="" />
<a href="https://mybb.com"><img src="nivo-slider/images/slides/up.jpg" data-thumb="nivo-slider/images/slides/up.jpg" alt="" title="This is an example of a caption" /></a>
<img src="nivo-slider/images/slides/walle.jpg" data-thumb="nivo-slider/images/slides/walle.jpg" alt="" data-transition="slideInLeft" />
<img src="nivo-slider/images/slides/nemo.jpg" data-thumb="nivo-slider/images/slides/nemo.jpg" alt="" title="#htmlcaption" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>
</div>
<!-- Nivo-Slider Portal End -->Download / extract and upload the nivo-slider folder to your forum root directory:
nivo-slider.zip (Size: 338.09 KB / Downloads: 6)