Slider-container-width-240

by Sathish Subramanian

HTML

<body>
<div class="container">
    <div id="slider_wrapper" class="vnslider_wrapper">
        <div class="shadow_left">
            <div class="prev_button"></div>
        </div>
        <div class="shadow_right">
            <div class="next_button"></div>
        </div>
        <div id="slider_content" class="vnslider_content">
            <ul id="slider" class="vnslider">
                <li>
                    <img src="http://i65.tinypic.com/29ktahi.png" alt="(Deutsch) Landmann (Grills &amp; Zubehor)">
                </li>
                <li>
                    <img src="http://i65.tinypic.com/29ktahi.png" alt="(Deutsch) Landmann (Grills &amp; Zubehor)">
                </li>
                <li>
                    <img src="http://i63.tinypic.com/j626n5.jpg" alt="Meiko (Geschirrspul-Automaten)">
                </li>
                <li>
                    <img src="http://i63.tinypic.com/qxvvd5.jpg" alt="Meiko (Geschirrspul-Automaten)">
                </li>
            </ul>
            <!-- .slider_content -->
        </div>
        <div class="vnslider_description">
            <i>test</i>
            <a class="open"></a>
            <div class="content">
                <h2>text</h2>
                <p></p>
                <p>text</p>
                <p></p>
            </div>
        </div>
    </div>
</div>
</body>

CSS

*{
	margin: 0;
	padding: 0;
}
.container {
  margin: 0 auto;
  background: #fff;
  max-width: 240px;
  width: 100%;
}
li{
	list-style: none;
}
.vnslider_wrapper:after {
	content:" ";
	display:block;
	clear:both;
	height:0;
	width:0;
}

.vnslider_wrapper {
	position:relative;
}


.vnslider {
	position:relative;
	background:#6D6D6D;
	overflow:visible;
}

.vnslider_content {
	overflow:hidden;
	position:relative;
}

.vnslider li {
	float:left;
	position:relative;
	width:100%;
	z-index:0;
}

.vnslider li > a {
	display:block;
}

.vnslider li.active {
  z-index: 0;
}

.vnslider_description {
	position:absolute;
	bottom:0;
	left:0;
	padding:13px;
	color:#FFF;
	background:rgba(62, 56, 54, 0.7);
	width:100%;
	padding-right:50px;
	box-sizing:border-box;
}

.vnslider_description i {
	font:inherit;
	font-style:normal;
	color:inherit;
	cursor:pointer;
}

.vnslider_description a.open {
	display:block;
	position:absolute;
	right:0;
	top:0;
	height:100%;
	cursor:pointer;
	width:40px;
	background:url('../images/vnslider_sprite.png') -120px 0;
}

.vnslider_description a.open:hover {
	background-position:-80px 0;
}

.vnslider_description a.open.opened {
	background-position:-160px 0;
}

.vnslider_description a.open.opened:hover {
	background-position:-200px 0;
}

.vnslider_description .content {
	display:none;
	position:absolute;
	top:100%;
	box-sizing:border-box;
	width:100%;
	left:0;
	padding:10px;
	z-index:1;
	background:#3E3836;
	color:#FFF;
}

.vnslider_description * {
	font:inherit;
	color:inherit;
}

.vnslider_description h2 {
	font-size:22px;
	margin-bottom:10px;
	font-weight:bold;
	letter-spacing:-1px;
}

.vnslider li.active {
	z-index:0;
}

.vnslider img {
	width:100%;
	height:auto;
	display:block;
}

.vnslider_wrapper .shadow_left, .vnslider_wrapper .shadow_right {
	position:absolute;
	z-index:2;	
	height:100%;
	background:rgba(200, 200, 200, 0.5) url('../images/bg_slideShadow.png') repeat-y -605px 0;
}

.vnslider_wrapper .shadow_left {
	background-position:right -600px...

JavaScript

jQuery.fn.vnslider = function(options) {	
	var obj = jQuery(this);
	var slider = obj.find('.vnslider');
	var width;
	var pause = false;
	var i = 0;
	var elements = [];

	obj.find('li').each(function() {
		elements.push({slogan: jQuery(this).find('i').html(), content: jQuery(this).find('.content').html()});
		jQuery(this).find('.content,i').remove();
	});

	slider.find('li:last-child').prependTo(slider.find('li:first-child').parent());
	slider.find('li:nth-child(2)').addClass('active');

	jQuery(slider).parent().scrollLeft(0);


	function redraw() {
		width = obj.outerWidth();

		slider.width(obj.find('li').css('width', width + 'px').length * width + 'px').parent().css('left', '-' + width + 'px').css('width', jQuery(window).width() + width - obj.offset().left + 'px');

		//obj.find('img').height(obj.find('img').height() + 'px');

		obj.find('.shadow_left').css('left', '-' + obj.offset().left + 'px');
		obj.find('.shadow_right').css('right', '-' + obj.offset().left + 'px');
		obj.find('.shadow_left, .shadow_right').css('width', obj.offset().left + 'px');
		
	}

	var timeout;

	function scrollRight() {
		i = (i+1) % elements.length;

		jQuery(slider).parent().animate({scrollLeft:  width + 'px'}, options.hasOwnProperty('speed') ? options.speed : 1000, function() {
			obj.find('li:first-child').appendTo(jQuery(slider).parent().scrollLeft(0).find(slider));
			obj.find('.vnslider_description i').html(elements[i].slogan);
			obj.find('.vnslider_description .content').html(elements[i].content);			
			
			if(!pause)
				timeout = setTimeout(scrollRight, options.hasOwnProperty('interval') ? options.interval : 2000);
		});
	}

	function scrollLeft() {
		i = (i-1);
		i = (i < 0) ? elements.length + i : i;	
		obj.find('li:last-child').prependTo(jQuery(slider).parent().scrollLeft(0).find(slider));
		jQuery(slider).parent().scrollLeft(width);	

		jQuery(slider).parent().animate({scrollLeft: 0 + 'px'}, options.hasOwnProperty('speed') ? options.speed : 1000, function()...