I implemented a rev slider in my wordpress site and im not very impressed.
The first carousel slider loads okay on page load but the next batch of carousel sliders seems to take ages before it assumes the actual size. Here is a snapshot to explain better.
This is the first carousel slider on the tab and displays by default on page load which looks great.
This second one on the secon tab just doesnt load quite right and will last forever in this size unless i refrest the page many times. Not cool at all.
I have the feeling i missed some configuration but cant seem to get any help throug google searches and will appreciate all the help i can get.
Thaks.
This is not a configuration issue but script conflict issue happening because sliders are in tabs so initially first tab content is visible while others are hidden so technically content of 2nd tab has 0 height. And since slider calculates the space it is going to occupy dynamically, it gets smaller height as tab scripts are loaded a bit after slider scripts are. Try contacting ThemePunch support and ask them for redraw code which will redraw slider using slider API forcing slider to force reload upon page load, resulting in loading slider properly the first time.
Related
When I visit the homepage of my site, the header image at the top of the page loads at 90% width, and then expands to 100% width as the page continues to load. If you scroll down, it looks like all elements that are intended to be full-width, initially load at about 90% of their full width, and then go on to expand.
I am trying to locate where in the code this is happening. I thought it might be in the css style sheet but i'm not having any luck locating it. My best guess is there is some sort of wrapper loading before the image expands?
For more info, the image is being pulled in using the WPBakery Visual Composer plugin. I tried turning off the image parallax, which removed the image entirely.
I'm inspecting the source code, but nothing is jumping out to me (my webdev knowledge is extremely basic). I'm looking for any recommendations for where to look in the code.
I'm not sure what is causing the problem, but the source code can be viewed here: https://dev-nurseregistry.pantheonsite.io/
It seems like something from Javascript is loading after the initial page load.
If you go to Google Chrome dev tools -> Sources -> Then (on the right side) choose Event Listener breakpoints and under DOM Mutation check DOMContentLoaded and reload the page, it will load DOM step by step. On the initial load elements have a bit different style - your div.site-inner is not full width.
When you are clicking that little blue play button on the screen, it goes on another step. After 4 or 5 steps the content goes full width. If you look into the network tab (also in the dev tools) you can see that widgets.js and platform.js were loaded and after those also some images. I'd say that you have to look in your js files for something you load after the initial page load.
When comparing loaded page and partially loaded side to side, it shows vc_section hide-mobile as display: block and vc_section hide-desktop as display: none.
Edit
Just read hungerstar's comment - he shows a bit more of the cause. I just found the result of that cause. Hope it helps.
I've build a WordPress website which runs the TouchFolio theme. This theme uses a plugin called Royal Slider to create the sliding image gallery featured on the main page.
http://www.suellewelyn.com.au/
https://dimsemenov.com/themes/touchfolio/
https://dimsemenov.com/plugins/royal-slider/
I've ran into an issue where the description overlay on the RoyalSlider plugin is staying active across different projects, which results in them becoming mislabelled.
To recreate the issue, if you load the page at http://www.suellewelyn.com.au/ the first work titled "Primal Intent" comes up. If you then use the left hand menu to jump directly to a project lower down the list ("Celebration" for example) the "Primal Intent" title and description stays active. I noticed that this is an issue with demo of the theme on the developer's website as well.
Does anyone have any suggestions as to how I might be able to correct this?
Just Increase z-index of your pseudo element with tint.
I have a problem with the sliders on my website (I just started coding recently).
http://www.willybass.com
Depending on the browser and the connexion, the images sometime do not load and the slider displays completely flat (then it only display correctly if you hit refresh, or sometimes it loads and displays, again depending on the browsers and connexion).
Does anyone know what is the best solution to this issue ? (to at least display a grey background with the dimension of picture that didnt load, while it loads)
I have a ghost-in-the-machine it seems: I have put a thumbnail with a rollover stage on a Wordpress site I'm working on. It works fine except that it does this strange resizing when the page loads. A small but very annoying thing.
This is the page
I've also added the same code to another Wordpress site I am working on, which is based on the same theme (Quark). It doesn't happen on the other site.
How do I resolve this?
You are using percentages to define the widths of the containers and images, which is fine. However, upon initial page load, not all of your elements are available yet, so the relative percentages gradually reach their end-point when the document finishes loading. Doesn't look like like it's doing too much on my screen but in order to get around this you can load the images via jquery and set it to $(document).ready which will wait until the page is done loading, to even load the iamges.
I'm using a website that runs on Plone. On the homepage, the carousel has several images that you have to click the next number to see the next image. What I want though, is to get these images to rotate automatically after a certain number of seconds. How do I do this? Thanks.
It would be very helpful if you could mention current setting for the portlet you're using.
However most probably it is because you forgot to set a reasonable value for Timer field. Check the settings for the carousel portlet and set the Timer to for example 5 and see what happens.