메인화면 상단 배경이미지를 슬라이드로 넣는법

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!
메인화면 상단 배경이미지를 슬라이드로 넣는법

QA

메인화면 상단 배경이미지를 슬라이드로 넣는법

답변 7

본문

메인 화면 상단의 배경을 슬라이드로 만들려고 하는데 어떻게 넣어야 하나요?

 

각 상단 이미지 바꾸는 것은 sinbi님의 소스를 적용해서 했습니다

책도 몇개 샀는데

php는 어렵네요...아직은 봐도 잘 모르겠어요...

 

슬라이드 소스는 많은데 메인 상단 배경을 슬라이드로 하는거 찾을수가 없어서요

 

이제 한달된 초보이니 

자세하게 부탁드립니다

이 질문에 댓글 쓰기 :

답변 7

상단배경 슬라이드라면 이런것을 찾으시는건가요 ? 

 background-image: 이미지 슬라이드 말씀하시는건지?

 

https://codepen.io/sinbi/pen/mdVEEoM

 

https://sseung-fire.tistory.com/18 

현재 작업된 상황,

현재 작업된 페이지,

현재 작업된 소스,

현재 참고중인 소스

현재 참고중인 페이지 등등

본인이 현재 할수있는 능력을 기본적으로 알려주셔야 알려드릴수있습니다

키비쥬얼을 슬라이로 하고싶다고 하셨는데

슬라이드 소스는 가지고 계신가요? 슬라이드 js 관련해서 검색해보시면

샘플이 줄기차게나올겁니다 그 소스를 가지고 일단 적용시켜보세요

그리고 어디서 막히는지, 또는 이 샘플을 내 소스의 어디에 반영시켜야하는지

이런걸 물어보시면 해결이 빠를것같네요

슬라이드는 bxslider가 가장 좋지 않을까 쉽네요. 어디에나 쉽게 넣을수있고요.

그누보드 - 어디에나 쉽게 넣을 수 있는 슬라이더(bxslider) > 그누보드5 스킨 (sir.kr)

이걸 다운 받아서 적용해봤는데 상단 배경이미지로 넣는 방법을 모르겠더라구요
김철용님 유투브는 구독해서 공부중입니다
세팅하는거서부터 보고 따라하고 있습니다

다운 받은 님의 소스를 메인화면 상단 배경으로 넣는 법을 알고 싶어요
서브화면은 다른 배경이미지를 넣는 법은 배워서 적용해 봤습니다
메인 화면만 넣으면 되는데 그걸 어디에 어떻게 넣어야 하는지 모르겠더라고요

스킨게시판을 참고하시면 좋을것같아요 

 

저는 개인적으로 https://swiperjs.com/ 여기 사용해서 만들어요 간단해서 좋아요 

 

https://codepen.io/digistate/pen/MvapbE 이런거 찾으세요?

https://codepen.io/digistate/pen/BdKaaY 자동

https://codepen.io/sinbi/pen/mdVEEoM 예제를 기준으로 설명드리면,

basic테마 pc기준으로, 메뉴바의 id값이 gnb입니다 

 

default.css안의 #gnb 값을 다음과 같이 수정하십니다.

 background-image: 이미지에는 이미지 주소값을 넣고, 

 


#gnb {position:relative;width: 100%;
  height: 100%;
  max-height: 750px;
  background-image: url(https://raw.githubusercontent.com/s1mpson/-/master/codepen/infinite-photo-grid/photo-grid.jpg);
  background-size: calc(4.84 * min(100vh, 750px)) min(100vh, 750px);
  background-repeat: repeat-x;
  animation: scroll 50s linear infinite;}
 

 

하단에 추가  

 

@keyframes scroll {
  from {
    background-position: left calc(4.84 * min(100vh, 750px)) top 0px;
  }
  to {
    background-position: left 0px top 0px;
  }
}

 

메뉴 글자크기는 별도로 수정하셔야 될것같습니다. 

가장 간단히 넣을수 있는 방법 입니다 ^^ 

 

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 126,530
© SIRSOFT
현재 페이지 제일 처음으로