Задать вопрос
turkish777
@turkish777
junior frontend

Как записать скрипт?

Добрый день!
Есть сайтик
Перелистывание экранов основано на slick-slider
Справа внизу есть блок с сылочкой. Ссылочка становится display:none, как только слайдится последний экран.
При нажатии на любой элемент формы на последнем экране эта ссылочка появляется на полсекунды.
Внимание вопрос: че делать:)
чтоб вот этих появлений не было?

HTML:
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>&Gcy;&lcy;&acy;&vcy;&ncy;&acy;&yacy;</title>
  <meta content="" name="description">
  <meta content="" name="keywords">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta content="ie=edge" http-equiv="x-ua-compatible">
  <link rel="stylesheet" type="text/css" href="assets/scripts/slick/slick.css">
  <link rel="stylesheet" type="text/css" href="assets/scripts/slick/slick-theme.css">
  <link rel="stylesheet" href="assets/styles/app.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript" src="assets/scripts/slick/slick.min.js"></script>
  <script src="assets/scripts/jquery.mousewheel.min.js"></script>
  <script src="assets/scripts/main.js"></script>
</head>
<div class="wrapper">
  <div class="main-content">
    <header class="header">
      <div class="header-left">
        <div class="header-left__top">М-7</div>
        <div class="header-left__bot">Видовые участки</div>
      </div>
      <nav class="header-right"><a class="header-right__item" href="#">Характеристики</a><a class="header-right__item" href="#">Движение</a><a class="header-right__item" href="#">Клиенты</a><a class="header-right__item" href="#">Коммуникации</a><a class="header-right__item" href="#">Перспективы</a></nav>
    </header>
    <div class="content">
      <div class="content-inn content-render">
        <div class="content-inn-item" style="background: url('assets/images/bg1.jpg') center top no-repeat; background-size: cover;">
          <div class="content-inn-item-content">
            <div class="content-inn-item-content__title">Видовые участки на М-7</div>
            <div class="content-inn-item-content__text">Отличное место для реализации Вашего бизнеса.<br>После реконструкции М-7 трафик автомобилей<br>увеличится до 80 000 автомобилей в сутки</div>
          </div>
        </div>
        <div class="content-inn-item" style="background: url('assets/images/bg2.jpg') center top no-repeat; background-size: cover;">
          <div class="content-inn-item-content">
            <div class="content-inn-item-content__title">Коммуникации</div>
            <div class="content-inn-item-content__text">Достигнута договоренность с ГК ПИК<br>о подключении к инженерным сетям<br>(точки подключения в пределах 100 м)</div>
          </div>
        </div>
        <div class="content-inn-item" style="background: url('assets/images/bg3.jpg') center top no-repeat; background-size: cover;">
          <div class="content-inn-item-content">
            <div class="content-inn-item-content__title">Отличные видовые характеристики</div>
            <div class="content-inn-item-content__text">1-я линия шоссе, а шумозащитные экраны<br>будут установлены за проектируемыми<br>объектами, не загораживая их от<br>транспортного потока.</div>
          </div>
        </div>
        <div class="content-inn-item f5">
          <div class="poll">
            <div class="pol pol1">
              <h6 class="pol1__h1">Перспективы</h6>
              <p class="pol1__p pol1__p1">Благодаря наличию всех необходимых условия, окупаемость<br>данных участков пройдет в очень короткий срок</p>
              <p class="pol1__p">Участки примыкают к существующему съезду на ЖК<br>Сакраменто (экономия на строительстве примыканий и<br>переходно-скоростных полос)<br>Наличие рядом с участками ЖК на 3500 жителей, обеспечит<br>стабильный поток покупателей.</p><a class="pol1__a" href="#"><img src="assets/images/prav.svg" alt="">
                <p>Скачать проектную<br>декларацию</p></a>
            </div>
            <div class="pol pol2">
              <h6 class="pol2__h1">Связаться с нами</h6>
              <form action="">
                <div class="form1">
                  <label for="na">Ваше имя</label>
                  <input type="text" placeholder="Иванов Иван" name="na"><br>
                  <label for="te">Телефон</label>
                  <input type="text" placeholder="+7 (900) 000-00-00" name="te"><br>
                  <label for="ma">E-mail</label>
                  <input type="text" placeholder="abc@gmail.com" name="ma"><br>
                </div>
                <div class="form2 o1">
                  <label class="label-check option">
                    <input class="label-check__input" type="checkbox"><span class="label-check__new-input"></span>Ознакомлен с <a href="#">обработкой пресональных данных</a>
                  </label>
                </div>
                <div class="form2">
                  <label class="label-check option">
                    <input class="label-check__input" type="checkbox"><span class="label-check__new-input"></span>Получить проектную декларацию на почту
                  </label>
                </div>
                <input class="submit_mit" type="submit" value="Связаться">
              </form>
            </div>
          </div>
        </div>
      </div>
      <div class="content-animation"></div>
      <div class="scroll-mouse"><br><img class="scroll-mouse__img" src="assets/images/mouse.svg" alt="">
        <p class="scroll-mouse__p">Листайте для<br>навигации</p><a class="svyaz" href="#" data-slide="4">Связаться</a>
      </div>
    </div>
  </div>
</div>


JS:
$(document).ready(function() {
	$('a[data-slide]').click(function(e) {
		e.preventDefault();
		var slideno = $(this).data('slide');
		$('.content-inn').slick('slickGoTo', slideno - 1);
	});
	$('.content-inn').on('afterChange', function(){
		if($(".slick-active").hasClass("f5")){
			$(".svyaz").css("display", "none");
		}
		
	});
	$('.content-inn').on('beforeChange', function(){
		if($(".slick-active").hasClass("f5")){
			$(".svyaz").css("display", "block");
		}
		
	});
})
  • Вопрос задан
  • 85 просмотров
Подписаться 1 Средний Комментировать
Решения вопроса 1
@glagolew059
frontend developer
сделайте так:
$('.content-inn').on('afterChange', function(){
    if($(".slick-active").hasClass("f5")){
      $(".svyaz").css("display", "none");
    } else {
      $(".svyaz").css("display", "block");
	}    
});
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы