vBulletin CMS Widgets - Slider Widget s3slider

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:

Widget Type: Static HTML
Title: Slider
Description: Content Slider

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

<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>

Developer of the slider is Creative Commons Attribution

[Gary Granaas]

Doesn't rotate banners in my 4.2.0

[Gary Granaas]

<a href="http://www.dbcnutrition.com/forum/content.php" target="_blank">http://www.dbcnutrition.com/forum/content.php</a>

What I did was use this for a single banner on the CMS page and change the code around so it changes the size how I see fit and links to another url and opens another browser. Wont work for me to rotate banners but this does have a good use for using that spot as a sponsor ad. Here's what I did with the code. Hope we can get a slider working here.

<style type="text/css">
ul#slider {
width: 705px;
height: 275px;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}

ul#slider li {
float: center;
position: relative;
/*display: none;*/
}

ul#slider li div {
position: absolute;
width: 705px;
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>
<a href="http://www.dbcnutrition.com/index.php?main_page=advanced_search_result&search_ in_description=1&keyword=Evoge n&x=0&y=0" target="_blank"><img src="http://www.dbcnutrition.com/evogen.jpg" alt="Evogen" width="705" height="280" /></a>
<div class="top">
Steve Kuclo Mr USA
</div>
</li>
</ul>

[Greeksgal]

How do I quicken up the speed of the images rotating? Working great in 4.2.1. js folder goes into forum root as far as I can tell.

[Zippeh XF]

I was wondering if i could get some help, its ot working right for me, im using 4.2.2
I copied the information in the guide and did it right, uploaded the files and thisis what i see

[RichieBoy67]

Originally Posted by Zippeh XF

I was wondering if i could get some help, its ot working right for me, im using 4.2.2
I copied the information in the guide and did it right, uploaded the files and thisis what i see

You have to paste the code into where it says Enter static html... Replace the image links with your own.

[Mecho]

is it really working on 4.2.2 ??? i have tried but no luck

[ArcadeSyndicate]

yes it still is working fine, also on 4.2.2

to make it even look better just wrap the whole code in <center> and adjust the px size in the css