Подробное описание и демонстрация работы блока «Новостной слайдер» для сайта под номером №31 для библиотеки Bootstrap. Html и CSS код для новостного слайдера на сайте как на изображении.

html разметка и css стили для реализации блока «Новостной слайдер»
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div id="news-slider" class="owl-carousel">
                <div class="post-slide">
                    <ul class="post-info">
                        <li><i class="fa fa-tag"></i><a href="#">java</a>,<a href="#">php</a></li>
                        <li><i class="fa fa-calendar"></i><a href="#">June 10, 2016</a></li>
                        <li><i class="fa fa-comment"></i><a href="#">1</a></li>
                    </ul>
                    <div class="post-img">
                        <img src="images/img-1.jpg" alt="">
                        <a href="#" class="read">read more</a>
                    </div>
                    <div class="post-content">
                        <span class="post-author">
                            <a href="#"><img src="images/img-5.jpg" alt=""></a>
                        </span>
                        <h3 class="post-title">Latest News Post</h3>
                        <p class="post-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus? Accusantium, aut beatae commodi dolore dolores esse fugit id illum ipsam nemo nesciunt obcaecati officiis praesentium provident quasi quis quo repellat sapiente sequi temporibus voluptates.</p>
                    </div>
                </div>
 
                <div class="post-slide">
                    <ul class="post-info">
                        <li><i class="fa fa-tag"></i><a href="#">java</a>,<a href="#">php</a></li>
                        <li><i class="fa fa-calendar"></i><a href="#">June 12, 2016</a></li>
                        <li><i class="fa fa-comment"></i><a href="#">3</a></li>
                    </ul>
                    <div class="post-img">
                        <img src="images/img-2.jpg" alt="">
                        <a href="#" class="read">read more</a>
                    </div>
                    <div class="post-content">
                        <span class="post-author">
                            <a href="#"><img src="images/img-6.jpg" alt=""></a>
                        </span>
                        <h3 class="post-title">Latest News Post</h3>
                        <p class="post-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus? Accusantium, aut beatae commodi dolore dolores esse fugit id illum ipsam nemo nesciunt obcaecati officiis praesentium provident quasi quis quo repellat sapiente sequi temporibus voluptates.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
$(document).ready(function() {
    $("#news-slider").owlCarousel({
        items:3,
        itemsDesktop:[1199,3],
        itemsDesktopSmall:[1000,2],
        itemsMobile:[600,1],
        pagination:false,
        navigationText:false,
        autoPlay:true
    });
});
.post-slide{
    margin: 0 10px;
}
.post-slide .post-info{
    padding: 5px 0;
    margin: 0;
    list-style: none;
}
.post-slide .post-info li{
    display: inline-block;
    margin: 0 5px;
}
.post-slide .post-info li i{
    margin-right: 8px;
}
.post-slide .post-info li a{
    font-size: 11px;
    font-weight: bold;
    color: #7e828a;
    text-transform: uppercase;
}
.post-slide .post-info li a:hover{
    color: #1dcfd1;
    text-decoration: none;
}
.post-slide .post-img{
    position: relative;
}
.post-slide .post-img:before{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    background: rgba(0, 0,0,0.6);
    transition: opacity 0.40s linear 0s;
}
.post-slide:hover .post-img:before{
    opacity: 1;
}
.post-slide .post-img img{
    width: 100%;
    height: auto;
}
.post-slide .read{
    position: absolute;
    bottom: 30px;
    left: 50px;
    font-size: 14px;
    color: #fff;
    text-transform: capitalize;
    opacity: 0;
    transition: all 0.40s linear 0s;
}
.post-slide:hover .read{
    opacity:1;
}
.post-slide .read:hover{
    text-decoration: none;
    color: #1dcfd1;
}
.post-slide .post-content{
    padding: 40px 0;
    position: relative;
}
.post-slide .post-author{
    width: 75px;
    height: 75px;
    border-radius: 50%;
    position: absolute;
    top: -45px;
    right: 10px;
    overflow: hidden;
    border:4px solid #fff;
}
.post-slide .post-author img{
    width: 100%;
    height: auto;
}
.post-slide .post-title{
    font-size: 14px;
    font-weight: bold;
    color: #1dcfd1;
    margin: 0 0 10px 0;
    text-transform: uppercase;
    transition: all 0.30s linear 0s;
}
.post-slide .post-title:after{
    content: "";
    width: 25px;
    display: block;
    margin-top: 10px;
    border-bottom: 4px solid #333;
}
.post-slide .post-description{
    font-size: 13px;
    color: #555;
    margin-bottom:20px;
}


Теги:
0

Оставить своё мнение

Ваш e-mail не будет опубликован. Обязательные поля помечены *