Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.03.2018, 17:35
Аспирант
Отправить личное сообщение для Noonf Посмотреть профиль Найти все сообщения от Noonf
 
Регистрация: 26.11.2017
Сообщений: 38

Слайдер и display:none
Здравствуйте! Помогите решить проблему. Есть слайдер который отображается только при нажатии на определенный div. Так как плагин не особо дружит с display:none было не мало проблем. В целом слайдер работает, но главной проблемой стало не отображение самих слайдов (изображений). Заметил, что если нажать на поле слайда, то через несколько секунд слайды появляются и все работает. Частично решил проблему через автоплей, но иногда все же не срабатывает. Приложу скрины для наглядности. Заранее благодарен!

P.S. На просторах инета нашел решение с помощью вот такой строчки $(".slider").slick('reinit');
Но мне не помогло, хотя возможно не туда вставлял )

Вот html слайдера

<article class="product_slider_1">
				<img src="images/product_slider_1/slide_1.png" alt="Картинка слайдера 1" class="slide_img_product">
				<img src="images/product_slider_1/slide_2.png" alt="Картинка слайдера 2" class="slide_img_product">
				<img src="images/product_slider_1/slide_3.png" alt="Картинка слайдера 3" class="slide_img_product">
				<img src="images/product_slider_1/slide_4.png" alt="Картинка слайдера 4" class="slide_img_product">
				<img src="images/product_slider_1/slide_5.png" alt="Картинка слайдера 5" class="slide_img_product">
				<img src="images/product_slider_1/slide_6.png" alt="Картинка слайдера 6" class="slide_img_product">
				<img src="images/product_slider_1/slide_7.png" alt="Картинка слайдера 7" class="slide_img_product">
				<img src="images/product_slider_1/slide_8.png" alt="Картинка слайдера 8" class="slide_img_product">
				<img src="images/product_slider_1/slide_9.png" alt="Картинка слайдера 9" class="slide_img_product">
				<img src="images/product_slider_1/slide_10.png" alt="Картинка слайдера 10" class="slide_img_product">
				<img src="images/product_slider_1/slide_11.png" alt="Картинка слайдера 11" class="slide_img_product">
				<img src="images/product_slider_1/slide_12.png" alt="Картинка слайдера 12" class="slide_img_product">
			</article>



и js

$('.product_slider_1').slick({
    autoplay: true,
    autoplaySpeed: 200,
    speed: 1500,
    slidesToShow: 4
});
Изображения:
Тип файла: jpg 1.JPG (88.5 Кб, 1 просмотров)
Тип файла: jpg 2.JPG (34.1 Кб, 0 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 14.03.2018, 18:16
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

Noonf,
$('определенный div').show();
$('.product_slider_1').slick(...);
$('определенный div').hide();
Ответить с цитированием
  #3 (permalink)  
Старый 14.03.2018, 19:20
Аспирант
Отправить личное сообщение для Noonf Посмотреть профиль Найти все сообщения от Noonf
 
Регистрация: 26.11.2017
Сообщений: 38

Хм, я если вставляю эти строки, то у меня все слайдеры слетают )
Ответить с цитированием
  #4 (permalink)  
Старый 14.03.2018, 19:30
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

Noonf,
где код?
Ответить с цитированием
  #5 (permalink)  
Старый 14.03.2018, 19:38
Аспирант
Отправить личное сообщение для Noonf Посмотреть профиль Найти все сообщения от Noonf
 
Регистрация: 26.11.2017
Сообщений: 38

Сори, не понял вопроса. Где его расположение или скинуть сюда ? )
Ответить с цитированием
  #6 (permalink)  
Старый 14.03.2018, 19:40
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

Noonf,
скинуть сюда то, что вы написали по предложенному решению.
Ответить с цитированием
  #7 (permalink)  
Старый 14.03.2018, 19:42
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

Noonf,
или структуру скрытого блока
Ответить с цитированием
  #8 (permalink)  
Старый 14.03.2018, 19:48
Аспирант
Отправить личное сообщение для Noonf Посмотреть профиль Найти все сообщения от Noonf
 
Регистрация: 26.11.2017
Сообщений: 38

Вот, я пропустил фигурную скобку и поэтому все слетало. Но почему-то не помогло, слайды все равно появляются только после движения слайдера, а иногда только после нажатия.

$('.product_1').show();
$('.product_slider_1').slick({
autoplay: true,
autoplaySpeed: 200,
speed: 1500,
slidesToShow: 4
});
$('.product_1').hide();
Ответить с цитированием
  #9 (permalink)  
Старый 14.03.2018, 19:51
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

Noonf,
$(window).on("load", function() {
$('селектор_скрытого_блока').show();  // $('селектор_скрытого_блока').css('display', '');
$('.product_slider_1').slick({
    autoplay: true,
    autoplaySpeed: 200,
    speed: 1500,
    slidesToShow: 4
});
$('селектор_скрытого_блока').hide();  // $('селектор_скрытого_блока').css('display', 'none');
});
Ответить с цитированием
  #10 (permalink)  
Старый 14.03.2018, 19:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

Noonf,
код функции кнопки открытия?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
вкладки и слайдер slicks ildar94 Элементы интерфейса 6 16.01.2018 15:29
Как поместить слайдер в модальное окно? ИщуПомощь Элементы интерфейса 2 24.08.2017 20:27
Полноэкранный слайдер с визуальными эффектами. LLIypuk Элементы интерфейса 3 06.04.2017 13:33
Интересный слайдер (ротатор) TRIGUN Общие вопросы Javascript 2 26.11.2015 18:37
Слайдер с перетаскиванием tofota Общие вопросы Javascript 3 18.05.2015 08:44