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

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

Простой
Возможно ли используя js очистить кешированные данные загруженных документов?
- 1 подписчик
- час назад
- 25 просмотров
0

ответов
JavaScript

Средний
Какой подойдет слайдер для кругового меню?
- 1 подписчик
- 4 часа назад
- 33 просмотра
0

ответов
JavaScript

+1 ещё

Простой
Почему таймер ускоряется?
- 1 подписчик
- вчера
- 122 просмотра
1

ответ
JavaScript

Средний
Как сделать звездный рейтинг?
- 1 подписчик
- вчера
- 129 просмотров
1

ответ
JavaScript

+1 ещё

Средний
Как справиться с ошибками,которіе,вероятно не деают ничего сделать в плагине произольніх полей?
- 2 подписчика
- вчера
- 104 просмотра
0

ответов
JavaScript

+2 ещё

Простой
Использование PDFium через WASM в Node.js и альтернативы для анализа метаданных PDF?
- 1 подписчик
- 20 янв.
- 35 просмотров
2

ответа
JavaScript

+2 ещё

Простой
В чем может быть причина видимых разрывов в изображении составленном через чанки?
- 1 подписчик
- 20 янв.
- 89 просмотров
0

ответов
JavaScript

+4 ещё

Простой
Как повторить такую анимацию?
- 1 подписчик
- 20 янв.
- 280 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Скриншот-тестирование отдельного компонента?
- 1 подписчик
- 19 янв.
- 66 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Почему при нажатии на таймер он не останавливается?
- 1 подписчик
- 19 янв.
- 89 просмотров
1

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

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

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

Wanted. • Москва

от 250 000 до 400 000 ₽

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

UX-редактор

22 янв. 2025, в 19:19

2300 руб./в час

Разработка и корректировка текстов

22 янв. 2025, в 18:00

15000 руб./за проект

Tech-редактор

22 янв. 2025, в 17:57

2000 руб./в час

Кода не будет сегодня? Расходимся
<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

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

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

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

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

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