Slider Widget s3slider
Mod Version: 1.00, by CrazyProgrammer
| vB Version: 4.0.2 | Rating:  (6 votes - 4.17 average) |
Installs: 72 |
| Released: 19 Mar 2010 | Last Update: Never | Downloads: 783 |
 Not Supported
 Uses Plugins
Template Edits
Re-usable Code
Translations
|
||
Here is a lite slider for vbulletin CMS
Login into Admin Panel(Admincp)
Open up vBulletin CMS in Sidebar click Widgets when page opens click Create New Widget near bottom page
Then a new page will come up and choose the following options:
click save
now you will see a widget called slider click configure and paste the following into the Enter Static HTML Box Edit the pictures you want and then Click save and you done.
Edit your Layout to show the widget where you want i would choose the Middle box in Home Layout
Developer of the slider is http://www.serie3.info/s3slider/
Login into Admin Panel(Admincp)
Open up vBulletin CMS in Sidebar click Widgets when page opens click Create New Widget near bottom page
Then a new page will come up and choose the following options:
Code:
Widget Type: Static HTML Title: Slider Description: Content Slider
now you will see a widget called slider click configure and paste the following into the Enter Static HTML Box Edit the pictures you want and then Click save and you done.
Edit your Layout to show the widget where you want i would choose the Middle box in Home Layout
Code:
<style type="text/css">
ul#slider {
width: 430px;
height: 270px;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
ul#slider li {
float: left;
position: relative;
/*display: none;*/
}
ul#slider li div {
position: absolute;
width: 373px;
background-color: #000;
color: #fff;
left: 0;
/*display: none;*/
padding: 10px;
}
.top {
top: 0;
}
.bottom {
bottom: 0;
}
</style>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/mySlider.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#slider").mySlider({
timeOut: 4000,
captionOpacity: .7
});
});
</script>
<ul id="slider">
<li>
<img src="images/slider/2.jpg" alt="" />
<div class="top">
Some nice text captions..
</div>
</li>
<li>
<img src="images/slider/3.jpg" alt="" />
<div class="bottom">
Some nice text captions..
</div>
</li>
<li>
<img src="images/slider/4.jpg" alt="" />
<div class="bottom">
Some nice text captions..
</div>
</li>
</ul>
Download
slider_widget.zip (745.3 KB, 1303 downloads)
Screenshots
