Слайдер для мобильной версии сайта
у меня имеется некоторое расширение для сайта, которое импортирует 4 последних поста из инстаграм. Мне нужно чтобы в мобильной версии эти посты превращались в слайдер, который пользователь будет листать.
Я могу только дописывать css код (имеющийся менять не могу), доступа к html коду нет, а js это расширение не пропускает, пишет ошибку.
<div class="socialFeed grid pad-bottom-m" style="width: 444px;">
<h2 class="feed-title">
</h2>
<div class="posts-container">
<div class="posts">
<div class="postItem none fadeMe faded" data-link="https://www.instagram.com/" data-type="Instagram" data-approved-index="0" style="height: auto;">
<!--need this container to place postFooter at the bottom of postCard using flexbox-->
<div>
<!--Post video for vine-->
<div class="postPicture none">
<div class="postImgWrapper squareCrop">
<img class="postImg">
</div>
</div>
<!--Post Text-->
</div>
</div>
<div class="postItem none fadeMe faded" data-link="https://www.instagram.com/" data-type="Instagram" data-approved-index="1" style="height: auto;">
...
</div>
<div class="postItem none fadeMe faded" data-link="https://www.instagram.com/" data-type="Instagram" data-approved-index="2" style="height: auto;">
...
</div>
<div class="postItem none fadeMe faded" data-link="https://www.instagram.com/" data-type="Instagram" data-approved-index="3" style="height: auto;">
...
</div>
</div>
</div>
</div>
.socialFeed.grid .posts {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap: wrap;
justify-content: center;
}
Как при помощи css это можно сделать?
Как это выглядит сейчас:
