swiper js 위치 고정 사용 방법에 대해서 궁금증!

Question

https://www.free-css.com/free-css-templates/page294/electrochipfree 템플릿 사이트를 따라 만들면서 연습해보고 있지만 막히는 부분이 있네요 ㅠswiper js를 통해 > ,< 값에게 navigation 값은 준 상태입니다> 를 누르면 다음 이미지가 나와야 하고< 를 누르면 이전 이미지가 나와야 합니다 >를 누르게되면 왼쪽으로 자꾸 밀리는데 개발자 도구를 통해 확인해보니 inner 1100px 내부에서 왔다리 갔다리 하는것으로 보여지네요 / ( css의 fixed, absolute / js의 freemode: true를 해도 동일하게 움직입니다.)-원형은 그대로있고 내부 사진만 좌우로 나올수있도록 해보고 싶은데 잘안되네요 ..html: Electrician

bolt

Electrician

HOME
ABOUT
SERVICE
BLOG
CONTACT

ElECTRICAL
SERVICE
PROVIDERS

It is a long established fact that a reader will be distracted by the
readable content of a page when looking at its layout. The point of using Lorem

Contact Us

chevron_left

chevron_right

css body { color: #333; font-size: 16px; font-weight: 400; line-height: 1.4; font-family: 'Electrolize', 'Noto Sans KR', sans-serif; } img { display: block; } a { text-decoration: none; color: #333; } .inner { width: 1100px; margin: 0 auto; position: relative; } .btn { width: 150px; height: 50px; background-color: #4B208C; color: #fff; border-radius: 30px; box-sizing: border-box; display: flex; justify-content: center; align-items: center; padding: 20px; } .btn--medium { width: 130px; height: 30px; background-color: #4B208C; border-radius: 30px; box-sizing: border-box; display: flex; justify-content: center; align-items: center; padding: 20px; font-size: 14px; color: #fff; } .title-text { font-size: 23px; font-weight: 600; } .title-icon { font-size: 30px; color: #4B208C; transform: rotate(35deg); } /* HEADER */ .header { width: 100%; background-color: #EAE6F5; } .header > .inner { height: 70px; } .header .logo-title { display: flex; align-items: center; position: absolute; top: 20px; } .header .logo-title h1 { font-size: 23px; font-weight: 600; } .header .header-sub-menu ul.list { font-family: Arial, sans-serif; display: flex; position: absolute; top: 25px; right: 0; font-size: 13px; } .header .header-sub-menu .list li { margin-left: 70px; } .header .header-sub-menu .list li:first-child { margin-left: 0; } .header .header-sub-menu .list li:hover { text-decoration: underline; } /* MAIN */ .main { background-color: #EAE6F5; } .main .inner { height: 400px; display: flex; align-items: center; justify-content: space-between; } .main .text-group h2 { font-weight: 700; font-size: 35px; } .main .text-group h3 { margin-top: 10px; } .main .btn { margin-top: 30px; } .main .btn:hover { background-color: #683fa6; transition: .2s; } .main .image-group { } .main .swiper { } .main .image-group .swiper-wrapper { width: 350px; height: 350px; background-position: center; background-repeat: no-repeat; background-size: cover; border: 3px solid #7B57B2; border-radius: 100%; overflow: hidden; position: relative; transition: .2s; } .main .image-group .swiper-wrapper .swiper-slide img { width: 100%; position: absolute; top: 0; bottom: 0; margin: auto; } .main .image-group .swiper-prev { width: 35px; height: 35px; border-radius: 100%; background-color: #f1f1f1; display: flex; justify-content: center; align-items: center; position: absolute; bottom: 20px; right: 100px; z-index: 1; cursor: pointer; } .main .image-group .swiper-next { width: 35px; height: 35px; border-radius: 100%; background-color: #4B208C; color: #fff; display: flex; justify-content: center; align-items: center; position: absolute; bottom: 40px; right: 60px; z-index: 1; cursor: pointer; } jsnew Swiper('.main .swiper', { loop: true, // 무한루프 centeredSlides: true, // 1 슬라이드가 센터로 보이기 freeMode : true, // 슬라이드 고정 navigation: { prevEl: ".main .swiper-prev", nextEl: ".main .swiper-next" }, });

열일하는 네오 · Answer

.main .image-group .swiper-wrapper .swiper-slide img position: absolute 때문에 밖으로 튀어나오는거 같네요

swiper js 위치 고정 사용 방법에 대해서 궁금증!

1개의 답변

기술 목록