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