Templates Book

So.. as I promised in my previous post, here is the html version for the “Camara” slider. The images for the demo are from lorempixel.com

The Markup

<div id="sliderCamara">
    <div id="sliderItems">
	<div id="itemsHolder">
	<ul>
	    <li class="item">
                <div class="info">
                    <p><a href="#">Nature</a><a href="#">Colors</a></p>
                    <div class="clear"></div>
                    <h2>Landscapes</h2>
                </div>
                <img width="250" height="400" src="http://lorempixel.com/250/400/nature/1"/>
            </li>
        </ul>
	</div>
        <div class="clear"></div>
    </div>
    <a href="javascript:void(0);" id="prev" class="handle"><span>&nbsp;</span></a>
    <a href="javascript:void(0);" id="next" class="handle"><span>&nbsp;</span></a>
</div>

CSS code

#sliderCamara {
    width: 100%;
    display:inline-block;
    position: relative;
	box-shadow: 0 0 5px #aaa;
	border-top: 1px solid #fff;
	padding: 8px 0 10px 0;
}
#sliderItems {
	display:inline-block;
	left: 70px;
	overflow: hidden;
	position: relative;
    height: 500px;
	
}
#itemsHolder {
	padding: 0;
	height: 440px;
	background: #f1f1f1;
	display:inline-block;
	position: absolute;
	left: 0;
	top:0;
	box-shadow: inset 0 0 3px #aaa;
	transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-webkit-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
}
#itemsHolder > ul{
	list-style: none;
	padding:0;
	margin:0;
}
	#sliderItems .item {
		width: 250px;
		float:left;
		min-height: 400px;
		padding: 20px 10px;
        position:relative;
	}
	#sliderItems .item img {float:left;background:#fff;}
	
#sliderCamara .handle {
    float:left;
    position:absolute;
    width: 70px;
    height: 100%;
    background: url(../images/arrows.png) no-repeat left center;
    top:0;
    transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    outline: 0;
}

#prev.handle {
	display:none;
	left:0;
	background-position: -140px center;
}
	#prev.handle:hover {
		background-position: -210px center;
	}
#next.handle {
	right:0;
	background-position: left center;
}
	#next.handle:hover {
		right: 0;
		background-position: -70px center;
	}

#sliderCamara .handle span {
	height : 100%;
	width: 12px;
	float:left;
	position: absolute;
	top:0;
}
	#sliderCamara #next span {
		background: url(../images/next_shadow.png) no-repeat 0 center;
		left: -12px;
	}
	#sliderCamara #prev span {
		background: url(../images/prev_shadow.png) no-repeat 0 center;
		right: -12px;
	}
    
#itemsHolder .info {
    width: 250px;
    text-align: left;
    left: 10px;
    bottom:30px;
    position: absolute;
    z-index: 10;
    background-color: transparent;
    transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;text-align: left;
	overflow: hidden;
}

#itemsHolder .info h2 {
	font: normal 24px/24px Arial; 
	padding: 0 10px 10px 10px;
	position: relative;
	color:transparent;
    text-shadow: 0 0 10px #fff;
    text-transform: uppercase;
	transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
	left: 200px;
	opacity: 0;
}
	#itemsHolder .item:hover .info h2 {
	    text-shadow: 0 0 0 #fff;
        color:#fff;
		left:0;
		opacity: 1;
	}
#itemsHolder .info p {
	position: relative;
	font: normal 12px/18px Arial; 
	text-transform: uppercase;
	padding: 10px 10px 5px 10px;
	left: 100px;
	opacity: 0;
	transition: all .1s ease-in-out;
    -moz-transition: all .1s ease-in-out;
    -webkit-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
}
	#itemsHolder .item:hover .info p {
        text-shadow: 0 0 0 #fff;
		left:0;
		opacity: 1;
	}
#itemsHolder .info p a {
    color:transparent;
    text-decoration: none;
    padding: 3px;
    text-shadow: 0 0 10px #fff;
    transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
	
}
    #itemsHolder .item:hover p a {
        color:#fff;
        text-decoration: none;
        padding: 3px;
    }

jQuery

$(window).load(function() {
	
    prev = $("#prev");
    next = $("#next");
    
    $('#sliderItems').height($('#sliderItems .item').outerHeight());
    $('#sliderItems').width($('#sliderCamara').width() - prev.width() - next.width());
    
    sliderw = $('#sliderItems').width();
	holder = $('#itemsHolder');
    item = $("#itemsHolder ul li").first();
    holder.width(holder.find('li').length * item.outerWidth());
    var hoffset = holder.offset();
	
	next.click(function(){
		items = Math.floor(sliderw / item.outerWidth());
		itemsw = item.outerWidth() * items;	
        hoffset = holder.offset();
		noffset = hoffset.left + (-1 * itemsw);
        roffset = holder.outerWidth() + noffset - prev.width();
        if (roffset < sliderw) {
			holder.offset({ left: (hoffset.left - roffset + sliderw - itemsw)});
			next.attr('style','display: none;');
		} else {
			holder.offset({ left: noffset});
		}
		prev.attr('style','display: block;');
	});
	
	prev.click(function(){
		items = Math.floor(sliderw / item.outerWidth());
		itemsw = item.outerWidth() * items;
		hoffset = holder.offset();
		if (hoffset.left%item.outerWidth() == 0){
			dif = 0;
		} else {
			dif = sliderw - itemsw;
		}
		if (holder.width() == (-1*hoffset.left + sliderw + prev.width())) {
			loffset = hoffset.left + itemsw - dif;
		} else {
			loffset = hoffset.left + itemsw;
		}
        if (loffset < 0) {
			holder.offset({ left: loffset});
		} else {
			holder.offset({ left: prev.width()});
			prev.attr('style','display: none;')
		}
		next.attr('style','display: block;');
	});	
});

Slider Camara v1 – Download
Preview – Preview

Your support: