Использование lightGallery
Рарзметка HTML:
-
День рожденияPellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor.подробнее
-
День рожденияPellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor.подробнее
-
День рожденияPellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor.подробнее
-
День рожденияPellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor.подробнее
-
День рожденияPellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor.подробнее
Стили CSS:
.popular_articles_wr {
padding: 40px 0;
border-bottom:1px solid #eaeaea;
}
.popular_article_item {
text-align: center;
/*width: 18%;*/
/*float: left;*/
/*margin: 0 1%;*/
}
.pai_title {
font-size: 20px;
font-weight: 500;
margin-bottom: 15px;
}
.pai_img {
display: inline-block;
height: 110px;
width: 110px;
background: #eaeaea;
border-radius: 100%;
margin-bottom: 12px;
}
.pai_more {
display: inline-block;
border: 2px solid #fcb040;
border-radius: 50px;
padding: 10px 25px;
font-size: 11px;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 1px;
color: #ea7812;
margin-top: 15px;
text-decoration: none;
}Скрипты JS:
$('.landing_blocks_wr_live .popular_articles').lightSlider({
item:5,
slideMove:2,
loop:true,
auto:true,
enableDrag:false,
easing: 'cubic-bezier(0.25, 0, 0.25, 1)',
speed:600,
pager:false,
responsive : [
{breakpoint:1199,settings: {item:4,slideMove:1}},
{breakpoint:991,settings: {item:3,slideMove:1}},
{breakpoint:767,settings: {item:2,slideMove:1}}
]
});Результат:
-
День рожденияPellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor.подробнее
-
День рожденияPellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor.подробнее
-
День рожденияPellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor.подробнее
-
День рожденияPellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor.подробнее
-
День рожденияPellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor.подробнее
Способ поблагодарить автора сайта:
Комментарии (2)
Не писать ответ