Flip box and autoplay

[Gindel86]

Hello,

it would be great to get some help with 2 problems I have in my website.
(I’m using child theme on WordPress)

1. My header on my home page is a slidershow. the slider is built-in the theme (onetone theme) and I chose autoplay. at the begginng it worked but now the autoplay is not working anymore. someone told me that maybe is because one of the plug-in I installed but I didnt figured it out. Is ther any css code that can make the silde show work automaticaly? link – http://dev.weareact3.com/

2. I used “MAGEE SHORTCODES” plugin and with it I built a flipbox element. it worked good on web version but on mobile the back side of the flipbox turned back immidiataily to the front side.
   I want that when I press on the front side the box will flip and stay on the back side until I press again. can you please help me with it? link – http://dev.weareact3.com/2016/10/01/

Thanks a lot,
Amitai

[Atelierbram]

1. The “slide-anything” plugin comes with it’s own implementation of `owl.carousel.min.js` which is interfering with the one you already had (: the one that came with the “One Tone”-theme). Try to (temporarily) disable that plugin, and see if the slider starts to work.
2. Animation is triggered on hover not on click? Can you change this and see if this makes a difference on mobile (touch devices)?

BTW I counted more than 60 inserted javascript files in the source code …, a bit much I say.

[Gindel86]

Hello,

Thanks for the answer.

1. You are right. the problem comes from the slide anything plugin. the question is how can I keep it activated and still use the autoplay from the onetone slide. I need both.

2. The animation is triggered on hover but it’s not something that I control. how can I change it to be triggered by click? Can I change it only for the mobile use? cause is very efficient for the web version.

*Regarding to your comment about the “60 inserted javascript”. can you please explain me a bit more what it means and how can I change it?

Here is the code of the “flip-box” element, maybe I can add on it a code that changes the hover to click on mobiles.

[ms_row]
[ms_column style=”1/2″ align=”center” class=”” id=””][ms_flip_box direction=”horizontal” front_paddings=”0″ front_background=”” front_color=”#ffffff” back_paddings=”0″ back_background=”#f9f9f9″ back_color=”#666666″ class=”” id=””]|||This year we faced the 43rd BMW Berlin Marathon being one of the worldwide marathon majors. More than 39,000 international runners participated at the race – from top athletes to marathon beginners. In addition, the three-day “Berlin Vital” trade fair has become an essential part of the Berlin Marathon attracting around 100,000 visitors to explore newest trends in running gear, nutrition and health.
[/ms_flip_box][/ms_column]

Thanks for your help,

Amitai

[Atelierbram]

@gindel86 Amitai, It seems to me that for any functionality or feature of this website a WordPress plugin is used to solve the issue at hand. There are a few problems with this approach.

Firstly because a lot of WP-plugins means a lot of inserted javascript files, and the problem with this is mainly performance, which has to do with the extreme high number of so called http-requests, which will make a website slower to load on empty cache.

And secondly “not seeing the trees from the forest”, there is a lot going on, almost impossible to have oversight. And maybe this high level of abstraction which comes with using short-codes also adds up in making things harder to debug.

but it’s not something that I control

This is the problem …

For this flip-card effect, why not look at a demo that does just that, no need to use a plugin. Insert your javascript either within your functions.php with [enqueue script](https://developer.wordpress.org/reference/functions/wp_enqueue_script/), or maybe even inline in footer.php; take some control back: be in the driving seat yourself.

/**
 * Proper way to enqueue scripts and styles.
 */
function my_theme_name() {
    wp_enqueue_style( 'style-name', get_stylesheet_uri() );
    wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_name' );

[Author]

Posts