SunBlogNuke - DotNetNuke Blog Module

As this awesome post covered, you can turn turn DNN Announcements Module into a jQuery Slider easily with some customized steps. Now I would like to show you that we also can integrated Content Slider Widget (the core widget of Ultimate DNN Blog Module – SunBlogNuke) with a jQuery carousel seamlessly and easily make it run well as you expected. Please visit the demo link to see how it action firstly.

Now let us go ahead the customized process below on how to add it to your site.

1) Add the Content Slider Widget module to your page.

2) Enter the "Widget Settings" panel. Note that we just focus on the template configures in the following steps and you can feel free to configure other settings.

3) In the "Header Markup" text area, enter the following code:

<div class="js-carousel-post cleared">
    <div id="js-carousel" class="container">
        <ul>

4) In the "Footer Markup" text area, enter the following code to close out the ul and div tags:

        </ul>
    </div>
</div>

5) In the "Item Template" text area, enter the following code for showing item content:

<li id="postItem_[POSTID]">
    <h3><a href="[TARGET]">[TITLE]</a></h3>
    <p>[EXCERPTTEXT]</p>
</li>

6) Make sure whether there exist the core jQuery framework in the current page. It should be there if your website is above 5.x.

7) Add the Html module to your page and click "Edit Content" and enter html editor panel.

8) Switch to "Rich Text Editor" mode and click "Source" into html source as screenshot below:

9) Copy the following codes and paste it into the text area:

<style type="text/css">
    .js-carousel-post
    {
        position: relative;
    }
    .js-carousel-post #js-carousel
    {
        width: 600px;
        margin: 0 auto;
        float: left;
        position: relative;
    }
    .js-carousel-post .container
    {
        overflow: hidden; /* fix ie overflow issue */
        position: relative;
        width: 610px;
        height: 230px;
    }
    .js-carousel-post ul
    {
        position: relative;
        left: 0;
        top: 0;
        margin: 0 0 0 -619px;
        width: 9999px;
        height: 230px;
        overflow: hidden;
    }
    .js-carousel-post li
    {
        width: 585px;
        float: left;
        margin: 0 3px;
        padding: 0 5px;
        height: 230px;
        list-style: none;
    }
</style>  
<script type="text/javascript" language="javascript">
    var carousel = (function() {
        // Configurable Variables
        var init_autoRun = true;
        var autoSpeed = 2000;
        // Common Variables
        var li_posL = parseInt($('#js-carousel ul').css('left'));
        var li_w = $('#js-carousel li').outerWidth();
        var ul_posL = li_w * (-0);

        function rotation() {
            var indent = li_posL - li_w;
            $('#js-carousel ul').animate({ 'left': indent }, 'slow', function() {
                $('#js-carousel li:last').after($('#js-carousel li:first'));
                $('#js-carousel ul').css({ 'left': ul_posL });
            });
            return false;
        }

        $('#js-carousel li:first').before($('#js-carousel li:last'));
        $('#js-carousel ul').css({ 'left': ul_posL });
        if (init_autoRun) {
            var autoRun = setInterval(rotation, autoSpeed);
            //if mouse hover, pause the auto rotation, otherwise rotate it
            jQuery('#js-carousel').hover(function() {
                clearInterval(autoRun);
            }, function() {
                autoRun = setInterval(rotation, autoSpeed);
            });
        }
    });

    jQuery(document).ready(function() {
        carousel();
    });
</script>

10) Click "Save" and return front-end page. Then you will discover that the Content Slider Widget had been turned into a jQuery carousel and works like a charm. :)

Note that you choose some alternative ways to complete the steps 7)-10), like adding style into skin style file (skin.css) and attaching script into skin control (YourSkinName.ascx).

More enhancements you can do

Actually you can do more customizations than what we mentioned above. This tutorial is just a start for you, for example, you can create a cool navigation (Previous & Next) with the content slider or integrate more extremely popular jQuery plugins like s3slider or bxSlider. In a word, it depends on what you image.

What we can do for you

We will make the content slider widget more flexible and extendible. Next we will provide a built-in way to implement those customizations in the widget itself but not with any external helps. Please stay tune and leave a note if you have any advice.:)