Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.12.2016, 11:47
Аспирант
Отправить личное сообщение для Alexbelkevich Посмотреть профиль Найти все сообщения от Alexbelkevich
 
Регистрация: 02.10.2014
Сообщений: 52

Доработка Slick Slider
Здравствуйте. Довольно давно работаю со слайдером Slick, думаю, многим он известен.

Сейчас встала передо мной такая задача, которую я частично решил, но не могу решить полностью. Вот тут можноувидеть что получилось.

В чем суть. Есть 3 иконки "Как купить", "Как оплатить", "Как получить". По сути, они должны работать как радиокнопки. Это я сделал. Так же как и сделал кастомные радиокнопки и кастомные стрелки (так как дизайн не дает возможности расположить стрелки слайдера так как надо).

Проблема вот в чем.
1. При клики на иконки не могу сделать так, чтобы радиокнопки и иконки между собой "синхронизировались" так, как при клике на стрелки. И наоборот.
2. Иногда слайдер будто живет своей жизнью. Особенно если, например, на стрелку быстро несколько раз нажать.

Помогите, пожалуйста. Прикладываю код, который у меня получился.

$(document).on("click", '.how-top-paging__slide', function() {
	  	$('.how-slider').slick( 'slickGoTo', $(this).data("count"));
	  	$('.how-top-paging span').removeClass('active');
	  	$(this).addClass('active');
	})
	$(document).on("click", '.how-bottom-paging__slide', function() {
	  	$('.how-slider').slick( 'slickGoTo', $(this).data("count"));
	  	$('.how-bottom-paging span').removeClass('active');
	  	$(this).addClass('active');
	 })
	$(document).on("click", '.how__next-slide', function() {
		var findpagingtop = $('.how-top-paging').find('.how-top-paging__slide.active');
		if(!$(findpagingtop).is(":last-child")) {
			findpagingtop.next().click();
		}
		var findpagingbottom = $('.how-bottom-paging').find('.how-bottom-paging__slide.active');
		if(!$(findpagingbottom).is(":last-child")) {
			findpagingbottom.next().click();
		}
	});
	$(document).on("click", '.how__prev-slide', function() {
		var findpagingtop = $('.how-top-paging').find('.how-top-paging__slide.active');
		if(!$(findpagingtop).is(":first-child")) {
			findpagingtop.prev().click();
		}
		var findpagingbottom = $('.how-bottom-paging').find('.how-bottom-paging__slide.active');
		if(!$(findpagingbottom).is(":first-child")) {
			findpagingbottom.prev().click();
		}
	});


Спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 10.12.2016, 14:10
Аспирант
Отправить личное сообщение для Alexbelkevich Посмотреть профиль Найти все сообщения от Alexbelkevich
 
Регистрация: 02.10.2014
Сообщений: 52

Сообщение от Rise Посмотреть сообщение
Alexbelkevich, тебе надо просто изменить существующие стили стандартных точек навигации и стрелок слайдера и всё ("дизайн не дает" учи css и всё даст) - это и называется кастомные, а создать левые элементы и писать к ним скрипт дублируя функционал слайдера это чушь собачья а не кастомизация...
Каждый слайдер имеет обычно 2 вида прокрутки - с помощью стрелок и с помощью радиокнопок. В данном случае получается, что здесь 2! вида радиокнопок. Интересно, каким образом я могу это сделать, если поддерживается только один вид?
Ответить с цитированием
  #3 (permalink)  
Старый 10.12.2016, 14:28
Аспирант
Отправить личное сообщение для Alexbelkevich Посмотреть профиль Найти все сообщения от Alexbelkevich
 
Регистрация: 02.10.2014
Сообщений: 52

Rise,
Где здесь есть возможность использовать радиокнопки дважды? Их можно включить/ выключить, задать классы. Не более того
Ответить с цитированием
  #4 (permalink)  
Старый 10.12.2016, 14:29
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

Ответить с цитированием
  #5 (permalink)  
Старый 10.12.2016, 15:26
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

slick 1.6.0 дополнительные кнопки управления
<!DOCTYPE html>

<html>
<head>
  <meta charset="utf-8">
  <script type="text/javascript" src="https://code.jquery.com/jquery-compat-git.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css">
  <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js">
</script>
  <style type="text/css">
.how-top-paging__slide.active{
    background-color:#FF0000;
  }

  span{
    margin:8px;
  }
  </style>

  <title>Slick variableWidth centerMode</title>
  <script>
$(window).on("load", function() {
    var slider = $(".how-slider");
    slider.slick({
        draggable: !1,
        arrows: !1,
        autoplay: !1
    });
    var dot = $(".how-top-paging__slide");
    slider.on("beforeChange", function(event, slick, currentSlide, nextSlide) {
        dot.removeClass("active").eq(nextSlide).addClass("active")
    });
    dot.on("click", function() {
        var i = dot.index(this);
        slider.slick("slickGoTo", i)
    });
    $(".how__prev-slide").on("click", function() {
        slider.slick("slickPrev")
    });
    $(".how__next-slide").on("click", function() {
        slider.slick("slickNext")
    })
  });

  </script>
</head>

<body>
  <div class="how-top-paging">
    <span class="how-top-paging__slide active" data-count="0">11</span><span class="how-top-paging__slide" data-count="1">22</span><span class="how-top-paging__slide" data-count="2">33</span>
  </div>

  <div class="how-slider">
    <div class="hotel-slider__slide hotel-slider__media"><img src="http://placehold.it/360x480&text=Slide+1"></div><!-- /.hotel-slider__slide -->

    <div class="hotel-slider__slide hotel-slider__media"><img src="http://placehold.it/720x480&text=Slide+2"></div><!-- /.hotel-slider__slide -->

    <div class="hotel-slider__slide hotel-slider__media"><img src="http://placehold.it/360x480&text=Slide+3"></div><!-- /.hotel-slider__slide -->
  </div><!-- /.hotel-slider -->
  <span class="how__prev-slide">prev</span><span class="how__next-slide">next</span>
</body>
</html>
Ответить с цитированием
  #6 (permalink)  
Старый 12.12.2016, 07:49
Аспирант
Отправить личное сообщение для Alexbelkevich Посмотреть профиль Найти все сообщения от Alexbelkevich
 
Регистрация: 02.10.2014
Сообщений: 52

рони,
Спасибо большое!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
user adaptive slider s24344 Элементы интерфейса 1 18.02.2016 12:21
user adaptive slider s24344 Элементы интерфейса 0 18.02.2016 12:14
custom adaptive slider s24344 Элементы интерфейса 0 18.02.2016 11:01
Отображение модального окна со slick slider Drm1804 jQuery 3 23.03.2015 17:01
Управление Slick slider при помощи JQ.ui Drm1804 jQuery 3 12.03.2015 14:16