Where does the card go?

Question

JavaScript

JSFiddle
Everything works in the fiddle, but when transferred to the project, the error is:

index.xml:1 A Parser-blocking, cross-origin script, https://api-maps.yandex.ru/1.1/_YMaps.js?v=1.1.21-58 , is invoked via document.write. This may be blocked by the browser if the device has poor network connectivity.

The map appears and immediately disappears: On the penultimate screen

Answer 1

It doesn't disappear from you.
Carousel clones containers. And there are too many of them (containers for the map) . And the map falls into the first cloned id, since there can be only one element with the id parameter on the page. The cloned element goes, according to the css rules, to the left. If we fix the css property for .owl-stage in transform: translate3d(0px, 0px, 0px); the map is visible. This is shown in the screenshot. Another point from personal observation. I gave up using Yandex maps a long time ago. The reason for this is simple. When switching to browser tabs, Yandex maps have the property of really "disappearing", they are not drawn. Further drawing occurs only after the browser is resized. Why? -- I do not know.
Therefore, the final decision was made in the direction of google maps.