<div class="news">
<div class="news__arrows_2">
<div class="news__arrow news__arrow_dir_left" onclick="slideGo('-')"></div>
<div class="news__arrow news__arrow_dir_right" onclick="slideGo('+')"></div>
</div>
<div class="news__content">
<div class="news__slider">
<div class="news__slide">
<div class="news__container article">
<div class="article__img-container">
<div class="article__img" style="background: url(https://images.unsplash.com/photo-1484399172022-72a90b12e3c1?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzA3NjM5NDM&ixlib=rb-4.0.3&q=80&w=400) no-repeat center center; background-size: cover;">
</div>
</div>
</div>
</div>
<div class="news__slide">
<div class="news__container article">
<div class="article__img-container">
<div class="article__img" style="background: url(https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzA3NjM5OTU&ixlib=rb-4.0.3&q=80) no-repeat center center; background-size: cover;">
</div>
</div>
</div>
</div>
<div class="news__slide">
<div class="news__container article">
<div class="article__img-container">
<div class="article__img" style="background: url(https://images.unsplash.com/photo-1499557354967-2b2d8910bcca?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzA3NjM5NDM&ixlib=rb-4.0.3&q=80&w=400) no-repeat center center; background-size: cover;">
</div>
</div>
</div>
</div>
<div class="news__slide">
<div class="news__container article">
<div class="article__img-container">
<div class="article__img" style="background: url(https://images.unsplash.com/photo-1526412874539-dc64b232fecd?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzA3NjM5NzQ&ixlib=rb-4.0.3&q=80) no-repeat center center; background-size: cover;">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="news__arrows"><div class="news__dots"></div></div>
</div>
.ttl {
font-size: 24px;
color: #525458;
text-transform: uppercase;
margin: 10px 0;
}
.news {
max-width: 640px;
margin: 20px auto;
overflow: hidden;
outline: 2px solid red;
}
.news__content {
overflow: hidden;
}
.news__arrows {
display: flex;
justify-content: center;
align-items: center;
}
.news__arrow {
width: 14px;
height: 17px;
cursor: pointer;
filter: saturate(0%);
}
.news__arrow:hover {
filter: saturate(100%);
}
.news__arrow_dir_left {
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2015738/arrows__left.png)
no-repeat;
}
.news__arrow_dir_right {
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2015738/arrows__right.png)
no-repeat;
}
.news__arrow_dir_up {
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2015738/arrows__left.png)
no-repeat;
transform: rotate(90deg);
}
.news__arrow_dir_down {
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2015738/arrows__left.png)
no-repeat;
transform: rotate(-90deg);
}
.news__dots {
position: relative;
}
.news__dots-list {
display: flex;justify-content: center;align-items: center;flex-wrap: wrap;
}
.news__dots-list li {
padding: 2px;
font-weight: bold;
font-family: arial;
font-size: 16px;
cursor: pointer;
color: rgb(143, 143, 143);
transition: .3s all;
width: 18px;
position: relative;
z-index: 0;
text-align: center;
}
.news__dots-list li:after {
content: "";
display: block;
position: absolute;
left: 2px;
right: 2px;
top: calc(50% - 2px);
height: 4px;
background-color: grey;
opacity: 0;
transition: .3s all;
}
.news__dots-list li:hover {
}
.news__dots-list li.slick-active {
color: rgb(11, 165, 218);
color: transparent;
}
.news__dots-list li.slick-active:after {
opacity: 1;
}
.news__slider {
margin: 0 -10px !important;
overflow-x: hidden;
}
.news__slide {
box-sizing: border-box;
}
.news__arrows_2 {
display: block;
width: 35%;
position: relative;
z-index: 20;
margin: 0 auto;
}
.news__arrows_2 .news__arrow_dir_left {
position: absolute;
left: 0;
top: 70px;
filter: drop-shadow(0 0 10px orange) drop-shadow(0 0 20px orange);
}
.news__arrows_2 .news__arrow_dir_right {
position: absolute;
right: 0;
top: 70px;
filter: drop-shadow(0 0 10px orange) drop-shadow(0 0 20px orange);
}
.article {
display: flex;
flex-direction: column;
width: calc(100% - 20px);
margin: 0 auto;
}
.article__img-container {
height: 140px;
position: relative;
overflow: hidden;
}
.article__img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url(../images/news__img_2.jpg) no-repeat center center;
background-size: cover;
transition: 0.3s all;
}
.article:hover .article__img {
transform: scale(1.2);
}
.article__title {
color: #8c570a;
font-weight: 700;
font-size: 22px;
padding: 20px 0;
}
.article__content {
color: #85878d;
font-size: 16px;
line-height: 20px;
height: 95px;
overflow: hidden;
}
.article__info {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 15px;
}
.article__date {
color: #737373;
font-family: "Candara";
font-size: 15px;
}
$(function () {
let slider = $('.news__slider');
slider.slick({
infinite: true,
speed: 600,
slidesToShow: 3,
autoplay: true,
autoplaySpeed:5000,
fade: false,
arrows: true,
appendArrows: $('.news__arrows'),
prevArrow: '<div class="news__arrow news__arrow_dir_left"></div>',
nextArrow: '<div class="news__arrow news__arrow_dir_right"></div>',
dots: true,
appendDots: $('.news__dots'),
customPaging : function(slider, i) {
var thumb = $(slider.$slides[i]).data();
return '0' + (i + 1);
},
dotsClass: 'news__dots-list',
});
});
function slideGo(dir) {
let slider = $('.news__slider');
if(dir === "+") {
slider.slick('slickNext');
} else if ( dir === "-" ) {
slider.slick('slickPrev');
}
}
