Jump to content
chrisayers

[Solved] Slick JS Issues Inside the post loop.

Recommended Posts

chrisayers

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.  
image.thumb.png.5b3b3ae73b541b3d7e4d38e98543059f.png

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. 
image.thumb.png.156453ce5e2e0ebcbfedf9619a7bfccf.png


 

Share this post


Link to post
Share on other sites
chrisayers

Example One  Blank page.
image.thumb.png.91a89901ae58fa284ae965ec1437d671.png

Inserting Tangram

image.thumb.png.55fb501cc8095bef8b7fe8cde63a4a49.png

Sidebars all "gone"

 

image.thumb.png.075ea54f790c6ac1bfd17683393f38c1.png

Share this post


Link to post
Share on other sites
Ray

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

Share this post


Link to post
Share on other sites
chrisayers
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. 
 

image.png

Edited by chrisayers
Add screenshot (see edit history)

Share this post


Link to post
Share on other sites
chrisayers
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.  

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×