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

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

+1 ещё

Простой
Почему не вызывается функция с export и без него если в теге script указан type="module"?
- 1 подписчик
- 7 часов назад
- 80 просмотров
2

ответа
JavaScript

Простой
Зачем тут используется apply?
- 2 подписчика
- 7 часов назад
- 109 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как определить величину перекоса transform skew?
- 1 подписчик
- 19 часов назад
- 55 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как исправить прыгающий контент у сайта?
- 2 подписчика
- 20 часов назад
- 161 просмотр
1

ответ
JavaScript

+1 ещё

Простой
Как из php передать ошибки в js?
- 1 подписчик
- 20 часов назад
- 166 просмотров
2

ответа
JavaScript

Простой
Что не так при выполнении Get запроса в Chrome?
- 1 подписчик
- 21 час назад
- 265 просмотров
2

ответа
JavaScript

Простой
.toLocaleString() js. Как вывести в input и в totalAmountOfCredit ( не могу догнать как подключить )?
- 1 подписчик
- 22 часа назад
- 31 просмотр
2

ответа
JavaScript

+4 ещё

Простой
Что делать, если после залива приложения на VPS страница остается недоступной?
- 1 подписчик
- вчера
- 75 просмотров
1

ответ
JavaScript

Простой
Можно ли сократить запись и как?
- 1 подписчик
- вчера
- 122 просмотра
2

ответа
JavaScript

+1 ещё

Простой
Почему не срабатывает HapticFeedback?
- 1 подписчик
- вчера
- 47 просмотров
1

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

Junior JavaScript Developer

КРАФТТЕК • Санкт-Петербург

от 60 000 до 80 000 ₽

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

вАйТи

от 5 000 до 25 000 ₽

JavaScript Fullstack

OnClass

от 200 000 до 600 000 ₽

Сделать лендинг, переработать существующий логистический сайт

16 апр. 2024, в 16:34

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

Управление процессами и задачами в продукте "Форсайт"

16 апр. 2024, в 16:33

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

Написать учебное JS приложение - несколько интеграций с API

16 апр. 2024, в 16:31

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

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

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

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

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

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

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