Creating a jQuery Image Slider

Question

Hi, Im trying to create a jQuery Slider like this http://bit.ly/5YFTs8

I cant find any tutorials or plugins anywhere that make em like this one. Cheers

Answer 1

I would highly recommend the SerialScroll plug-in here is a demo, and the documentation can be found here.

I created a really cool image slider with this plug-in and some simple html. Below is the code and HTML that I used.

<div id="featProd_container">
    <span id="previous" class="disable">&nbsp;</span>
    <span id="next" class="step">&nbsp;</span>

<%--    <div id="featProd_maskOver"></div>--%>
    <div id="featProd_mask">
        <asp:ListView ID="lvFeatured" runat="server" GroupItemCount="2">
            <LayoutTemplate>
                <div id="featProd_scroll">
                    <div id="groupPlaceholder" runat="server" />
                </div>
            </LayoutTemplate>
            <GroupTemplate>
                <div class="itemSet">
                    <div id="itemPlaceholder" runat="server" />
                </div>
            </GroupTemplate>
            <GroupSeparatorTemplate></GroupSeparatorTemplate>
            <ItemTemplate>
                <div class="item">
                    <a href='<%# ((string)Eval("DetailUrl")).Replace("~", "") %>'><img src='<%# Eval("SliderImageUrl") %>' /></a> 
                    <div class="itemInfo">
                        <h3><a href='<%# ((string)Eval("DetailUrl")).Replace("~", "") %>' style="color:Black;"><%# Eval("DisplayName") %></a> </h3> 
                        <span><%# Eval("ProductId")%></span>
                    </div>
                </div>            
            </ItemTemplate>       
        </asp:ListView>
    </div>
    <div id="jumpLinkContainer" style="display: table; margin:0 auto;">
        <ul id="featProd_control" style="width: 70px;">
            <asp:PlaceHolder ID="phJumpLinks" runat="server" /> 
        </ul>
    </div>
</div>

Just tee up a script call like this one below and configure the behavior and the navigation element selectors.

<script type="text/javascript">
    $(document).ready(function() { loadFeaturedProducts(); });

    function loadFeaturedProducts() {

        $('.item > a, .itemInfo > h3 > a').click(function() { var link = $(this).attr('href'); if (link) { document.location.href = link; } });

        $('#featProd_container > #featProd_mask').serialScroll({
            items: '#featProd_scroll > .itemSet',
            prev: '#featProd_container > #previous',
            next: '#featProd_container > #next',
            //offset: -230, //when scrolling to photo, stop 230 before reaching it (from the left)
            start: 0, //as we are centering it, start at the 2nd
            duration: 700,
            force: true,
            stop: true,
            lock: false,
            cycle: false, //don't pull back once you reach the end
            easing: 'easeOutQuart', //use this easing equation for a funny effect
            jump: true, //click on the images to scroll to them
            navigation: '#featProd_container > #jumpLinkContainer > #featProd_control > li',
            onBefore: function(e, elem, $pane, $items, pos) {

                var nav = $('#featProd_container > #jumpLinkContainer > #featProd_control > li');
                nav.removeClass("active"); nav.eq(pos).toggleClass("active");

                if ($items) {
                    var jq = $('#featProd_container > #next, #featProd_container > #previous').removeClass("disable");
                    if (pos == 0)
                        $('#featProd_container > #previous').toggleClass("disable");
                    else if (pos == ($items.length - 1))
                        $('#featProd_container > #next').toggleClass("disable");

                }
            }
        });
    }
</script>

Answer 2

Try this powerful jquery slider

Scrollable

Answer 3

Try the one in jQuery tools. Easy to implement and modify.

http://flowplayer.org/tools/demos/scrollable/index.html

Answer 4

I posted a blog post that builds a slide show area that does something very similar. Here is the link:

http://blog.bobcravens.com/2009/12/27/BuildingAWebAppSlideShowArea.aspx

It will take a bit of modification. For instance, I have a few small numbered boxes that indicate the current photograph. These would need to be modified to display the menu on your example site.

Hopefully, this will give you enough info to get started.

Here is a demo of this slideshow in action.

http://bobcravens.com/hfs_dev/

Please note, that this is my dev staging area and is not guaranteed to be long lived. It will be there for at least a couple of weeks though. Feel free to visit while it lasts.