I am trying to: Create sliders for my website
I visited this URL: various support URLs
I expected to see: Someone else seeking help with slider transitions
Instead, I got: Nothing.
I have made many sliders using Views in the past, all very successfully. However, for some reason, on this site, whilst I can create sliders etc, no matter what transition I choose - slide or fade - neither work. The slide just jumps from one to another.
I have disabled all other plugins and tried again, without success. I am running Layouts, Types and Views and have the Genesis Integration plugin installed (running Genesis theme). In case it helps, the inbuilt Layouts slider worked fine with its transitions, but anything I do in Views doesn't.
I've attached my debug info.
Thank you
Tim
Hi Tim, I'll be happy to take a look. Can you post your WP login info in a private reply? I'd like to jump in and see a page where you have this problem.
Is it okay if I temporarily disable plugins or themes while I'm testing?
Thanks Tim, I'll take a look and update you tomorrow.
Tim, I think the main issue here is that during transitions your browser repaint performance dips well below the ideal 60fps. You can see that by opening the rendering tab in Chrome and enabling the fps meter (see attached screenshot). It has less to do with the sliders themselves, and more to do with the content and styles of the areas that overlap your slider. As a test, delete the div that contains the map image and text overlay (.slider-promo.alcenter). You'll see an instant improvement in slider smoothness. I can't recommend placing any content over your slides for this reason.
The explanation and optimization of this is beyond the scope of the forum here, but basically your browser has to repaint a very large portion of the display whenever the top image slides, and has to take the transparency of that image overlay into account. You need to fix that. Here's a great site that discusses jank (the jerky motion you're seeing) and some approaches to fix it:
hidden link
It's all about CSS tricks and techniques you can use to optimize your browser repaints and get your frame rate up to 60fps. I hope this helps point you in the direction of a solution that gets your transitions silky smooth.
Thanks Christian...
The jankfree.org resource is really useful, and has helped me to fix it. I did remove the overlay text and map image as you suggested. I know we're testing resource limits by having so much 'going on' on the homepage, but it doesn't seem any more than we had done on other sites previously.
So in the end, I managed to get the slider effects we want, both in the top slider and in the carousel running underneath by switching to the BXSlider JS script. (hidden link) - this seems to work really well with Views and Layouts too.. so far...!
Thanks for your help
Tim
