Scroll на галерее
Помогите, пожалуйста, сделать чтобы помимо стрелок, можно было колесиком мыши менять элементы
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> * { box-sizing: border-box;margin: 0;padding: 0; } .slider { width: 300px; height: 170px; overflow: hidden; position: relative; } .slider__arrow { width: 20px; height: 20px; position: absolute; top: 50%; background-color: #3294FD; text-align: center; line-height: 20px; color: #fff; z-index: 9; cursor: pointer; } .slider__left { left: 0; } .slider__right { right: 0; } .slider__container { width: 900px; height: 170px; position: absolute; top: 0; left: 0; } .slider__item { width: 100px; height: 170px; line-height: 170px; background: pink; display: block; float: left; text-align: center; } .slider__item:hover { background-color: #F7F7F7; } .slider__arrow.hide{ display: none; } .slider { margin: 20px auto; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(function() { var i = 0, len = 6; $('.slider__arrow').on('click', function(e) { var isLeft = $(this).hasClass('slider__left'); i += (isLeft) ? 3 : -3; i > len && (i = len); i < 0 && (i = 0); $('.slider__arrow').removeClass('hide'); $(this).toggleClass('hide', i == 0 || i == len); var left = -i * 100 + "px" $(".slider__container").stop().animate({ left: left }, 300); }); }); </script> </head> <body> <div class="slider"> <div class="slider__arrow slider__left"><</div> <div class="slider__arrow slider__right hide">></div> <div class="slider__container"> <div class="slider__item">1</div> <div class="slider__item">2</div> <div class="slider__item">3</div> <div class="slider__item">4</div> <div class="slider__item">5</div> <div class="slider__item">6</div> <div class="slider__item">7</div> <div class="slider__item">8</div> <div class="slider__item">9</div> </div> </div> </body> </html> |
slider and wheel
Андрей812,
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> * { box-sizing: border-box;margin: 0;padding: 0; } .slider { width: 300px; height: 170px; overflow: hidden; position: relative; } .slider__arrow { width: 20px; height: 20px; position: absolute; top: 50%; background-color: #3294FD; text-align: center; line-height: 20px; color: #fff; z-index: 9; cursor: pointer; } .slider__left { left: 0; } .slider__right { right: 0; } .slider__container { width: 900px; height: 170px; position: absolute; top: 0; left: 0; } .slider__item { width: 100px; height: 170px; line-height: 170px; background: pink; display: block; float: left; text-align: center; } .slider__item:hover { background-color: #F7F7F7; } .slider__arrow.hide{ display: none; } .slider { margin: 20px auto; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(function() { var i = 0, len = 6; $('.slider__arrow').on('click', function(e) { var isLeft = $(this).hasClass('slider__left'); i += (isLeft) ? 3 : -3; i > len && (i = len); i < 0 && (i = 0); $('.slider__arrow').removeClass('hide'); $(this).toggleClass('hide', i == 0 || i == len); var left = -i * 100 + "px" $(".slider__container").stop().animate({ left: left }, 300); }); $(".slider__container").on("wheel", function(e) { if($(".slider__container").is(":animated")) {e.preventDefault(); return;}; if (e.originalEvent.deltaY > 0) $(".slider__left:not(.hide)").trigger("click"); else $(".slider__right:not(.hide)").trigger("click"); e.preventDefault() }); }); </script> </head> <body> <div class="slider"> <div class="slider__arrow slider__left"><</div> <div class="slider__arrow slider__right hide">></div> <div class="slider__container"> <div class="slider__item">1</div> <div class="slider__item">2</div> <div class="slider__item">3</div> <div class="slider__item">4</div> <div class="slider__item">5</div> <div class="slider__item">6</div> <div class="slider__item">7</div> <div class="slider__item">8</div> <div class="slider__item">9</div> </div> </div> </body> </html> |
рони,
Строка 80 лучше так if($(".slider__container").is(":animated")) {e.preventDefault(); return;} |
Спасибо огромное!
|
Dilettante_Pro,
ok! |
Часовой пояс GMT +3, время: 04:18. |