Slider Blogger

by alexpop

HTML

<div class="slider clearfix section" id="slider">
    
    
	<div class="widget Image" id="Image1">
		<h2>Some image 1</h2>
		<div class="widget-content">
			<img alt="Some image" height="480" id="Image1_img" src="https://lh5.googleusercontent.com/-oLM5e0oAxL8/UeFYaemiPtI/AAAAAAAAF04/O3aBfOvpgio/w1156-h480-no/chrisbail_1400.jpg" width="1156">
			<br>
			<span class="caption">Photoshop Action </span>
		</div>
                
		<div class="clear">
	</div>
		<span class="widget-item-control">
		<span class="item-control blog-admin">
		<a class="quickedit" href="//www.blogger.com/rearrange?blogID=7199349005966990146&amp;widgetType=Image&amp;widgetId=Image1&amp;action=editWidget&amp;sectionId=slider" onclick="return _WidgetManager._PopupConfig(document.getElementById(&quot;Image1&quot;));" target="configImage1" title="Edit">
		<img alt="" height="18" src="http://img1.blogblog.com/img/icon18_wrench_allbkg.png" width="18">
		</a>
		</span>
		</span>
		<div class="clear">
		</div>
	</div>
                
<div class="widget Image" id="Image1">
		<h2>Some image 2</h2>
		<div class="widget-content">
			<img alt="Some image" height="480" id="Image1_img" src="https://lh5.googleusercontent.com/-oLM5e0oAxL8/UeFYaemiPtI/AAAAAAAAF04/O3aBfOvpgio/w1156-h480-no/chrisbail_1400.jpg" width="1156">
			<br>
			<span class="caption">Photoshop Action </span>
		</div>
                
		<div class="clear">
	</div>
		<span class="widget-item-control">
		<span class="item-control blog-admin">
		<a class="quickedit" href="//www.blogger.com/rearrange?blogID=7199349005966990146&amp;widgetType=Image&amp;widgetId=Image1&amp;action=editWidget&amp;sectionId=slider" onclick="return _WidgetManager._PopupConfig(document.getElementById(&quot;Image1&quot;));" target="configImage1" title="Edit">
		<img alt="" height="18" src="http://img1.blogblog.com/img/icon18_wrench_allbkg.png" width="18">
		</a>
		</span>
		</span>
		<div class="clear">
		</div>
</div>               
                
</div>

CSS

/*============================================
CSS Image 
============================================*/
.slider .Image {
background:#fff;
text-align:center;
overflow:hidden;
position:relative;
max-height:500px;
display:none;
}
.slider .Image a {
color:#fff;
text-decoration:none;
}
.slider .Image img {
width:100%;
height:auto;
}
.slider .Image h2 {
background: $(color.ultradark);
color: $(color.ultralight);
padding: 8px 30px;
font-size:24px;
text-align:right;
position:absolute;
line-height: 1em;
margin:0;
bottom:0;
right:0;
left:0;
filter:alpha(opacity=70);
-moz-opacity:0.7;
opacity:0.7;
}
.slider .Image .caption {
position: absolute;
bottom: 0;
left: 0;
background: $(color.1);
padding: 0 20px;
color: $(color.ultralight);
height: 40px;
line-height: 40px;
font-size: 1em;
font-weight: bold;
}
.slider .current {
    display:block;
}

JavaScript

$(document).ready(function() {
    
    $(".slider").append('<div class="nav"><div class="prev">prev</div><div class="next">next</div></div>');
    
    $('.Image:first').addClass('current');
    $('.next').on('click', function() {
	    $('.current').next('.Image').addClass('current').siblings().removeClass('current');
	});
    $('.prev').on('click', function() {
	    $('.current').prev('.Image').addClass('current').siblings().removeClass('current');
	});
    
});