swiper 슬라이드 progress바 질문이요! 채택완료
은요이
2년 전
조회 2,105
1.에서
2.로
안녕하세요. swiper 슬라이드 진행률바를 2번째화면처럼 채워지게 수정하고싶은데 어떻게 수정하면 좋을까요ㅠㅠ
https://jsfiddle.net/33gz6qh7/10/
소스는 위에 url 참고해주시면 감사하겠습니다.
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
채택된 답변
+20 포인트
2년 전
css
</p>
<p>$blue: #0080ff;
$blue-cc: #cce6ff;</p>
<p>.slider{
position: relative;
}
.swiper-slide{
border: 1px solid #ccc;
height: 100px;
text-align: center;
padding: 20px 0;
}
.slider-nav{
display: flex;
align-items: center;
}
.slider-arr{
flex: 0 0 auto;
display: flex;
justify-content: space-between;
width: 55px;
margin-right: 27px;
}
.slider-progress-wrap{
position: relative;
flex: 1 1 auto;
}
.slider-progress{
position: absolute;
top: 14px;
right: 0;
left: 0;
width: 100%;
height: 3px;
background: gray;
}
.slider-progress2{
position: absolute;
top: 14px;
right: 0;
left: 0;
width: 0;
height: 3px;
background: blue;
transition : 0.25s ease-out;
}
.slider-num{
margin-left: 20px;
flex: 0 0 auto;
font-size: 24px;
line-height: 24px;
color: blue;
font-family: 'Roboto', sans-serif;
font-weight: 700;
padding-right: 5px;
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{
background: pink;
}
.slider-scrollbar .swiper-scrollbar-drag{
cursor: pointer;
width: 5px;
height: 2px;
margin-top: 14.9px;
background-color: blue;
box-shadow: 0 4px 10px rgba(27, 75, 255, 0.4);
}
.portfolio{
overflow: hidden;
}
.prev,.next{
cursor: pointer;
}
js
</p>
<p>var portfolio = new Swiper('.portfolio', {
slidesPerView: 3,
spaceBetween: 0,
preventClicks: false,
preventClicksPropagation: false,
navigation: {
nextEl: '.next',
prevEl: '.prev'
},
scrollbar: {
el: '.slider-scrollbar',
draggable: true,
hide: false,
snapOnRelease: false,
dragSize: 30
},
breakpoints: {
1050: {
slidesPerView: 2
},
640: {
slidesPerView: 1
}
},
on: {
init: function() {
$('.js-current-slide').text(this.realIndex + 1);
$('.js-all-slide').text(this.slides.length);
},
slideChange: function() {
$('.js-current-slide').text(this.realIndex + 1);
},
setTranslate: function() {
var progress = translateVal(this.scrollbar.dragEl);
$('.slider-progress2').css('width', progress + 'px');
},
slideChangeTransitionStart: function() {
var progress = translateVal(this.scrollbar.dragEl);
$('.slider-progress2').css('width', progress + 'px');
},</p>
<p> }
});</p>
<p>function translateVal(el) {
var progress = el.style.transform.match(/translate3d\((.+)px,(.+)px,(.+)px\)/);
return progress[1];
}</p>
<p>
저 드래그바 기능이 있는 상태로서는.. 저게 최선이지 않을까.... 싶네요..
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인