Расположение элементов относительно родительского контейнера

Question

У меня есть слайд-шоу, которое выглядит следующим образом:

<div class="slideshow_cont">
    <div class="slideshow_btn_cont">
    </div>
    <ul class="slideshow">  
    {% for obj in project_list %}
    <li class="slide"> 
    <img class="slideshow_thumb"/>
    <span class="slideshow_thumb_label">
    {{ obj.project_title }}
    </span>
    </li>
    {% endfor %}
    </ul>
</div>

---

.slideshow_cont{
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    position: relative;
    overflow: hidden;
}
.slideshow{
    height:150px;
    width:2000px;
    display:flex;
    justify-content: center;
    align-items: center;
    position:absolute;
    list-style:none;
}
.slide{
    width: 140px;
    height: 120px;
    position: relative;
    margin: 0 40;
}

Как добавить поле

между первым слайдом и левой границей slideshow_cont и

между последним слайдом и правой границей slideshow_cont,

, чтобы слайды не перекрывались с кнопками?

---

Спасибо

Answer 1

Вы можете использовать :first-child и :last-child псевдоклассы для добавления полей

Или использовать заполнение для контейнера

Answer 2

РЕШЕНО

Я добавил эту функцию, чтобы установить ширину слайд-шоу, равную ширине слайдов x слайды n + поле:

$(document).ready(function(){
    var slide_ = $('.slide');
    var slide_w =  slide_.width();
    var slide_n = slide_.length;
    var slide_m = slide_n * 80; // margin
    slideshow_width = slide_n * slide_w + slide_m;
    $('.slideshow').css({'width':slideshow_width});
});

Результат: