const bannerSlide1 = new Swiper(".banner-slide1", {
loop: true,
effect: 'fade',
speed: 2000,
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
});
autoplay
3μ΄ κ°κ²©μΌλ‘ λ΄μ©μ΄ μλ μ νλλλ‘disableOnInteraction: false
λ‘ μ€μμ΄ν ν μλ μ¬μμ΄ λΉνμ±ν λμ§ μλλ‘speed
λ‘ μλ μ‘°μ !/* .CSS */
.sc-visual .swiper-pagination{
bottom: 37px;
width: 171px;
left: 50%;
transform: translateX(-50%);
}
.sc-visual .visual-slide .swiper-pagination-bullet{
background: #fff;
width: 20px;
height: 2px;
margin: 0;
border-radius: 0;
}
//.js
const visualSlide = new Swiper(".visual-slide", {
loop: true,
effect: 'fade',
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});
width, color, border-radius
λ±μΌλ‘ νμ΄μ§λ€μ΄μ
μμ μ€νμΌλ§<div class="group-flex">
<h1 class="logo">
<a href="">
<span class="blind">μλ€λ₯΄</span>
<svg width='80' height='21' viewBox='0 0 80 21' fill='#fff' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='(μλ΅)' fill='#fff'/></svg>
</a>
</h1>
<div class="util-area">
<a href="" class="btn-menu" id="menuBtn">
<span class="blind">λ©λ΄</span>
<svg width='20' height='17' viewBox='0 0 20 17' fill='#fff' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='(μλ΅)' fill='#fff'/></svg>
</a>
<a href="" class="btn-search">
<span class="blind">κ²μ</span>
<svg width='20' height='21' viewBox='0 0 20 21' fill='#fff' xmlns='http://www.w3.org/2000/svg'><path d='(μλ΅)' fill='#fff'/></svg>
</a>
</div>
<div class="util-area">
<a href="" class="btn-cart">
<span class="blind">μ₯λ°κ΅¬λ</span>
<svg width='20' height='21' viewBox='0 0 20 21' fill='#fff' xmlns='http://www.w3.org/2000/svg'><path d='(μλ΅)' fill='#fff'/></svg>
</a>
<a href="" class="btn-mypage">
<span class="blind">λ§μ΄νμ΄μ§</span>
<svg width='20' height='21' viewBox='0 0 20 21' fill='#fff' xmlns='http://www.w3.org/2000/svg'><path d='(μλ΅)' fill='#fff'/></svg>
</a>
</div>
</div>
.header .group-flex .logo{
position: absolute;
top: 50%;left: 50%;
transform: translate(-50%, -50%);
}
.header.on{ position: fixed; top: 0; }
.header.on .group-flex{ background: #fff; }
.header.on .group-flex svg path{ fill: #000 }
.header.on .gnb{ visibility: visible; opacity: 1; }
fill: #000
let scrollTop = 0;
$(window).scroll(function(){
const curr = $(this).scrollTop();
if ( curr > 0 ) {
$('.header').addClass('on')
} else {
$('.header').removeClass('on')
}
if(curr >= 100){
if (curr < scrollTop) {
$('.fixed-btns').addClass('show');
} else {
$('.fixed-btns').removeClass('show');
}
scrollTop = curr;
} else {
$('.fixed-btns').removeClass('show');
}
});
$(window).trigger('scroll');
1) header
2) fix-btn
νμ¬ μ€ν¬λ‘€κ°μ΄ 100 μ΄μμ΄κ³
scrollTop = curr;
λ‘ μ΄λ μμΉμμλ νμ¬ μμΉλ₯Ό scrollTop κ°μΌλ‘ μ¬ν λΉμμΌ νμ¬ μμΉκ° λ€μ κΈ°μ€μ΄ λλ€..aside-menu{
position: fixed;
width: 81.94%;
height: 100%;
background: #fff;
top: 0;
left: -100%;
transition: all 0.5s ease;
visibility: visible;
z-index: 10;
overflow: auto;
padding: 0 16px;
}
.aside-menu.on{
left: 0;
}
left
κ°μ -100%
μ μ£Όμ΄ μΌμͺ½μΌλ‘ μλ²½ν λ°μ΄λμ νleft: 0
μΌλ‘ μλ μμΉλ‘ λμ€κ² λλ€.// .js
$('.btn-menu').click(function(e){
e.preventDefault();
$('.aside-menu').addClass('on')
});
$('.btn-close').click(function(e){
e.preventDefault();
$('.aside-menu').removeClass('on')
});
.gnb-bg{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
visibility: hidden;
background: #000;
opacity: 0;
z-index: 9;
}
.gnb-bg.on{
opacity: 0.5;
visibility: visible;
}
// μ¬μ΄λ λ©λ΄ μ΄λ Έμ λ
$('#menuBtn').click(function(e){
e.preventDefault();
$('.aside-menu,.gnb-bg').addClass('on');
$('body').addClass('hidden')
});
// μ¬μ΄λ λ©λ΄ λ«νμ λ
$('.aside-menu .btn-close,.gnb-bg').click(function(e){
e.preventDefault();
$('.aside-menu,.gnb-bg').removeClass('on');
$('body').removeClass('hidden')
});
$('body').addClass('hidden')
/* bodyμ μΆκ°ν μ€νμΌ */
.hidden{
overflow: hidden;
}
<div class="group-cate">
<ul class="cate-list">
<li class="cate-item"><a href="" data-tab="#all" class="point">μ 체</a></li>
<li class="cate-item"><a href="" data-tab="#women">μ°λ¨Όμ¦</a></li>
<li class="cate-item"><a href="" data-tab="#men">맨μ¦</a></li>
<li class="cate-item"><a href="" data-tab="#homeacc">ννΈμ©ν & ACC</a></li>
</ul>
</div>
/* .css */
.sc-collect .prd-list.tab{
display: none;
}
.sc-collect .prd-list.tab.on{
display: flex;
gap: 17px;
flex-wrap: wrap;
}
.group-cate .cate-list .cate-item a.point{
font-weight: 700;
color: #FFFFFF;
background: #B75622;
border-radius: 60px;
margin-bottom: 22px;
}
// .js
$('.sc-collect .cate-item a').click(function(e){
e.preventDefault();
target = $(this).data('tab');
$(this).addClass('point').parent().siblings().children().removeClass('point');
$(target).addClass('on').siblings().removeClass('on');
});