[Solved] Slick JS Issues Inside the post loop.

[chrisayers+ 105]

It seems that in my testing, that all plug-ins that use slick.js files do not function inside the Wordpress Page/Post loop as a shortcode.  This is true from Tanagram, Impulse, Flick, or any of the carousel plugins.  Using them inside the loop as such [pl_section section="impulse" id="impulsetest"], causes the WP content container to go "full-width" and the widget sidebars to display underneath, rather than left or right.

The only plugin I have found that has a "working" carousel is iProduct.  

In later plug-ins we have switched to flickety.js and these all seem to work fine inside the wp-loop.  Can we retro-fit all slick.js plugins with flickety?

This is an example of how I use shortcodes inside the WP-Loop. This allows me to use any WP-Theme (This site looks fine on twentysixteen) and also use WP widgets. 



 

[chrisayers+ 105]

Example One  Blank page.


Inserting Tangram



Sidebars all "gone"

 

[Ray 15]

Hi @chrisayers

This seems to be a css not js issue. Here's a temporary/quick fix:

@media (min-width: 768px){
    .one-sidebar-left,
    .one-sidebar-right,
    .two-sidebar-center,
    .two-sidebar-right,
    .two-sidebar-left{

      .pl-content-loop{
        max-width: 70%;
      }
    }
}

Add it via Custom Styles

[chrisayers+ 105]

10 hours ago, raylonet said:

Hi @chrisayers

This seems to be a css not js issue. Here's a temporary/quick fix:

@media (min-width: 768px){
    .one-sidebar-left,
    .one-sidebar-right,
    .two-sidebar-center,
    .two-sidebar-right,
    .two-sidebar-left{

      .pl-content-loop{
        max-width: 70%;
      }
    }
}

Add it via Custom Styles

Thanks a lot. I suspected CSS more than .JS. I have dug through that code line by line and compared it to "working" sections. Everything seemed to check out. I have added <div> in the php. I have added pl-row I have added pl-wrap everything I could think of to get that container to not "break".   I have gotten pretty good at editing sections and creating my own. I really need a good carousel for my clients but have always had to use a "band-aid".  


Your bandaid seems to work fine on Tangram and Flick. These two would suit most needs. It does not fix Impulse but you are close. 
 

[Ray 15]

Here's a video of impulse inside content with these settings: https://cl.ly/lnqZ

[chrisayers+ 105]

13 hours ago, raylonet said:

Here's a video of impulse inside content with these settings: https://cl.ly/lnqZ

Thanks again @raylonet. That solved my immediate issues.