Нажимаю на кнопку «смотреть» и открывается слайдер без картинок?

Question

Андрей Иванов @newdecline

Front-end-developer

Нажимаю на кнопку «смотреть» и открывается слайдер без картинок?

Нажимаю на кнопку "смотреть" и открывается слайдер без картинок.

После как нажму на стрелку то картинка прогрузится, но без навигации(превью картитнок внизу)

А вообще должно вот так быть

Вопрос задан более трёх лет назад
186 просмотров

5 комментариев

Подписаться 1 Средний 5 комментариев

Andrew @KickeRocK

Кода не будет сегодня? Расходимся

Написано более трёх лет назад
Андрей Иванов @newdecline Автор вопроса

testlessons.ru/portfolioandrey

Написано более трёх лет назад

Андрей Иванов @newdecline Автор вопроса

<div class="projeckt-slider projeckt-slider-1">
      <div class="container">
        <div class="slider-wrapper">
          <h2 class="slider-title">Рекламный сайт приложения для смартфона</h2>
          <div class="slider-close"></div>
          <!-- /.slider-close -->
          <div class="slider__top">
            <img src="img/portfolio/projeckt-6/img-1.jpg" alt="Реклама приложения" class="slider__top-img">
            <img src="img/portfolio/projeckt-6/img-2.jpg" alt="Реклама приложения" class="slider__top-img">
            <img src="img/portfolio/projeckt-6/img-3.jpg" alt="Реклама приложения" class="slider__top-img">
            <img src="img/portfolio/projeckt-6/img-4.jpg" alt="Реклама приложения" class="slider__top-img">
          </div>
          <!-- /.slider__top -->

          <div class="slider__bottom">
            <img src="img/portfolio/projeckt-6/img-1.jpg" alt="Реклама приложения" class="slider__bottom-img">
            <img src="img/portfolio/projeckt-6/img-2.jpg" alt="Реклама приложения" class="slider__bottom-img">
            <img src="img/portfolio/projeckt-6/img-3.jpg" alt="Реклама приложения" class="slider__bottom-img">
            <img src="img/portfolio/projeckt-6/img-4.jpg" alt="Реклама приложения" class="slider__bottom-img">
          </div>
          <!-- /.slider__bottom -->

        </div>
        <!-- /.slider-wrapper -->
      </div>
      <!-- /.container -->
    </div>
    <!-- /.projeckt-slider -->

    <div class="projeckt-slider projeckt-slider-2">
      <div class="container">
        <div class="slider-wrapper">
          <h2 class="slider-title">Рекламный сайт приложения для смартфона</h2>
          <div class="slider-close"></div>
          <!-- /.slider-close -->
          <div class="slider__top">
            <img src="img/portfolio/projeckt-7/img-1.jpg" alt="Реклама приложения" class="slider__top-img">
            <img src="img/portfolio/projeckt-7/img-2.jpg" alt="Реклама приложения" class="slider__top-img">
            <img src="img/portfolio/projeckt-7/img-3.jpg" alt="Реклама приложения" class="slider__top-img">
            <img src="img/portfolio/projeckt-7/img-4.jpg" alt="Реклама приложения" class="slider__top-img">
          </div>
          <!-- /.slider__top -->

          <div class="slider__bottom">
            <img src="img/portfolio/projeckt-7/img-1.jpg" alt="Реклама приложения" class="slider__bottom-img">
            <img src="img/portfolio/projeckt-7/img-2.jpg" alt="Реклама приложения" class="slider__bottom-img">
            <img src="img/portfolio/projeckt-7/img-3.jpg" alt="Реклама приложения" class="slider__bottom-img">
            <img src="img/portfolio/projeckt-7/img-4.jpg" alt="Реклама приложения" class="slider__bottom-img">
          </div>
          <!-- /.slider__bottom -->

        </div>
        <!-- /.slider-wrapper -->
      </div>
      <!-- /.container -->
    </div>
    <!-- /.projeckt-slider -->
        </div>
        <!-- /.slider-wrapper -->
      </div>
      <!-- /.container -->
    </div>
    <!-- /.projeckt-slider -->

Написано более трёх лет назад

Андрей Иванов @newdecline Автор вопроса

<div id="portfolio" class="portfolio">
          <div class="container">
            <h2 class="section-title">/портфолио/</h2>
            <div class="portfolio__wrapper">

              <div class="portfolio__block portfolio__block-img6">
                <span class="portfolio__title">
                  Реклама приложения 
                </span>
                <button class="btn-portfolio">Смотреть</button>
              </div>
              <!-- /.portfolio__block -->

              <div class="portfolio__block portfolio__block-img7">
                <span class="portfolio__title">
                  Сайт - блог
                </span>
                <button class="btn-portfolio">Смотреть</button>
              </div>
              <!-- /.portfolio__block -->

              <div class="portfolio__block portfolio__block-img8">
                <span class="portfolio__title">
                  Сайт для фирмы спортивной одежды 
                </span>
                <button class="btn-portfolio">Смотреть</button>
              </div>
              <!-- /.portfolio__block -->

              <div class="portfolio__block portfolio__block-img9">
                <span class="portfolio__title">
                  Сайт автосервиса 
                </span>
                <button class="btn-portfolio">Смотреть</button>
              </div>
              <!-- /.portfolio__block -->

            </div>
            <!-- /.portfolio__portfolio -->
          </div>
          <!-- /.container -->
        </div>
        <!-- /.portfolio -->

Написано более трёх лет назад

Андрей Иванов @newdecline Автор вопроса

//при нажатии на крестик будет скрываться слайдер
	$('.slider-close').click(function() {
		$('.projeckt-slider-1,.projeckt-slider-2,.projeckt-slider-3,.projeckt-slider-4').fadeOut();
	});
	
	//при нажатии на кнопку"смотреть" будет открываться слайдер
	$('.portfolio__block-img6 > button').click(function() {
		$('.projeckt-slider-1').fadeToggle();
	});
	$('.portfolio__block-img7 > button').click(function() {
		$('.projeckt-slider-2').fadeToggle();
	});
	$('.portfolio__block-img8 > button').click(function() {
		$('.projeckt-slider-3').fadeToggle();
	});
	$('.portfolio__block-img9 > button').click(function() {
		$('.projeckt-slider-4').fadeToggle();
	});

Написано более трёх лет назад

Решения вопроса 1

1 комментарий

Андрей Иванов @newdecline Автор вопроса

//слайдер для проекта
	$('.slider__top').slick({
		slidesToShow: 1,
		slidesToScroll: 1,
		arrows: true,
		fade: true,
		asNavFor: '.slider__bottom'
	});
	$('.slider__bottom').slick({
		slidesToShow: 4,
		slidesToScroll: 1,
		asNavFor: '.slider__top',
		arrows: false,
		dots: false,
		centerMode: true,
		focusOnSelect: true,
		infinite: true,
		centerPadding: 0
	});

	//при нажатии на крестик будет скрываться слайдер
	$('.slider-close').click(function() {
		$('.projeckt-slider-1,.projeckt-slider-2,.projeckt-slider-3,.projeckt-slider-4').fadeOut(400, function() {
			$('.slider__bottom').slick('slickGoTo', 0, true);
		});
	});

	//при нажатии на кнопку"смотреть" будет открываться слайдер
	$('.portfolio__block-img6 > button').click(function() {
		$('.projeckt-slider-1').fadeIn(400, function() {
			$('.slider__top').slick('setPosition');
			$('.slider__bottom').slick('setPosition');
		});
	});
	$('.portfolio__block-img7 > button').click(function() {
		$('.projeckt-slider-2').fadeIn(400, function() {
			$('.slider__top').slick('setPosition');
			$('.slider__bottom').slick('setPosition');
	});
	});
	$('.portfolio__block-img8 > button').click(function() {
		$('.projeckt-slider-3').fadeIn(400, function() {
			$('.slider__top').slick('setPosition');
			$('.slider__bottom').slick('setPosition');
		});
	});
	$('.portfolio__block-img9 > button').click(function() {
		$('.projeckt-slider-4').fadeIn(400, function() {
			$('.slider__top').slick('setPosition');
			$('.slider__bottom').slick('setPosition');
		});
	});

Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 1

Комментировать

Ваш ответ на вопрос

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

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

JavaScript

Простой
Ошибка Uncaught TypeError: Cannot read properties of undefined (reading 'find'). Как можно поправить?
- 1 подписчик
- 6 часов назад
- 42 просмотра
1

ответ
JavaScript

+2 ещё

Средний
Как программно изменить уровень звука/прогресс проигрывания в input type=range в новом интерфейсе Яндекс Музыки?
- 1 подписчик
- 8 часов назад
- 331 просмотр
0

ответов
JavaScript

+1 ещё

Простой
Почему при запуске кода вылетает такая ошибка: Uncaught ReferenceError: THREE is not defined?
- 1 подписчик
- 9 часов назад
- 52 просмотра
1

ответ
JavaScript

Простой
Динамическое изменение value формы в js — как устранить ошибку дублирования?
- 1 подписчик
- вчера
- 57 просмотров
1

ответ
JavaScript

Средний
Как добавлять класс при клике только 2 раза?
- 1 подписчик
- вчера
- 65 просмотров
1

ответ
WordPress

+1 ещё

Средний
Как мигрировать содержимое Master Slider в любой другой аналогичный слайдер на Wordpress?
- 1 подписчик
- 20 февр.
- 21 просмотр
1

ответ
JavaScript

+1 ещё

Простой
Почему не корректно отображается контент, в зависимости от состояния чекбокса?
- 1 подписчик
- 19 февр.
- 82 просмотра
0

ответов
JavaScript

+1 ещё

Простой
Как сделать что бы подгружались записи соответствующие промежуточным значениям чекбоксов?
- 1 подписчик
- 19 февр.
- 79 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как сделать что таймер останавливатся по id?
- 1 подписчик
- 18 февр.
- 121 просмотр
0

ответов
JavaScript

+1 ещё

Средний
Как завершить запрос?
- 2 подписчика
- 17 февр.
- 601 просмотр
1

ответ
Показать ещё Загружается…

Бэкэнд-разработчик JavaScript

Wanted. • Москва

от 250 000 до 400 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 120 000 ₽

Senior Frontend (JavaScript) разработчик

Vital Partners

от 350 000 до 420 000 ₽

Кода не будет сегодня? Расходимся
<div id="portfolio" class="portfolio"> <div class="container"> <h2 class="section-title">/портфолио/</h2> <div class="portfolio__wrapper"> <div class="portfolio__block portfolio__block-img6"> <span class="portfolio__title"> Реклама приложения </span> <button class="btn-portfolio">Смотреть</button> </div>  <div class="portfolio__block portfolio__block-img7"> <span class="portfolio__title"> Сайт - блог </span> <button class="btn-portfolio">Смотреть</button> </div>  <div class="portfolio__block portfolio__block-img8"> <span class="portfolio__title"> Сайт для фирмы спортивной одежды </span> <button class="btn-portfolio">Смотреть</button> </div>  <div class="portfolio__block portfolio__block-img9"> <span class="portfolio__title"> Сайт автосервиса </span> <button class="btn-portfolio">Смотреть</button> </div>  </div>  </div>  </div>
//при нажатии на крестик будет скрываться слайдер $('.slider-close').click(function() { $('.projeckt-slider-1,.projeckt-slider-2,.projeckt-slider-3,.projeckt-slider-4').fadeOut(); }); //при нажатии на кнопку"смотреть" будет открываться слайдер $('.portfolio__block-img6 > button').click(function() { $('.projeckt-slider-1').fadeToggle(); }); $('.portfolio__block-img7 > button').click(function() { $('.projeckt-slider-2').fadeToggle(); }); $('.portfolio__block-img8 > button').click(function() { $('.projeckt-slider-3').fadeToggle(); }); $('.portfolio__block-img9 > button').click(function() { $('.projeckt-slider-4').fadeToggle(); });

Answer 1 · 2018-05-11 21:58:26

iBird Rose @iiiBird

Пока ты спишь - твой конкурент совершенствуется

при открытии модалки вызывай
$('.slider').slick('setPosition');

Ответ написан более трёх лет назад

1 комментарий

Answer 2 · 2018-05-11 17:48:36

Пока не нажимаю на стрелку (лево,право) стили ширины в разметке стоят 0px поэтому не видно, а как сделать что бы не было ширины 0px

ещё странный факт , при изменении ширины окна браузера слайдер полностью загружается(все картинки)

Нажимаю на кнопку «смотреть» и открывается слайдер без картинок?

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

Минуточку внимания

Войдите на сайт