Слайк, как скрыть предыдущую стрелку и следующую стрелу, когда больше предметов, чтобы показать [дубликат]
Сначала удалите их:
<permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<permission android:name="android.permission.ACCESS_FINE_LOCATION" />
Те, которые определены платформой, а не вы.
Кроме того, вы не реагируете, когда пользователь на самом деле предоставляет вам разрешения. Запросите разрешения в своей деятельности и не создавайте экземпляр GPSTracker, пока не получите разрешение. То, что может быть немедленно, если checkSelfPermission() говорит, что у вас есть разрешение. В противном случае это произойдет, когда действие будет вызвано с помощью onRequestPermissionResult().
Сама работа по работе также ошибочна, поскольку вы, кажется, думаете, что сразу получите местоположение, что не будет иметь место большую часть времени.
6 ответов
Решение
Вы можете добавить css pointer-events: none к своей кнопке. Это свойство css отключает все события на элементе. Так что-то вроде этого.
// Slick stuff
...
onAfterChange: function(slide, index) {
if(index === 4) {
$('.slick-next').css('pointer-events', 'none')
}
else {
$('.slick-next').css('pointer-events', 'all')
}
}
И что-то в том же руководстве для элемента .slick-prev.
В этом решении вы должны получить функцию из конфигурации и только ссылку на него с чем-то вроде этого.
// Inside slick config
onAfterChange: afterChange
// Below somewhere
var afterChange = function(slide, index) { //stuff here }
Также проверьте, есть ли способ получить длину ползунка и проверить его вместо hardcoding 4 в заявлении if. Возможно, вы можете сделать что-то вроде $('.slide').length
Edit
Вот как реализовать функцию afterChange().
$(document).ready(function(){
$('.scrollable').slick({
dots: false,
slidesToShow: 1,
slidesToScroll: 3,
swipeToSlide: true,
swipe: true,
arrows: true,
infinite: false,
});
$('.scrollable').on('afterChange', function (event, slick, currentSlide) {
if(currentSlide === 2) {
$('.slick-next').addClass('hidden');
}
else {
$('.slick-next').removeClass('hidden');
}
if(currentSlide === 0) {
$('.slick-prev').addClass('hidden');
}
else {
$('.slick-prev').removeClass('hidden');
}
})
});
И некоторые CSS , Если вы хотите сделать анимацию, вы должны сделать это здесь.
.slick-prev.hidden,
.slick-next.hidden {
opacity: 0;
pointer-events:none;
}
-
1это очень близко, когда я реализую это решение, однако мой слайдер выходит из контейнера. Есть 3 слайда, каждый слайд имеет 3 строки по 5. Вот скрипка, иллюстрирующая jsfiddle.net/gward90/b25jgyox/4 – gwar9 18 November 2015 в 22:18
-
2Я добавил редактирование о том, как реализовать функцию после изменения, я не мог редактировать скрипку по некоторым причинам. – Raphael Parent 19 November 2015 в 00:51
-
3Тот же самый вопрос о нарушении слайдера происходит @Raphael Parent – gwar9 19 November 2015 в 20:11
-
4Можете ли вы сделать скрипку так, как раньше. Я попробую и сделаю это от этого. – Raphael Parent 19 November 2015 в 21:13
-
5thanks jsfiddle.net/gward90/b25jgyox/8 Убедитесь, что окно запуска скрипта больше 768 пикселей, стрелки будут отображаться там. – gwar9 19 November 2015 в 21:53
Существует простой способ стилизовать Prev- / Next-Buttons, если достигнут первый или последний элемент. Убедитесь, что для параметра Бесконечный режим установлено значение false. Затем создайте такие кнопки:
.slick-arrow[aria-disabled="true"]{
opacity: .5;
}Это все, что вам нужно!
Просто используйте infite: false и создайте собственный CSS для класса slick-disabled. Например:
JS - jQuery
$('.my-slider').slick({
infinite: false,
slidesToShow: 1,
slidesToScroll: 1
});
CSS
.slick-disabled {
opacity: 0;
pointer-events:none;
}
-
1
-
2верно, что в ie10 указатель-события: нет; не работает? Итак, в этом старом браузере, как я могу эффективно отключить стрелку? – Simona Adriani 10 July 2018 в 15:51
Я изменил поведение slick.js прямо так:
// making the prevArrow not show on init:
if (_.options.infinite !== true) {
_.$prevArrow
.addClass('slick-disabled')
.attr('aria-disabled', 'true')
.css('display', 'none'); // The new line of code!
}
И:
if (_.options.arrows === true &&
_.slideCount > _.options.slidesToShow &&
!_.options.infinite
) {
_.$prevArrow.removeClass('slick-disabled').attr('aria-disabled', 'false').css('display', '');
_.$nextArrow.removeClass('slick-disabled').attr('aria-disabled', 'false').css('display', '');
if (_.currentSlide === 0) {
_.$prevArrow.addClass('slick-disabled').attr('aria-disabled', 'true').css('display', 'none');
_.$nextArrow.removeClass('slick-disabled').attr('aria-disabled', 'false').css('display', '');
} else if (_.currentSlide >= _.slideCount - _.options.slidesToShow && _.options.centerMode === false) {
_.$nextArrow.addClass('slick-disabled').attr('aria-disabled', 'true').css('display', 'none');
_.$prevArrow.removeClass('slick-disabled').attr('aria-disabled', 'false').css('display', '');
} else if (_.currentSlide >= _.slideCount - 1 && _.options.centerMode === true) {
_.$nextArrow.addClass('slick-disabled').attr('aria-disabled', 'true').css('display', 'none');
_.$prevArrow.removeClass('slick-disabled').attr('aria-disabled', 'false').css('display', '');
}
}
Просто вопрос использования метода jquery .css() и display. Кажется, что он работает довольно дурно.
Другой способ сделать это - скользить на один и тот же слайд при прокрутке (предыдущем) на первом слайде или проведите (дальше) на последнем слайде. Используйте swiper метод swiper.SlideTo (n, n, m);
-
1Да, это другой способ сделать это, но это не то, что OP хочет сделать. – ITWitch 6 April 2017 в 05:32
Очень простое решение:
- установить бесконечное значение в false. например
$('.my-slider').slick({ infinite: false }); - , добавьте следующий css
.slick-disabled { display: none; pointer-events:none; }
, и это все.