ATR Slider example

by will

HTML

<div id="content">
    
    <div class="thumbnail_news solid_purple_content" data-pause="4">

        <div class="articles">
                
            <div class="article first">
                
                <div class="article_content">
                    <h2>County joy for McCoy and Alderwood</h2>
                    <a href="#">Read more</a>
                </div>
                
                <img src="http://www.fabuloussavers.com/new_wallpaper/Horse_Racing_Royal_Ascot_freecomputerdesktopwallpaper_1024.jpg"/>
                
            </div>
                
            <div class="article">
                
                <div class="article_content">
                    <h2>Title for the slide that can only be so long</h2>
                    <a href="#">Read more</a>
                </div>
                
                <img src="http://www.fabuloussavers.com/new_wallpaper/Horse_Racing_Newmarket_July_Festival_2011_freecomputerdesktopwallpaper_1024.jpg"/>
                
            </div>
            
            <div class="article">
                
                <div class="article_content">
                    <h2>Another news title</h2>
                    <a href="#">Read more</a>
                </div>
                
                <img src="http://wfiles.brothersoft.com/h/horse-racing-dust-blowing_96007-1024x768.jpg"/>
                
            </div>
            
            <div class="article">
                
                <div class="article_content">
                    <h2>Final news title</h2>
                    <a href="#">Read more</a>
                </div>
                
                <img src="http://wfiles.brothersoft.com/h/horse-racing-stretchrun_96033-1024x768.jpg"/>
                
            </div>
            
        </div>
        
        <ul class="thumbnails">
            <li class="current first">
                <img...

CSS

#content .thumbnail_news {
	position: relative;
	width: 100%;
	border-radius: 6px;
	box-shadow: 0 0 4px rgba(#000, .2);
}

#content .thumbnail_news .articles {
	position: relative;
	width: 80%;
}

#content .thumbnail_news .article {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	opacity: 0;
}

#content .thumbnail_news .article.first {
    position: relative;
    opacity: 1;
}

#content .thumbnail_news .article img {
    border-radius: 6px 0 0 6px;
}

#content .thumbnail_news .article_content {
	position: absolute;
	right: 0; bottom: 0; left: 0;
	padding: 10px;
	border-radius: 0 0 0 6px;
	background: rgba(#4c4264, .9);
	color: #FFF;
}

#content .thumbnail_news h2 {
    margin: 0 0 6px;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: bold;
    line-height: 20px;
}

#content .thumbnail_news a {
	display: inline-block;
	padding: 5px;
	border-radius: 3px;
	color: #4c4264;
	background: #FFF;
	font-weight: bold;
	font-size: 12px;
	text-transform: uppercase;
	text-decoration: none;
}

#content .thumbnail_news a:after {
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 10px;
	border: solid 4px transparent;
	border-left-color: #4c4264;
	border-radius: 2px;
}

.thumbnail_news.solid_purple_content .article_content {
    background: #4c4264;
}
#content .thumbnail_news .thumbnails {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    z-index: 10;
    width: 20.1%;
    height: 100%;
    padding: 0;
    margin: 0;
    border-left: solid 4px #4c4264;
    list-style: none;
    overflow: hidden;
}

#content .thumbnail_news li {
    display: block;
    position: relative;
    background: #4c4264;
    cursor: pointer;
}

#content .thumbnail_news li img {
    opacity: .6;
    -webkit-transition: opacity .2s ease-in-out;
}

#content .thumbnail_news li.first {
	border-radius: 0 6px 0 0;
}

#content .thumbnail_news li.first img {
	border-radius: 0 6px 0 0;
}

#content .thumbnail_news li.last {
	border-radius: 0 0 6px...

JavaScript

var thumbnailNews = function(){
    
    var $news = $('.thumbnail_news');
    
    $news = {
        root:      $news,
        articles:  $news.find('.article'),
        thumbs:    $news.find('li'),
        current:   false
    };
    
    var news = {
        current:   0,
        total:     $news.articles.length,
        article:   $news.articles,
        thumb:     $news.thumbs,
        busy:      false,
        auto:      true,
        timer:     false,
        pause:     $news.root.data('pause')
    };
    
    var auto = function(){
        
        news.timer = setTimeout(function(){
            
            if( news.auto ){
                
                var newNum = news.current + 1;
                
                if( newNum > news.total )
                    newNum = 1;
                
                if( newNum < 0 )
                    newNum = news.total;
                
                goto(newNum);
                
                auto();
                
            }
        
        }, news.pause * 1000);
        
    }
    
    var goto = function(num){
        
        if( !news.busy && num != news.current ){
            
            news.busy = true;
        
            if( $news.current !== false ){
                
                $news.current.animate({
                    opacity:    0,
                    zIndex:     0
                }, 200);
                
            }
            
            $(news.article[num - 1]).animate({
                opacity:    1,
                zIndex:     1
            }, 200, function(){
                
                news.busy = false;
                
            });
            
            $(news.thumb[num - 1])
                .addClass('current')
                .siblings('.current')
                .removeClass('current');
            
            $news.current = $(news.article[num - 1]);
            news.current = num;
           
        }
        
    }
    
   ...