Карусель на JS
Данная карусель крутиться но, когда оно достигает конца, и мы снова нажимаем на стрелку, то показывается пустой контейнер.
Как это можно исправить? Чтобы по нажатию, он не стал двигать блоки? <div class="slider"> <div class="slider__arrow slider__left"><</div> <div class="slider__arrow slider__right">></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> * { 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; } $(function() { $('.slider__arrow').on('click', function(e) { var isLeft = $(this).hasClass('slider__left'); $(".slider__container").animate({ left: (isLeft) ? "+=300" : "-=300" }, 300); }); }); |
failoflife,
в строке 2 добавить индекс и длину, в строке 5 изменять индекс и проверять диапазон затем формировать left и в строке 7 применить left и никаких Цитата:
|
простейший слайдер с отключением стрелок
failoflife,
скрытие стрелок можно убрать, строки 72, 73 <!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> |
Спасибо, len отвечает за количество элементов видимых?
|
failoflife,
len это индекс последнего элемента + 1 до которого необходим сдвиг. или var num = 3,//количество элементов для сдвига len = $(".slider__item").length - num; //... i += (isLeft) ? num : -num; |
Цитата:
|
Часовой пояс GMT +3, время: 21:50. |