DNN Spot rotator

DNN spot rotator  is a DNN module which enables you to create slider and customize it's template

To use it, download it, and create a new template, inside the template body past the following

<style type="text/css">

    .sliderContainer {

        direction: rtl;

        text-align: right;

    }

        .sliderContainer .nextBtn a {

            color: rgba(255, 255, 255, 0.00);

            width: 27px;

            height: 27px;

            position: absolute;

            top: 50%;

            right: 0;

            z-index: 999;

            padding-top: 10px;

            padding-bottom: 10px;

            cursor: pointer;

            background-color: rgba(255, 255, 255, 0.42);

            background: center url('/images/next.png') no-repeat;

            opacity: 0.5;

            -moz-transition: opacity ease-in-out 500ms;

            -o-transition: opacity ease-in-out 500ms;

            -webkit-transition: opacity ease-in-out 500ms;

            transition: opacity ease-in-out 500ms;

        }

        .sliderContainer .prevBtn a {

            color: rgba(255, 255, 255, 0.00);

            width: 27px;

            height: 27px;

            position: absolute;

            top: 50%;

            left: 0;

            z-index: 999;

            padding-top: 10px;

            padding-bottom: 10px;

            cursor: pointer;

            background-color: rgba(255, 255, 255, 0.42);

            background: center url('/images/prev.png') no-repeat;

            opacity: 0.5;

            -moz-transition: opacity ease-in-out 500ms;

            -o-transition: opacity ease-in-out 500ms;

            -webkit-transition: opacity ease-in-out 500ms;

            transition: opacity ease-in-out 500ms;

        }

        .sliderContainer .nextBtn:hover, .sliderContainer .prevBtn:hover {

            opacity: 1;

        }

        .sliderContainer .slides {

            float: right;

        }

            .sliderContainer .slides img {

                border: 1px solid #D7D7D7;

            }

        .sliderContainer .slidePager {

            float: right;

        }

            .sliderContainer .slidePager ul {

                position: relative;

                display: inline-block;

                width: 100%;

            }

                .sliderContainer .slidePager ul li {

                    display: block;

                    padding: 2px;

                    padding-right: 5px;

                    line-height: 1.6em;

                    border-bottom: 1px solid #D7D7D7;

                }

                    .sliderContainer .slidePager ul li a {

                        color: black;

                    }

            .sliderContainer .slidePager .activeSlide {

                background-color: antiquewhite;

            }

</style>

<div class="sliderContainer">

    <div class="slides">

        [SLIDES]

        <div class="nextBtn">

            [NEXT]

        </div>

        <div class="prevBtn">

            [PREV]

        </div>

    </div>

    <div class="slidePager">

        [PAGER]

    </div>

</div>