Question

I have just added a google translate in website.And set the default language English.
I have a jquery slider on this page.Now what is happening is that text is shown only when the page reloads in description of images contained in a jquery slider. After changing the language through GOOGLE translate, the text disappears and only images are displayed in the jquery slider.
Can anyone help me out why this is happening.
Thank you in advance.

Answer 1

Google translate injects span tags in the document while translating. jQuery-ui powered widgets such as sliders also use spans for example to represent buttons, graphics and icons. When the page is translated, the spans added by Google translate conflict with those used by jQuery-ui elements, often resulting in broken functionality and appearance.

The solution is to add a notranslate class to the elements that you do not want translated (ref). Example:

<div id="slider" class="notranslate"></div>

$(function() {
    $( "#slider" ).slider();
});