Blooger Website) 2. 글목록 만들기

 

owl Carousel 을 이용해서 글목록 옆으로 넘기기를 작성하고, 

화살표 아이콘 모양 변경하기

 

홈페이지에서 다운 받아서 owl.carousel.min.css 와 owl.theme.default.min.css파일을 css 폴더로 이동.

owl.caousel.min.js는 js파일 폴더로 이동해준다. 

 

 

https://owlcarousel2.github.io/OwlCarousel2/demos/responsive.html

Responsive Demo | Owl Carousel | 2.3.4

옆으로 넘기는 responsive 타입을 이용한다. 

 

 

 

 

 

1. index. html

<!----------------------Blog Carousel----------------->
    <section>
        <div class="blog">
            <div class="container">
                <div class="owl-carousel owl-theme blog-post">
                    <div class="blog-content">
                        <img src="./assets/Blog-post/post-1.jpg" alt="post-1">
                        <div class="blog-title">
                            <h3>Londeon Fashion week's continued the evolution</h3>
                            <button class="btn btn-blog">Fashion</button>
                            <span>2 minutes</span>
                        </div>
                    </div>
                    <div class="blog-content">
                        <img src="./assets/Blog-post/post-2.jpg" alt="post-1">
                        <div class="blog-title">
                            <h3>Londeon Fashion week's continued the evolution</h3>
                            <button class="btn btn-blog">Fashion</button>
                            <span>2 minutes</span>
                        </div>
                    </div>
                    <div class="blog-content">
                        <img src="./assets/Blog-post/post-3.jpg" alt="post-1">
                        <div class="blog-title">
                            <h3>Londeon Fashion week's continued the evolution</h3>
                            <button class="btn btn-blog">Fashion</button>
                            <span>2 minutes</span>
                        </div>
                    </div>
                    <div class="blog-content">
                        <img src="./assets/Blog-post/post-5.png" alt="post-1">
                        <div class="blog-title">
                            <h3>Londeon Fashion week's continued the evolution</h3>
                            <button class="btn btn-blog">Fashion</button>
                            <span>2 minutes</span>
                        </div>
                    </div>
                </div>
                <div class="owl-navigation">
                    <span class="owl-nav-prev"><i class="fas fa-long-arrow-alt-left"></i></span>
                    <span class="owl-nav-next"><i class="fas fa-long-arrow-alt-right"></i></span>
                </div>
            </div>
        </div>
    </section>

    <!--------x-------------Blog Carousel---------x------->

 

 

2. main. js

//owl-carousel for blog
    $('.owl-carousel').owlCarousel({
        loop:true,
        autoplay: false,
        autoplayTimeout:3000,
        dots:false,
        nav:true,
        navText:[$('.owl-navigation .owl-nav-prev'),$('.owl-navigation .owl-nav-next')]
    });

 

 

3. style.css(몇가지는 글로벌 영역안에 설정했다.)

/*----------Blog Carousel-----------*/
main .blog{
    background:url('../assets/Abract01.png');
    background-repeat: no-repeat;
    background-position: right;
    height:60vh;
    width: 100%;
    background-size: 65%;
}

main .blog .blog-post{
    padding-top: 6rem;
}

main .blog-post .blog-content{
    display:flex;
    flex-direction: column;
    text-align: center;
    width: 80%;
    margin:3rem 2rem;
    box-shadow: 0 15px 20px rgba(0, 0, 0, 0.2);
}

main .blog-content .blog-title{
    padding: 2rem 0;

}

main .blog-content .btn-blog{
    padding: .7rem 2rem;
    background:var(--peach);
    margin:.5rem;
}

main .blog-content span{
    display:block;

}

section .container .owl-nav{
    position: absolute;
    top:0%;
    margin: 0 auto;
    width: 100%;
}

.owl-nav .owl-prev .owl-nav-prev,
.owl-nav .owl-next .owl-nav-next{
    color:var(--text-gray);
    background: transparent;
    font-size: 2rem;
}

.owl-theme .owl-nav [class*='owl-']:hover{
    background:transparent;
    color: var(--midnight);
}
.owl-theme .owl-nav [class*='owl-']{
    outline:none;
}


/*---x------Blog Carousel---x-------*/

 

 

 

작성한 모습을 보면 

 

 

 

배경화면 설정 후 옆으로 넘길 수 있도록 설정. 

 

 

 

 

 

마우스를 가져다 대면 미드나잇 컬러로 변경이 된다. 

 

 

 

 

 

옆으로 넘기기 버튼을 누르면 다음 글 목록을 볼 수도 있다.