javascript - Scrollable Bootstrap Carousel/Slider -
good day. have carousel slides vertically. want controlled mouse wheel. can me on js?
here's mark
$('#carousel').bind('mousewheel', function(e){$(this).carousel('next');});<style> <!-- html, body { height: 100%; padding: 0; margin: 0; } body { background: #fff; min-height: 600px; } body * { font-family: arial, geneva, sunsans-regular, sans-serif; font-size: 14px; color: #666; line-height: 22px; }--> #wrapper { width: 100%; min-width: 900px; height: 500px; position: relative; left: 0; } #carousel div { height: 100%; float: left; } #carousel img { min-width: 100%; min-height: 100%; } </style> <style type="text/css"> .carousel-inner.vertical { height: 100%; } /*.carousel .item img {*/ /*margin: 0 auto;*/ /* align slide image horizontally center */ /*}*/ .carousel-inner.vertical > .item { -webkit-transition: .6s ease-in-out top; -o-transition: .6s ease-in-out top; transition: .6s ease-in-out top; } @media , (transform-3d), (-webkit-transform-3d) { .carousel-inner.vertical > .item { -webkit-transition: -webkit-transform .6s ease-in-out; -o-transition: -o-transform .6s ease-in-out; transition: transform .6s ease-in-out; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000; perspective: 1000; } .carousel-inner.vertical > .item.next, .carousel-inner.vertical > .item.active.right { top: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } .carousel-inner.vertical > .item.prev, .carousel-inner.vertical > .item.active.left { top: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } .carousel-inner.vertical > .item.next.left, .carousel-inner.vertical > .item.prev.right, .carousel-inner.vertical > .item.active { top: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .carousel-inner.vertical > .active { top: 0; } .carousel-inner.vertical > .next, .carousel-inner.vertical > .prev { top: 0; height: 100%; width: auto; } .carousel-inner.vertical > .next { left: 0; top: 100%; } .carousel-inner.vertical > .prev { left: 0; top: -100%; } .carousel-inner.vertical > .next.left, .carousel-inner.vertical > .prev.right { top: 0; } .carousel-inner.vertical > .active.left { left: 0; top: -100%; } .carousel-inner.vertical > .active.right { left: 0; top: 100%; } </style> <div id="wrapper"> <!-- wrap @img width --> <div id="carousel" class="carousel slide" data-ride="carousel" data-interval="3000"> <!-- indicators --> <ol class="carousel-indicators"> <li data-target="#carousel" data-slide-to="0" class="active"></li> <li data-target="#carousel" data-slide-to="1"></li> <li data-target="#carousel" data-slide-to="2"></li> <li data-target="#carousel" data-slide-to="3"></li> <li data-target="#carousel" data-slide-to="4"></li> </ol> <!-- wrapper slides --> <div class="carousel-inner vertical" role="listbox"> <div class="item active"> <img src="img/image1.jpg" alt="first slide" /> </div> <div class="item"> <img src="img/image2.jpg" alt="second slide" /> </div> <div class="item"> <img src="img/image3.jpg" alt="third slide" /> </div> <div class="item"> <img src="img/image4.jpg" alt="forth slide" /> </div> <div class="item"> <img src="img/image5.jpg" alt="fifth slide" /> </div> </div> <!-- controls --> <a class="left carousel-control" href="#carousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">previous</span> </a> <a class="right carousel-control" href="#carousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">next</span> </a> </div> </div>please give me recommendation problem. tried search both on google , on site js not working in carousel.
please need help. thank in advance.
p.s. size of image im using 1920 x 1020
first add listener mousewheel action:
var carousel = document.getelementbyid("carousel"); if (carousel.addeventlistener) { // ie9, chrome, safari, opera carousel.addeventlistener("mousewheel", mousewheelhandler, false); // firefox carousel.addeventlistener("dommousescroll", mousewheelhandler, false); } // ie 6/7/8 else carousel.attachevent("onmousewheel", mousewheelhandler); function mousewheelhandler() { $('#carousel').carousel('next'); } 
Comments
Post a Comment