Forked from dodozhang21's Pen bxslider test.
A Pen by Captain Anonymous on CodePen.
Forked from dodozhang21's Pen bxslider test.
A Pen by Captain Anonymous on CodePen.
<html> | |
<body> | |
<div style="width: 730px; height: 1000px; margin: 0 auto; background: red !important;"> | |
<ul class="bxslider"> | |
<li><img src="http://bxslider.com/images/730_200/tree_root.jpg" title="0-Funky roots" /></li> | |
<li><img src="http://bxslider.com/images/730_200/hill_road.jpg" title="1-The long and winding road" /></li> | |
<li><img src="http://bxslider.com/images/730_200/trees.jpg" title="2-Happy trees" /></li> | |
<li><img src="http://bxslider.com/images/730_200/tree_root.jpg" title="3-Funky roots" /></li> | |
<li><img src="http://bxslider.com/images/730_200/hill_road.jpg" title="4-The long and winding road" /></li> | |
<li><img src="http://bxslider.com/images/730_200/trees.jpg" title="5-Happy trees" /></li> | |
<li><img src="http://bxslider.com/images/730_200/tree_root.jpg" title="6-Funky roots" /></li> | |
<li><img src="http://bxslider.com/images/730_200/hill_road.jpg" title="7-The long and winding road" /></li> | |
<li><img src="http://bxslider.com/images/730_200/trees.jpg" title="8-Happy trees" /></li> | |
</ul> | |
</div> | |
</body> | |
</html> |
slider = $('.bxslider').bxSlider({ | |
mode: 'vertical', | |
captions: true, | |
pager: false, | |
minSlides: 5, | |
moveSlides: 1, | |
touchEnabled: true, | |
oneToOneTouch: true, | |
preventDefaultSwipeX: false, | |
preventDefaultSwipeY: true | |
}); | |
slider.goToNextSlide(); |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
<script src="http://regretless.com/js/jquery.bxslider.4.1.min.js"></script> |
/* bxslider */ | |
.bx-wrapper { | |
position: relative; | |
padding: 0; | |
*zoom: 1; | |
} | |
.bx-wrapper img { | |
max-width: 100%; | |
display: block; | |
} | |
/** THEME | |
===================================*/ | |
.bxslider { | |
top: -20px; | |
left: -40px; | |
} | |
.bx-wrapper .bx-viewport { | |
-moz-box-shadow: 0 0 5px #ccc; | |
-webkit-box-shadow: 0 0 5px #ccc; | |
box-shadow: 0 0 5px #ccc; | |
border: solid #fff 5px; | |
left: -5px; | |
background: #fff; | |
} | |
.bx-wrapper .bx-pager, | |
.bx-wrapper .bx-controls-auto { | |
position: absolute; | |
bottom: -30px; | |
width: 100%; | |
} | |
/* LOADER */ | |
.bx-wrapper .bx-loading { | |
min-height: 50px; | |
background: url(//bxslider.com/lib/images/bx_loader.gif) center center no-repeat #fff; | |
height: 100%; | |
width: 100%; | |
position: absolute; | |
top: 0; | |
left: 0; | |
z-index: 2000; | |
} | |
/* PAGER */ | |
.bx-wrapper .bx-pager { | |
text-align: center; | |
font-size: .85em; | |
font-family: Arial; | |
font-weight: bold; | |
color: #666; | |
padding-top: 20px; | |
} | |
.bx-wrapper .bx-pager .bx-pager-item, | |
.bx-wrapper .bx-controls-auto .bx-controls-auto-item { | |
display: inline-block; | |
*zoom: 1; | |
*display: inline; | |
} | |
.bx-wrapper .bx-pager.bx-default-pager a { | |
background: #666; | |
text-indent: -9999px; | |
display: block; | |
width: 10px; | |
height: 10px; | |
margin: 0 5px; | |
outline: 0; | |
-moz-border-radius: 5px; | |
-webkit-border-radius: 5px; | |
border-radius: 5px; | |
} | |
.bx-wrapper .bx-pager.bx-default-pager a:hover, | |
.bx-wrapper .bx-pager.bx-default-pager a.active { | |
background: #000; | |
} | |
/* DIRECTION CONTROLS (NEXT / PREV) */ | |
.bx-wrapper .bx-prev { | |
top: 16px; | |
left: calc(50% - 16px); | |
background: url(//bxslider.com/lib/images/controls.png) no-repeat 0 -32px; | |
} | |
.bx-wrapper .bx-next { | |
bottom: 16px; | |
left: calc(50% - 16px); | |
background: url(//bxslider.com/lib/images/controls.png) no-repeat -43px -32px; | |
} | |
.bx-wrapper .bx-prev:hover { | |
background-position: 0 0; | |
} | |
.bx-wrapper .bx-next:hover { | |
background-position: -43px 0; | |
} | |
.bx-wrapper .bx-controls-direction a { | |
position: absolute; | |
/*top: 50%;*/ | |
margin-top: -16px; | |
outline: 0; | |
width: 32px; | |
height: 32px; | |
text-indent: -9999px; | |
z-index: 9999; | |
background: deeppink; | |
} | |
.bx-wrapper .bx-controls-direction a.disabled { | |
display: none; | |
} | |
/* AUTO CONTROLS (START / STOP) */ | |
.bx-wrapper .bx-controls-auto { | |
text-align: center; | |
} | |
.bx-wrapper .bx-controls-auto .bx-start { | |
display: block; | |
text-indent: -9999px; | |
width: 10px; | |
height: 11px; | |
outline: 0; | |
background: url(//bxslider.com/lib/images/controls.png) -86px -11px no-repeat; | |
margin: 0 3px; | |
} | |
.bx-wrapper .bx-controls-auto .bx-start:hover, | |
.bx-wrapper .bx-controls-auto .bx-start.active { | |
background-position: -86px 0; | |
} | |
.bx-wrapper .bx-controls-auto .bx-stop { | |
display: block; | |
text-indent: -9999px; | |
width: 9px; | |
height: 11px; | |
outline: 0; | |
background: url(//bxslider.com/lib/images/controls.png) -86px -44px no-repeat; | |
margin: 0 3px; | |
} | |
.bx-wrapper .bx-controls-auto .bx-stop:hover, | |
.bx-wrapper .bx-controls-auto .bx-stop.active { | |
background-position: -86px -33px; | |
} | |
/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */ | |
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager { | |
text-align: left; | |
width: 80%; | |
} | |
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto { | |
right: 0; | |
width: 35px; | |
} | |
/* IMAGE CAPTIONS */ | |
.bx-wrapper .bx-caption { | |
position: absolute; | |
bottom: 0; | |
left: 0; | |
background: #666\9; | |
background: rgba(80, 80, 80, 0.75); | |
width: 100%; | |
} | |
.bx-wrapper .bx-caption span { | |
color: #fff; | |
font-family: Arial; | |
display: block; | |
font-size: .85em; | |
padding: 10px; | |
} |