У меня есть код для целевой страницы с 4 картинками, которые меняются с помощью карусели:
<div class="row">
<div class="col-12 welcome d-flex align-items-center justify-content-center" >
<div class="welcome-slider">
<div class="carousel slide">
<div class="carousel-inner">
<div class="carousel-item active">
<%= image_tag 'Eureka.jpg', class: 'd-block w-100' %>
</div>
<div class="carousel-item">
<%= image_tag 'pensive.jpg', class: 'd-block w-100' %>
</div>
<div class="carousel-item">
<%= image_tag 'NYC.jpg', class: 'd-block w-100' %>
</div>
<div class="carousel-item">
<%= image_tag 'Success.jpg', class: 'd-block w-100' %>
</div>
</div>
</div>
</div>
<div class="comingsoon">
<h1 class="font-white"> Coming soon </h1>
</div>
</div>
</div>
Вот мой код: посадки.coffee
$(document).on "turbolinks:load", ->
$('.carousel').carousel()
И static_pages.coffee
$item = $('.carousel-item')
$wHeight = $(window).height()
$item.height $wHeight
$item.addClass 'full-screen'
$('.carousel img').each ->
$src = $(this).attr('src')
$color = $(this).attr('data-color')
$(this).parent().css
'background-image': 'url(' + $src + ')'
'background-color': $color
$(this).remove()
return
$(window).on 'resize', ->
$wHeight = $(window).height()
$item.height $wHeight
return
Соответствующий CSS:
.full-screen {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
Кажется, что coffeescript вообще не влияет на страницу, так как пробел существует с ним или без него.Кто-нибудь может помочь посоветовать, как избавиться от пробелов внизу страницы?Нужен ли какой-нибудь из этих сценариев?