How to use rs-module-wrap in a React application

2.7k Views Asked by At

There are following html lines in this page:

    <div id="CFmwp" className="hc-cmp-code-block    ">
            <!-- START Main Slider 3 REVOLUTION SLIDER 6.1.1 -->
            <rs-module-wrap id="rev_slider_3_4_wrapper" data-source="gallery" style="background-color: transparent; padding: 0px; margin: 0px auto; overflow: visible; height: 480px;" className="rs-forceoverflow"><rs-module id="rev_slider_3_4" style="height: 480px; margin-top: 0px; margin-bottom: 0px;" data-version="6.1.1" className="revslider-initialised rev_redraw_on_blurfocus" data-idcheck="true" data-slideactive="rs-3">
                    <rs-slides style="visibility: visible; display: block; max-height: none; height: 100%; width: 525px; overflow: hidden; left: 0px;">
                        <rs-slide data-key="rs-3" data-title="Slide" data-anim="ei:d;eo:d;s:1000;r:0;t:fade;sl:0;" data-originalindex="1" data-origindex="0" data-description="" style="overflow: hidden; height: 100%; width: 100%; z-index: 20; visibility: inherit; opacity: 1;" data-sba="" data-scroll-based="false" data-owidth="300" data-oheight="200" data-ntrid="0" className="active-rs-slide"><rs-sbg-px style="background-color: rgba(255, 255, 255, 0);"><rs-sbg-wrap data-owidth="300" data-oheight="200" style="transform-origin: 50% 50% 0px; opacity: 1; visibility: inherit; top: 0px; left: 0px; transform: matrix(1, 0, 0, 1, 0, 0);"><!--Runtime Modification - Img tag is Still Available for SEO Goals in Source - <img src="//themes.framework-y.com/codrop/chat/wp-content/plugins/revslider/public/assets/assets/transparent.png" title="Home" className="rev-slidebg" data-no-retina="">--><rs-sbg src="http://themes.framework-y.com/codrop/chat/wp-content/plugins/revslider/public/assets/assets/transparent.png" className="" data-bgcolor="transparent" style="background-color: transparent; width: 100%; height: 100%; opacity: 1; top: 0px; left: 0px; visibility: inherit; z-index: 20;"></rs-sbg></rs-sbg-wrap></rs-sbg-px>
                            
<RsLayerWrap className="rs-parallax-wrap" style="position: absolute; display: block; pointer-events: auto; left: 129px; top: -6px; z-index: 13; visibility: visible;"><rs-loop-wrap style="position: absolute; display: block; z-index: 0; opacity: 1; min-height: 493px; min-width: 268px; filter: blur(0px) grayscale(0%) brightness(100%); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -11.359999999999673, 0, 1); transform-origin: 50% 50% 0px;"><rs-mask-wrap style="position: absolute; display: block; visibility: visible; overflow: visible;"><rs-layer id="slider-3-slide-3-layer-0" data-type="image" data-rsp_ch="on" data-xy="x:c;y:c;" data-text="w:normal;" data-dim="w:268px;h:493px;" data-frame_999="o:0;st:w;" data-frame_hover="rY:5deg;" data-loop_0="y:-15px;" data-loop_999="y:15px;sp:3000;yym:t;" style="z-index: 13; font-family: Roboto; visibility: visible; overflow: hidden; border: 0px none rgb(88, 119, 144); margin: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; border-top-right-radius: 0px; border-top-left-radius: 0px; padding: 0px; color: rgb(255, 255, 255); width: 268px; height: 493px; min-height: 0px; min-width: 0px; max-height: none; max-width: none; opacity: 1; transform-origin: 50% 50% 0px; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);" className="rs-layer" data-idcheck="true" data-stylerecorder="true" data-initialised="true"><img src="http://themes.framework-y.com/codrop/chat/wp-content/uploads/sites/6/2019/09/phone-3-1.png" alt="alt" width="394" height="725" data-no-retina="" style="height: 100%; width: 100%; text-align: left; line-height: 25px; letter-spacing: 0px; font-weight: 400; border-color: rgb(255, 255, 255); border-style: none; margin: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; border-top-right-radius: 0px; border-top-left-radius: 0px; padding: 0px;" data-stylerecorder="true"> 
                            </rs-layer>

I would import them to a React app, so I would convert them to JSX, and also I need to understand them, because it is fairly new for me.

http://themes.framework-y.com/codrop/chat/

Based on the comment in the html code, it is a https://www.sliderrevolution.com thingy, right? It provides the animation of this image collection on the page.

Slider Revolution claim, their tool can be used in a Wordpress site, but this site linked here is not Wordpress based, then how Slider Revolution is used?

I understand I have to convert html element like from rs-module-wrap to RsModuleWrap because those are no standard HTML elements, so need to start with capital letter.

But still after conversion it says: Cannot find name 'RsModuleWrap'. What can I further do?

0

There are 0 best solutions below