Hi first of all thanks for the great plugin, I use it a lot on a lot of different sites and it’s very useful!
I only constantly (on all sites I have developed) walk into the same issue(s) when using Tangible L&L to create a post slider in combination with Elementor.
- The slider doesn’t work within the Elementor editor, it just shows each “slide” on a separate row and there is no slider functionality. However, it does show up fine on the front end (at least while logged in, see next issue).
Screenshot of a Tangible Template with a slider in the Elementor editor:
- When using the “Tangible Template element” within Elementor and selecting a template that uses a slider, it will only display on the front end when logged in as an admin, but when logged out (or eg. using private browsing) nothing is shown at all.
However, if I instead add the template to Elementor using a shortcode eg. [template id=5665], it does show up on the front end for all visitors (whether or not they are logged in).
Screenshot of shortcode in Elementor (also no slider functionality just like the last screenshot):
Screenshot of front-end when logged in (both normal Tangible Template Element as the shortcode version show up):
Screenshot while private browsing (only the shortcode version shows up):
BTW other Tangible Templates without slider functionality work and show up fine.
For now, I have fallen back to using the shortcode and just told my customers that the slider won’t work while editing in Elementor, but does work on the front end however, this is obviously not ideal.
For reference here is the code and CSS for the above slider template I created, the issues happen with all sliders though on all sites where I use Elementor.
Template Code:
<List name=responsive_options>
<Map>
<Key break>1024</Key>
<Key items>2</Key>
</Map>
<Map>
<Key break>767</Key>
<Key items>1</Key>
</Map>
</List>
<div class="bedrijvenslider-wrapper">
<Slider items=3 pager=false auto=true controls=true responsive="{Get list=responsive_options}">
<Loop type=bedrijven orderby=date order=desc>
<Slide>
<a href="{Field url}" class="bedrijfslogo-link">
<img src="{Field acf_image=bedrijf_logo field=url}" />
</a>
</Slide>
</Loop>
</Slider>
</div>
CSS/Style Code:
.bedrijvenslider-wrapper .tslider {
display: flex;
align-items: center;
justify-content: center;
}
.bedrijvenslider-wrapper .tslide {
display: flex;
align-items: center;
justify-content: center;
}
.bedrijvenslider-wrapper .tslider-action > a:hover {
color: var(--e-global-color-primary);
}
.bedrijvenslider-wrapper .tslider-action > a:before {
font-family: dashicons;
speak: none;
font-style: normal;
font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 36px;
}
.bedrijvenslider-wrapper .tslider-action > .tslider-prev {
left: 0;
background: none;
}
.bedrijvenslider-wrapper .tslider-action > .tslider-next {
right: 0;
background: none;
}
.bedrijvenslider-wrapper .tslider-action > .tslider-prev:before {
content: "\f341";
}
.bedrijvenslider-wrapper .tslider-action > .tslider-next:before {
content: "\f345";
}
Hopefully this can be resolved!
Best regards,
Sven
Please update to the new version 3.2.4 and let me know if it works now for you!