slider overflow hidden pos:abs

by Vladislav Altyncev

HTML

<link rel="stylesheet" href="//yui.yahooapis.com/combo?pure/0.3.0/base-min.css&amp;pure/0.3.0/grids-min.css&amp;pure/0.3.0/forms-min.css&amp;pure/0.3.0/tables-min.css">
<link rel="stylesheet" href="http://shadow.perm.ru/test/name-mobile/css/ui-lightness/jquery-ui-1.10.3.custom.min.css">
<link rel="stylesheet" href="http://shadow.perm.ru/test/name-mobile/css/style.css">
<script src="http://shadow.perm.ru/test/name-mobile/js/jquery.carouFredSel-6.2.1-packed.js"></script>
<script src="http://shadow.perm.ru/test/name-mobile/js/helper-plugins/jquery.touchSwipe.min.js"></script>
<div class="content-wrap">
	<h2 class="h2"><span>Хиты продаж </span> <div class="slider_btn_pn-wrap">
		<a id="bestseller_prev" class="slider_btn_pn slider_btn_prev" href="#">Назад</a><a id="bestseller_next" class="slider_btn_pn slider_btn_next" href="#">Вперед</a>
	</div></h2>
	
	<ul id="bestseller_slider" class="splash-slider">
		<li class="active">
			<div class="item_splash-wrap">
				<div class="splash-wrap clearfix">
					<div class="splash-wrap--img">
						<img src="http://shadow.perm.ru/test/name-mobile/img/img_phone1.jpg" width="150" height="260" alt="">
					</div>
					<div class="splash-body">
						<div class="splash-body--review clearfix">
							<div class="star" data-score="4"></div><a class="" href="#">13 отзывов</a>
						</div>
						<div class="splash-body--head">
							<h3><a href="#">Samsung S 7562 Galaxy S Duos Chic White La Fleur</a></h3>
						</div>
						<div class="splash_count">
						    <div class="splash_count--price">
						        18 999 руб.
						    </div>
						    <div class="splash_count--basket">
						        <a href="#" class="btn btn-green"><i class="ico-basket"></i> В корзину</a>
						    </div>
						</div>
					</div>
				</div>
				<div class="splash-desrc">
					Экран 7" (800х480) емкостный, Multi-Touch / Boxchip A13 (1.2 ГГц) / RAM 512 МБ / 4 ГБ встроенной памяти + поддержка карт памяти microSD / Wi-Fi / камера 0.3 Мп / Android 4.0.3 / 313...

CSS

.splash-slider li:hover .item_splash-wrap,
.splash-slider li.active .item_splash-wrap {
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .9);
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, .9);
    box-shadow: 0 0 10px rgba(0, 0, 0, .9);
}

JavaScript

$('#bestseller_slider').carouFredSel({
        //responsive: true,
        items: {
            visible: 3
        },
        scroll: {
            items:          1,
            //easing:         "elastic",
            duration:       300
            //pauseOnHover:   true
        },
        auto:               false,
        swipe: {
            onTouch:        true
        },
        prev: '#bestseller_prev',
        next: '#bestseller_next'
  });