안녕하세요
xe로 사이트를 만들려고 하는데요.
http://hillstate-avenue.com/
슬라이더 부분을 위 사이트같은 효과를 줄수 잇을까요?
위 사이트는 워드프레스인데 XE를 쓰면서 슬라이더에 저런 효과를 구현할 수 있을까요?
조언 부탁드립니다.
| PHP | PHP 5.5 |
|---|---|
| CMS | XpressEngine |
-
링크된 사이트는 Slider Revolution이라는 워드프레스의 jquery 플러그인을 사용한 것입니다.
슬라이드 영역의 아래쪽 텍스트 부분 이미지는 슬라이드와는 별도로 해준 것인지는 모르겠네요.
꼭 저것이 아니더라도 저런 효과를 줄 수 있는 범용 jquery 플러그인이 있습니다.
XE에서는
https://xe1.xpressengine.com/index.php?mid=download&package_id=22718180
요 위젯을 사용하시는 것도 방법입니다.
<li data-transition="slotzoom-vertical" data-slotamount="7" data-masterspeed="800" data-saveperformance="off" class="tp-revslider-slidesli active-revslide" style="width: 100%; height: 100%; overflow: hidden; z-index: 18; visibility: hidden; opacity: 0;">
<!-- MAIN IMAGE -->
<div class="slotholder" style="width:100%;height:100%;" data-duration="undefined" data-zoomstart="undefined" data-zoomend="undefined" data-rotationstart="undefined" data-rotationend="undefined" data-ease="undefined" data-bgpositionend="undefined" data-bgposition="center top" data-kenburns="undefined" data-easeme="undefined" data-bgfit="cover" data-bgfitend="undefined" data-owidth="undefined" data-oheight="undefined"><div class="tp-bgimg defaultimg" data-lazyload="undefined" data-bgfit="cover" data-bgposition="center top" data-bgrepeat="no-repeat" data-lazydone="undefined" src="http://pumba21br.cafe24.com/wp-content/uploads/2018/10/슬라이드.jpg" data-src="http://pumba21br.cafe24.com/wp-content/uploads/2018/10/슬라이드.jpg" style="background-color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-image: url("http://pumba21br.cafe24.com/wp-content/uploads/2018/10/슬라이드.jpg"); background-size: cover; background-position: center top; width: 100%; height: 100%; opacity: 1; visibility: inherit;"></div></div>
<!-- LAYERS -->
<!-- LAYER NR. 1 -->
<div class="tp-caption tp-fade start" data-x="271" data-y="675" data-speed="1000" data-start="1150" data-easing="Power3.easeInOut" data-elementdelay="0.1" data-endelementdelay="0.1" data-endspeed="300" style="z-index: 5; left: 190.75px; top: 473.92px; visibility: visible; opacity: 0; transform: translate3d(0px, 0px, 0px);"><img src="http://pumba21br.cafe24.com/wp-content/uploads/2018/10/메인글-배경.png" alt="" style="width: 985.754px; height: 141.825px;">
</div>
<!-- LAYER NR. 2 -->
<div class="tp-caption tp-fade start" data-x="270" data-y="676" data-speed="1000" data-start="1850" data-easing="Power3.easeInOut" data-elementdelay="0.1" data-endelementdelay="0.1" data-endspeed="300" style="z-index: 6; left: 190.048px; top: 474.622px; visibility: visible; opacity: 0; transform: translate3d(0px, 0px, 0px);"><img src="http://pumba21br.cafe24.com/wp-content/uploads/2018/10/메인글2.png" alt="" style="width: 985.754px; height: 141.825px;">
</div>
<!-- LAYER NR. 3 -->
<div class="tp-caption tp-fade start" data-x="1451" data-y="610" data-speed="300" data-start="1850" data-easing="Power3.easeInOut" data-elementdelay="0.1" data-endelementdelay="0.1" data-endspeed="300" style="z-index: 7; left: 1019.23px; top: 428.284px; visibility: visible; opacity: 0; transform: translate3d(0px, 0px, 0px);"><a href="/관심고객등록"><img src="http://pumba21br.cafe24.com/wp-content/uploads/2018/10/관심고객등록.png" alt="" style="width: 157.271px; height: 30.8926px;"></a>
</div>
</li>
대충 이런식으로 되어 있는데 위젯페이지 하나 만드시고 html부분 알아서 수정하시면 될듯 합니다.