fantazer
8/31/2016 - 10:48 AM

bx-slider

bx-slider

.slider-vertical__wraper
	+below(768px)
		margin-top 30px
	.bx-wrapper,
	.bx-window
		+below(768px)
			height 210px!important
		width 100%!important
		height 840px!important
	.bx-next
		+below(768px)
			margin-left -50px
		position absolute
		top -50px
		left 50%
		font-size 40px
		color orange
		padding 10px 30px
		background white 
		height 60px
		width 100px
		margin-left -65px
		br(50%)
		span
			margin-top -15px
			display block
	.bx-prev
		+below(768px)
			margin-left -50px
		position absolute
		bottom -50px
		left 50%
		font-size 40px
		color orange
		padding 10px 30px
		background white 
		height 60px
		width 100px
		margin-left -65px
		br(50%)
		span
			margin-top 5px
			display block
.slider-vertical
	a
		width 100%
		height 210px!important
		display block!important
.slider-vertical__el
	br(14px)
	width 100%
	height 200px
	background-repeat no-repeat
	background-size cover
	position relative
	z-index 200
	&:hover
		.slider-vertical__info
			background grey 
.slider-vertical__info
	+below(768px)
		font-size 14px!important
		width 100%
		border-radius 0 0 14px  14px
		text-align center
	+below(1024px)
		font-size 16px
	position absolute
	left 0
	bottom 0
	padding 15px
	background orange
	border-radius 0 14px 0 14px
	text-decoration underline
	color white
	font-size 20px 
	width 60%
	text-transform uppercase
	tr(all)
//vertical slider
	$('.slider-vertical').bxSlider({
	   mode: 'vertical',
     speed: 500,
     slideMargin:10,
     infiniteLoop: true,
     pager: false,
     controls: true,
     slideWidth: 276,
     moveSlides: 1,
     adaptiveHeight: true,
     responsive:true,
     minSlides: 4,
     nextText: '<span class="icon-angle-up"></span>',
     prevText: '<span class="icon-angle-down"></span>'
});
// Bower i --save-dev bxslider-4
// script(src="bower/bxslider/jquery.bxSlider.min.js")
mixin vertical-slider()
	//block vertical-slider
	.text-block.slider-vertical__wraper
		.slider-vertical
			- for (var i = 0; i < 14; i++)
				a(href="#")
					.slider-vertical__el(style="background-image:url(img/vertical-slider.jpg)")
						.slider-vertical__info Текст
	//block vertical-slider end