Слайдер и 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
});

Noonf,
$('определенный div').show();
$('.product_slider_1').slick(...);
$('определенный div').hide();

Хм, я если вставляю эти строки, то у меня все слайдеры слетают )

Noonf,
где код?

Сори, не понял вопроса. Где его расположение или скинуть сюда ? )

Noonf,
скинуть сюда то, что вы написали по предложенному решению.

Noonf,
или структуру скрытого блока

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

$('.product_1').show();
$('.product_slider_1').slick({
autoplay: true,
autoplaySpeed: 200,
speed: 1500,
slidesToShow: 4
});
$('.product_1').hide();

Noonf,

$(window).on("load", function() {
$('селектор_скрытого_блока').show();  // $('селектор_скрытого_блока').css('display', '');
$('.product_slider_1').slick({
    autoplay: true,
    autoplaySpeed: 200,
    speed: 1500,
    slidesToShow: 4
});
$('селектор_скрытого_блока').hide();  // $('селектор_скрытого_блока').css('display', 'none');
});

Noonf,
код функции кнопки открытия?

Сделал по последнему решению и блок слайдера не появляется совсем.

Вот код открытия

jQuery('.product_1').click(function(){
jQuery('.product_slider_1').addClass('active');
jQuery('.bg_slider').addClass('active');

jQuery('.bg_slider').click(function(){
jQuery('.product_slider_1').removeClass('active');
jQuery('.bg_slider').removeClass('active');
});
});

.product_slider_1 это и есть селектор скрытого блока

Noonf,

jQuery(window).on("load", function() {
jQuery('.product_slider_1')
.addClass('active')
.slick({
    autoplay: true,
    autoplaySpeed: 200,
    speed: 1500,
    slidesToShow: 4
})
.removeClass('active');
});

Все супер! Спасибо огромное!! Наверное сразу нужно было скинуть код открытия, я про него забыл совсем. Спасибо еще раз!

Рони, столкнулся с еще одной проблемой, помогите если не сложно ) Дело в том, что таких слайдеров у меня 5 шт., для всех прописал тот код который вы написали. При первом открытии любого из них все отлично срабатывает, а вот при открытии следующего этот код как будто игнорируется и работает по старому (с задержкой или после клика). Пробовал добавить общий класс для всех и прописать его в этот код, не помогло

это бред какой-то, может это сначала исправить?
не назначают клик в клике, если нет задачи убить браузер.

Понял, спасибо! Это поправил

jQuery('.product_1').click(function(){
jQuery('.product_slider_1').addClass('active');
jQuery('.bg_slider').addClass('active');
});

jQuery('.bg_slider').click(function(){
jQuery('.product_slider').removeClass('active');
jQuery('.bg_slider').removeClass('active');
});

Noonf,
проблема осталась?

Да, к сожалению

Noonf,
добавьте так
jQuery('.product_1').click(function(){
jQuery('.product_slider_1').addClass('active').slick('reInit') ;
jQuery('.bg_slider').addClass('active');
});

Добавил, только поменял местами строчки т.к. .bg_slider (затемнение) срабатывал только при повторном нажатии

jQuery('.product_1').click(function(){
jQuery('.bg_slider').addClass('active');
jQuery('.product_slider_1').addClass('active').sli ck('reInit') ;
});

Проблема стала проявляться реже, примерно 1 раз из 5

Noonf,
у вас все слайдеры открываются одновременно?

нет, открывается только один

Вот так прописано для всех пяти слайдеров

jQuery('.product_1').click(function(){
jQuery('.bg_slider').addClass('active');
jQuery('.product_slider_1').addClass('active').sli ck('reInit') ;
});

jQuery('.bg_slider').click(function(){
jQuery('.product_slider_1').removeClass('active');
jQuery('.bg_slider').removeClass('active');
});



jQuery('.product_2').click(function(){
jQuery('.bg_slider').addClass('active');
jQuery('.product_slider_2').addClass('active').sli ck('reInit') ;
});

jQuery('.bg_slider').click(function(){
jQuery('.product_slider_2').removeClass('active');
jQuery('.bg_slider').removeClass('active');
});



jQuery('.product_3').click(function(){
jQuery('.bg_slider').addClass('active');
jQuery('.product_slider_3').addClass('active').sli ck('reInit') ;
});

jQuery('.bg_slider').click(function(){
jQuery('.product_slider_3').removeClass('active');
jQuery('.bg_slider').removeClass('active');
});



jQuery('.product_4').click(function(){
jQuery('.bg_slider').addClass('active');
jQuery('.product_slider_4').addClass('active').sli ck('reInit') ;
});

jQuery('.bg_slider').click(function(){
jQuery('.product_slider_4').removeClass('active');
jQuery('.bg_slider').removeClass('active');
});



jQuery('.product_5').click(function(){
jQuery('.bg_slider').addClass('active');
jQuery('.product_slider_5').addClass('active').sli ck('reInit') ;
});

jQuery('.bg_slider').click(function(){
jQuery('.product_slider_5').removeClass('active');
jQuery('.bg_slider').removeClass('active');
});

А этот код общий для всех

jQuery(window).on("load", function() {
jQuery('.product_slider')
.addClass('active')
.slick({
autoplay: true,
autoplaySpeed: 500,
speed: 1000,
slidesToShow: 4
})
.removeClass('active');
});

Noonf,
много кода ... много лишнего кода ...

Понял, закрытие слайдера сократил вот так

jQuery('.bg_slider').click(function(){
jQuery('.product_slider').removeClass('active');
jQuery('.bg_slider').removeClass('active');
});

Noonf,
форум - поиск - открывашка

Прописал открытие вот так, правда пока только для одного ) Но проблема осталась


window.addEventListener("DOMContentLoaded", function() {
var btn = document.querySelectorAll("[data-id]"),
block = document.querySelectorAll(".product_slider_1");
[].forEach.call(btn, function(item, k) {
item.dataset.text = item.textContent;
var id = item.dataset.id;
item.addEventListener("click", function(event) {
event.preventDefault();
[].forEach.call(block, function(el, i) {
if (el.id == id) {
el.classList.product_slider("active");
el.classList.contains("active") && block[0].classList.remove("active")
}
else el.classList.add("active");
});
})
})
});

Noonf,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Извиняюсь, вот

window.addEventListener("DOMContentLoaded", function() {
    var btn = document.querySelectorAll("[data-id]"),
        block = document.querySelectorAll(".product_slider_1");
    [].forEach.call(btn, function(item, k) {
        item.dataset.text = item.textContent;
        var id = item.dataset.id;
        item.addEventListener("click", function(event) {
            event.preventDefault();
            [].forEach.call(block, function(el, i) {
                if (el.id == id) {
                  el.classList.product_slider("active");
                  el.classList.contains("active") && block[0].classList.remove("active")
                }
                else el.classList.add("active");
            });
        })
    })
});

Я сейчас попробовал в старый код вместо "reInit" вставить 'reinit' и все стало замечательно работать без багов

jQuery('.product_1').click(function(){
jQuery('.bg_slider').addClass('active');
jQuery('.product_slider_1').addClass('active').slick('reinit') ;
});

Наверно так и оставлю ) Спасибо Вам огромное за терпение и помощь!! )

Noonf,
:)

Noonf,
лучше делать макет, минимальный html css js, гадание что у вас и как усложняет поиск решения.

Понял, учту на будущее. Я уже думал скинуть Вам макет этого фрагмента, но решил что это будет сверхнаглость :)