Issue with Slick Slider loading incorrectly within a hidden container

The title says it all.

I am currently working on a website using a single HTML file, where different pages are represented by div elements that toggle between display:none and display:block based on an onclick function. On one of these pages, I want to incorporate a Slick Slider. However, I am encountering an issue where the Slider fails to load properly the first time the div is displayed. It only functions correctly after clicking the next/previous buttons or resizing the browser window. Is there a solution to this problem?

You can view the Fiddle (apologies for the excess code) which includes the relevant CSS at the end and clearly identified javascript.

https://jsfiddle.net/Santos1600/9xv67aL8/

To access the slider, follow these steps: Click on the image below "Sonhar", Open the hamburger Menu, Click on "Episódios", use the previous or next button to see the intended loading behavior. Please note that this is still a work in progress...just random divs with gray background.

javascripthtmljquerycssslick.js

Answer №1

When utilizing Slick.js for your slideshow, it may encounter difficulty determining the width of the slides if they are initially hidden upon initialization, resulting in a width setting of zero. To address this issue, one solution is to refresh your Slick instance after unveiling your slideshow. In the context of your situation:

function SwapDivsWithClick(div1, div2) {
  var d1 = document.getElementById(div1);
  var d2 = document.getElementById(div2);
  if (d2.style.display == "none") {
    d1.style.display = "none";
    d2.style.display = "block";
  } else {
    d1.style.display = "block";
    d2.style.display = "none";
  }

  // Refresh slideshow when Episodios is revealed
  if (div2 === 'episodios') {
    $(".postwrapper").slick("refresh");
  }
}

View the JS Fiddle here: https://jsfiddle.net/vhoejgum/

For further insights on addressing the slick.js issue, visit: https://github.com/kenwheeler/slick/issues/235

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Symfony 4 - How to Dynamically Submit Forms using Ajax

Working on my Symfony 4 project, I have a form where users need to select a vehicle at a specific point. I want to allow users to add a new vehicle using AJAX beside the "Vehicle" field and have it automatically added to their selection after saving it to ...

phpjqueryajaxsymfony

What happens when the user closes a notification in GetUIkIt 3?

Is there a way to detect when a UIKit notification has been closed? The UIkit notification plugin () mentions that it has a close event. Can this be utilized for notifications triggered programmatically as shown below? e.g. UIkit.notification({ mess ...

javascriptgetuikit

Breaking down a JavaScript string into two separate arrays

Imagine you have a string formatted like this: "Applejack=A.J.+Applecar,Lemon+Vodka=AlfieCocktail+ Sunset + SexOnTheBeach" Your task is to write Javascript code using .split() to parse long strings (up to 100000 characters) and separate them int ...

javascriptarraysstringfor-loopjavascript-objects

What is the method to link a URL to a button?

For this project, I am scraping data from a website. You can find the website here. Each record on the website has a button that uses JavaScript to open a Spotify page. I am trying to extract the URL of that Spotify page using Python. So far, I have used S ...

javascriptpythonseleniumweb-scrapingbeautifulsoup

What is the best way to automate sending emails for every error that arises in Node.js?

In the scenario where my node.js application is up and running, I am looking for a way to handle all types of errors (not just web errors) and have a function that can send an email notification when an error occurs. Essentially, before the error gets wr ...

javascriptdebuggingnode.jserror-handlingexpress

Exploring the blur() function in JavaScript through cold calling

There is a specific line of code that I need help with. document.getElementById("firstName").addEventListener("blur", validateField); Additionally, there is this block of code: validateField = (event) => { const el = event.targe ...

javascriptbootstrap-4

The close button on the modal vanishes on a real iPhone

The issue I am facing is that the Close Button appears when testing responsiveness in Chrome, but disappears on a real iPhone. When clicking on an image, the image gallery should appear. However, on an iPhone, only the previous and next buttons are visibl ...

htmlcssreactjsnext.jschakra-ui

Performing basic database operations on an Ionic application using SQLite database

Successfully integrated the essential ngcordova SQLite plugin to develop a sample app. index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, u ...

javascriptangularjssqliteionic-framework

When using the `sendFile` method in Node.js Express, you will notice that the HTML content

Hey there, I'm new to nodejs and trying to create a simple website with two pages. I'm facing an issue where the content of the second file is being rendered as the first one, even though the source inspector in the browser indicates that it&apos ...

javascripthtmlnode.jsexpressfrontend

Steps to switch from the "on click" event to on mouse over in the following code

Can someone help me modify this code to load the larger image on mouse hover instead of on click? Additionally, is there an easy way to add "next" and "prev" buttons to navigate through all the images once a larger image is loaded? Thank you! /** * Image ...

javascriptjqueryhtmlonclickonmouseover

Implementing the insertion of a <div> element within an input field using jQuery

<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></scr ...

javascriptjqueryhtmlcss

Iterate through a jQuery function to retrieve values from checkboxes starting from the 4th one that has been clicked

I am currently using a loop in a form to calculate the total price of a product based on user selections. However, I have encountered a challenging task where certain checkbox groups have specific rules. For instance, group A should only contribute to the ...

javascriptjquery

What is the best way to locate an element with the class name being an email address using jQuery?

Is it possible to locate an element with an email address as the class name, considering that the email address varies? $(document).ready(function(){ //not working getting error var email="<a href="/cdn-cgi/l/email-protection" class="__cf_email__ ...

javascriptjqueryhtmlclassname

What is the process for pulling out a specific JSON element based on a condition?

I am working with a JSON object that looks like this: "links" : [ { "rel" : "first", "href" : "http://localhost:8080/first" }, { "rel" : "self", "href" : "http://localhost:8080/self" }, { "rel" : "next", "href" : "http://loca ...

javascriptjson

Incorporate an MP3 audio track into an image

Greetings, I have an image and I am interested in embedding the associated MP3 file directly onto the image instead of having it displayed separately below. Is this achievable? Thank you Best regards, Gary <!doctype html> <html> <head&g ...

htmlmp3embedaudio

How can I replicate the function of closing a tab or instance in a web browser using Protractor/Selenium?

I want to create an automated scenario where a User is prompted with an alert message when they try to close the browser's tab or the browser itself. The alert should say something like "Are you sure you want to leave?" When I manually close the tab ...

javascriptseleniumprotractoraction

Challenges arise when utilizing the foundation 6 grid for image overlays within a React application

Having some trouble using the foundation 6 xy grid for the first time and aligning three images with text overlays at the bottom of each image. I am struggling to make the background of the text fill the full width of the image while also ensuring it is re ...

javascriptcssreactjssasszurb-foundation

Steps for incorporating one item into another object

I'm struggling to add an object to another object. I've created an object with two properties and now I want to assign it to another object. $scope.urlMappings = {}; $scope.Mapping = function() { ...

javascripthtmlangularjs

Are you in need of a trendy loading bar designed with Javascript?

Currently in the process of developing a car-related website, I am aiming to create an aesthetically pleasing progress bar using javascript (not flash). The goal is for it to resemble a speed indicator, similar to this example: After conducting several Go ...

javascriptprogress-barloadingindicator

Web Essentials is experiencing a problem with minified CSS

Today, while using Web Essentials 2013 for Update 3 with Visual Studio Express 2013 for Web, I encountered an issue with the minified CSS file. The website I am currently working on is built on a Twitter Bootstrap platform and utilizes two separate CSS fil ...

csstwitter-bootstrapweb-essentials