We are facing a problem with caroufredsel, where the first time the site opens it loads perfectly, however when caching and opening it again an F.O.U.C. and the elements are displayed momentarily in a vertical position.
In the documentation it is mentioned that an "overflow: hidden" would solve the problem, but in our case it did not work.
Follow our code:
<div class="caroufredsel_wrapper" style="
display: block;
text-align: start;
float: none;
position: relative;
top: auto;
right: auto;
bottom: auto;
left: auto;
z-index: auto;
width: 1170px;
height: 155px;
margin: 0px;
overflow: hidden;">
<div class="slider-politicas">
<div class="navegation-top"><span class="next">Next</span> <span class="prev">Prev</span></div>
<div class="block-content">
<ul>
<li>
<div class="block free-shipping">
<div class="block-title"><span>Free Shipping</span></div>
<div class="block-content">Free and fast Shipping.</div>
</div>
</li>
<li>
<div class="block secured-payment">
<div class="block-title"><span>Secure Payment</span></div>
<div class="block-content">Total payment protection.</div>
</div>
</li>
</ul>
</div>
<script type="text/javascript">// <![CDATA[
$sns_jq(document).ready(function() {
$sns_jq('.slider-politicas .block-content ul').carouFredSel({
responsive: true,
width: '100%',
scroll: {
items: 1,
duration: 800
},
items: {
width: '290',
visible: {
min: 4,
max: 10
}
},
next: '.slider-politicas .prev',
prev: '.slider-politicas .next',
auto: true
});
});
// ]]></script>
</div>
And here is our development site with the problem: link