[공통 변경 방법] - 변경을 희망하는 페이지로 간 후 상단의 엘리멘터로 편집 클릭하여 편집 페이지로 이동 - 이미지의 주소를 찾기 위한 작업이 필요 ㄴ 워드프레스 관리자 - 미디어 - 이미지 업로드 - 업로드한 이미지 클릭 - 우측 하단 클립보드에 URL 복사 -> 이미지의 URL 메인 베너 변경 방법 01. 홈 페이지 접속 - 상단 엘리멘터로 변경 클릭 - 베너 부분 클릭(해당 코드는 html 코드로 작성되어 있습니다. 이미지 외에 다른 코드를 수정하면 오류가 발생할 수 있습니다.) 02. 코드를 살펴보면 <!-- Slider container --> <div class="swiper-container"> <!-- Slides --> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="slide-text"> <p class="top_txt">onday_01</p> <!--1번 이미지 부분--> <p class="center_txt">치과 내 기공소 오픈으로<br> 빠른 치료 도입</p> -> 변경 희망하는 텍스트 삽입 <!--중앙 텍스트--> <button class="button_in" onclick="location.href='notice/?vid=1/';">더 알아보기</button> -> 빨간 글씨 적혀 있는 부분에 url 입력 <!--이동 희망 url--> <p class="bot_txt">만드는 방식이 만드는 차이</p> </div> <div class="pc"> <img src="http://portfolioone.mycafe24.com/wp-content/uploads/2023/04/main01_pc.jpg" alt="Image 1"> -> 아까 복사한 이미지의 주소 입력 <!--pc 이미지 size: 1920*1000--> Pc버전의 이미지 사이즈 </div> <div class="mo"> <img src="http://portfolioone.mycafe24.com/wp-content/uploads/2023/04/main01_m.jpg" alt="Image_1_mo"><!--mobile 이미지 size: 400*479--> 복사한 이미지 주소 입력 이 부분은 모바일 이미지 넣어주셔야 합니다. </div> </div> <div class="swiper-slide"> <div class="slide-text"> <p class="top_txt">onday_02</p> <p class="center_txt">엑스레이 검사를 통해<br> 정확한 진단을 내립니다</p> <button class="button_in" onclick="location.href='notice/?vid=1/';">더 알아보기</button> <p class="bot_txt">정밀하고 빠른 엑스레이 검사로 환자분들의 건강을 지킵니다</p> </div> <div class="pc"> <img src="http://portfolioone.mycafe24.com/wp-content/uploads/2023/04/main02_pc.jpg" alt="Image 2"> </div> <div class="mo"> <img src="http://portfolioone.mycafe24.com/wp-content/uploads/2023/04/main02_m.jpg" alt="Image_2_mo"> </div> </div> <div class="swiper-slide"> <div class="slide-text"> <p class="top_txt">onday_01</p> <p class="center_txt">최고의 의료진이 함께하는<br> ONDAY 치과입니다</p> <button class="button_in" onclick="location.href='notice/?vid=1/';">더 알아보기</button> <p class="bot_txt">전문성과 열정으로 항상 더 나은 치료를 제공합니다</p> </div> <div class="pc"> <img src="http://portfolioone.mycafe24.com/wp-content/uploads/2023/04/main03_pc.jpg" alt="Image 1"> </div> <div class="mo"> <img src="http://portfolioone.mycafe24.com/wp-content/uploads/2023/04/main03_m.jpg" alt="Image_3_mo"> </div> </div> </div> </div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> <style>
.swiper-slide { position: relative; display: flex; align-items: center }
.slide-text { position: absolute; z-index: 10; display: flex; flex-direction: column; gap: 20px; width: fit-content; left: 9vh; } .slide-text p{ margin: 0px !important; } .slide-text .button_in{ width: fit-content; padding: 13px 45px; border: 1px solid #3072BA; border-radius: 30px; background-color: #3072BA; color: #fff; } .slide-text .button_in:hover{ width: fit-content; padding: 13px 45px; border: 1px solid #3072BA; border-radius: 30px; background-color: #fff; color: #3072BA; }
.slide-text .top_txt { font-family: 'Montserrat'; font-style: normal; font-weight: 200; font-size: 45px; line-height: 68px; text-transform: uppercase;
color: #FFFFFF; }
.slide-text .center_txt {
font-family: 'Nexa Text-Trial'; font-style: normal; font-weight: 200; font-size: 52px; line-height: 60px; text-transform: uppercase;
color: #FFFFFF; }
.slide-text .bot_txt { font-family: pretendard; font-style: normal; font-weight: 400; font-size: 17px; line-height: 26px; /* identical to box height */
text-transform: uppercase;
color: #FFFFFF; }
.swiper-progress { background: rgba(0, 0, 0, 0.25); height: 4px; width: 100%; position: absolute; bottom: 0; }
.swiper-button-next, .swiper-button-prev { position: absolute; top: 50%; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; transform: translateY(-50%); z-index: 15; color: #fff; transition: background-color 0.3s ease; /* 새로운 속성 */
}
.swiper-button-next:hover, .swiper-button-prev:hover { color: #3072BA; transition: background-color 0.3s ease; /* 새로운 속성 */
}
.swiper-button-next { right: 10px; }
.swiper-button-prev { left: 10px; }
@keyframes swiper-progress-bar { 0% { transform: scaleX(0); }
100% { transform: scaleX(1); } } @media (min-width : 1025px){ .swiper-container .mo { display: none; } }
@media (max-width: 1024px) { .swiper-container .pc { display: none; } .slide-text p{ margin: 0px !important; } .slide-text { gap: 10px; width: fit-content; left: 2vh; bottom: 20px; } .slide-text .button_in{ font-size: 13px; width: fit-content; padding: 10px 30px; border: 1px solid #3072BA; border-radius: 30px; background-color: #3072BA; color: #fff; } .slide-text .button_in:hover{ width: fit-content; padding: 10px 30px; border: 1px solid #3072BA; border-radius: 30px; background-color: #fff; color: #3072BA; }
.slide-text .top_txt { font-family: 'Montserrat'; font-style: normal; font-weight: 200; font-size: 25px; text-transform: uppercase;
color: #FFFFFF; }
.slide-text .center_txt {
font-family: 'Nexa Text-Trial'; font-style: normal; font-weight: 400; font-size: 30px; line-height: 35px; text-transform: uppercase; color: #FFFFFF; }
.slide-text .bot_txt { display: none; } .swiper-button-next, .swiper-button-prev{ display: none; } } </style> <script> jQuery(document).ready(function ($) { var swiper = new Swiper('.swiper-container', { loop: true, autoplay: { delay: 6000, // 변경된 지연 시간 disableOnInteraction: false, }, pagination: { el: '.swiper-pagination', clickable: true, type: 'bullets', bulletClass: 'swiper-pagination-bullet', bulletActiveClass: 'swiper-pagination-bullet-active', }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, });
$('.swiper-button-next').on('click', function () { // 현재 활성화된 슬라이드 인덱스 가져오기 var activeIndex = swiper.activeIndex; // 다음 슬라이드로 이동 swiper.slideNext(); // 마지막 슬라이드에서 '다음' 버튼 클릭한 경우 if (activeIndex === swiper.slides.length - 1) { // 첫 번째 슬라이드로 이동 swiper.slideTo(0); } }); }); </script>
03. 2번 페이지와 3번 페이지도 구조는 동일합니다. 04. 다른 페이지에서도 엘리멘터로 수정을 클릭 후 이미지 수정을 해보시면 됩니다. 05. 홈페이지의 텍스트는 각 블록을 클릭하면 수정할 수 있게끔 변경해 두었습니다.
| 
