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

Question

[Андрей Иванов]

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

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

Comments

[Andrew]

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

[Андрей Иванов]

testlessons.ru/portfolioandrey

[Андрей Иванов]

<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 -->

[Андрей Иванов]

<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 -->

[Андрей Иванов]

//при нажатии на крестик будет скрываться слайдер
	$('.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

[iBird Rose]

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

Comments

[Андрей Иванов]

//слайдер для проекта
	$('.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');
		});
	});

Answer 2

[Андрей Иванов]

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

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