Project1 #services ์์ slickSlide ์คํฌ๋ฆฝํธ๊ฐ ์คํ์ด ์๋๋๋ฐ์.
index.html ์ด๋JSํ์ผCSSํ์ผ ์ฌ๋ฆฌ๋๋ฐ์. ์ฝํธ ๋ถ์ฌ๋ฃ์ผ๋ ํ์ค๋ก ๋๋ฒ๋ฆฌ๋ค์....ใ
ใ
์ด๋์ ๋ฌธ์ ์ธ์ง ํ์ธ๋ถํ๋๋ฆฝ๋๋ค. (์ฌ์ง) My BSS web Home Intro Services Slogan Gallery Contact Find us Welcome to my first website. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid, temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Est laborum a dolorem sapiente iusto ab repellat quia eius reprehenderit eos! Read more Easy contact! Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis, quis. I agree to provide privacy. Submit Link 1 Link 2 Link 3 Link 4 Greetiongs! Introduce our website. Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem dicta sequi voluptatibus rerum voluptatum officia iste voluptates asperiores! Laudantium minima mollitia unde magnam quia doloribus veniam quasi odio hic a. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, dolorum sint minima rem doloribus dolore aliquid distinctio labore aperiam tenetur. Our amazing services Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque error provident ad ipsum iste facere blanditiis quas deleniti doloremque non. (์ฌ์ง) Skide title Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam fugiat repellendus numquam dolorem rem, temporibus quis aperiam odit! Neque, iure. View more... (์ฌ์ง) Skide title Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam fugiat repellendus numquam dolorem rem, temporibus quis aperiam odit! Neque, iure. View more... (์ฌ์ง) Skide title Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam fugiat repellendus numquam dolorem rem, temporibus quis aperiam odit! Neque, iure. View more... (์ฌ์ง) Skide title Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam fugiat repellendus numquam dolorem rem, temporibus quis aperiam odit! Neque, iure. View more... (์ฌ์ง) Skide title Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam fugiat repellendus numquam dolorem rem, temporibus quis aperiam odit! Neque, iure. View more... (์ฌ์ง) Skide title Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam fugiat repellendus numquam dolorem rem, temporibus quis aperiam odit! Neque, iure. View more... JSํ์ผ const slickSlide=JQuery('#slick-slide') if (slickSlide){ slickSlide.slick({ dots:true, arrows:false, slidesToShow:3, slideToScroll:1, autoplay:true, autoplaySpeed:3000, responsive: [ { breakpoint: 768, settings: { slidesToShow:2 } }, { breakpoint: 576, settings: { slidesToShow:1 } } ] }) } CSSํ์ผ /*Global*/ .section-content{ padding:4rem 0; } /*Top Section*/ #top{ background:url('../images/bg-top.jpg'); background-position:center; background-repeat:no-repeat; background-size:cover; height:80vh; position:relative; } #top .overlay{ position:absolute; height:100%; width:100%; left:0; top:0; background-color:rgb(0,0,0,0.65); } #top .divider{ width: 10%; margin-top: 2rem; margin-bottom: 2rem; border-top: 2px solid #fff; } #top .welcome{ padding-right: 8rem; color:#fff; } @media screen and (max-width:767px) { #top .welcome{ padding-left:1rem; padding-right:1rem; } } #intro .intro-first-card{ background-position: center; background-repeat: no-repeat; background-size: cover; height: 12rem; } #intro .col-6:nth-of-type(1) .intro-first-card{ background-image:url('../images/bg1.jpg'); } #intro .col-6:nth-of-type(2) .intro-first-card{ background-image:url('../images/bg2.jpg'); } #intro .col-6:nth-of-type(3) .intro-first-card{ background-image:url('../images/bg3.jpg'); } #intro .col-6:nth-of-type(4) .intro-first-card{ background-image:url('../images/bg4.jpg'); } #intro .intro-first-card .overlay{ left:0; top:0; background-color:rgba(0, 0, 0, 0.4); } #intro .intro-first-card. .overlay a{ transition: hover 0.4s ease; } #intro .intro-first-card. .overlay a:hover{ color:#fafa6f; } #services{ background-color:rgba(96, 125, 139, 0.1); } #services .divider{ width:10%; margin:2rem auto; border-top:0.5rem solid rgb(255, 112, 3); } #services .services-col .card{ transition:0.4s ease; } #services .services-col .card:hover{ transform: translateY(-0.8rem); box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15); } #services .services-col img{ height: 13rem; object-fit:cover; object-position:center; }