alpinejs image slider first slide repeating twice and last slide not defined - laravel-blade

Question

I image slide on homepage http://steklo.gq/ made using alpine and there are two strange things:
First slide design-5.jpg is repeating twice on the page
It gives me error in console Uncaught ReferenceError: slide is not defined on the last slide. However image exists and last slide defined the same way as all other slides. So I cannot understand what is the problem.
Alpine Error: "ReferenceError: slide is not defined"
Expression: "slide.img"
Element: <img x-bind:src=​"slide.img" class=​"h-148 w-full lg:​h-224 object-cover" src=​"/​storage/​thumbs_xl/​slider/​1912501_1600x1200.jpg">​
handleError # app.js:18
tryCatch # app.js:18
saferEval # app.js:19
evaluateReturnExpression # app.js:187
handleAttributeBindingDirective # app.js:67
(anonymous) # app.js:186
resolveBoundAttributes # app.js:186
initializeElement # app.js:180
(anonymous) # app.js:178
(anonymous) # app.js:177
walk # app.js:16
walk # app.js:16
walk # app.js:16
walk # app.js:16
walk # app.js:16
walkAndSkipNestedComponents # app.js:176
initializeElements # app.js:178
(anonymous) # app.js:192
(anonymous) # app.js:191
attributes (async)
addClass # app.js:926
Slick.init # app.js:2702
Slick # app.js:2646
$.fn.slick # app.js:2798
(anonymous) # app.js:367
<x-slot name="mainslider">
<div class="mainslider_container absolute w-full h-full top-0" id="main_slider"
x-data="{
slides: [
{ id:1, img: '/storage/thumbs_xl/slider/design-5.jpg', text: 'Офисные перегородки <br> в стиле LOFT', textclass: 'top-1/4 text-white', buttonclass: '' },
{ id:2, img: '/storage/thumbs_xl/slider/design-7.jpg', text: 'Межкомнатные раздвижные <br> перегородки', textclass: 'bottom-1/4 text-white', buttonclass: 'text-white' },
{ id:3, img: '/storage/thumbs_xl/slider/img_20171230_191642.jpg', text: 'Лестничные ограждения <br> из закалённого стекла', textclass: 'top-1/3 text-white', buttonclass: 'text-white' },
{ id:4, img: '/storage/thumbs_xl/slider/2018-03-09-20-29-24.jpg', text: 'Цельностеклянные перегородки', textclass: 'bottom-1/4 text-white', buttonclass: 'text-white' },
{ id:5, img: '/storage/thumbs_xl/slider/peregorodka-47.jpg', text: 'Пескоструйные рисунки <br> на стекле', textclass: 'bottom-52 text-white', buttonclass: 'text-white' },
{ id:6, img: '/storage/thumbs_xl/slider/dsc_0003.jpg', text: 'Стеклянные ограждения <br> балконов и террас', textclass: 'top-28', buttonclass: '' },
{ id:7, img: '/storage/thumbs_xl/slider/1912501_1600x1200.jpg', text: 'Стеклянные перегородки для ресторанов', textclass: 'top-28 text-white', buttonclass: '' },
]
}"
x-effect="console.log(slide)"
>
<template x-for="slide in slides" :key="slide.id">
<div class="mainslider_item relative">
<img x-bind:src="slide.img" class="h-148 w-full lg:h-224 object-cover">
<div class="mainslider_item_text absolute w-full flex justify-center py-4 text-3xl font-bold" x-bind:class="slide.textclass" x-html="slide.text">
</div>
<div class="mainslider_item_button absolute top-12 right-0 w-1/2 flex justify-center" x-bind:class="slide.buttonclass">
<x-modules.link-button
link="#" text="Заказать звонок" icon="phone-ringing-outline"
style="black-outline" class="w-48 p-1.5"
#click.prevent="contactForm()"
/>
</div>
</div>
</template>
</div>
</x-slot>
resources/js/app.js
require('./includes/script.js');
resources/js/bootstrap.js
window.carousel = require('slick-carousel');
resources/js/includes/script.js
window.addEventListener('DOMContentLoaded', function(){
/*===== slick carousel modal plugin =====*/
/*============= main slider =============*/
$('#main_slider').slick({
arrows: true,
adaptiveHeight: true,
dots: true,
infinite: true,
autoplay: true,
nextArrow: '<div class="main__arrow arrow-next"></div>',
prevArrow: '<div class="main__arrow arrow-prev"></div>',
responsive: [
{
breakpoint: 768,
settings: {
arrows: false
}
}
]
});
/*===== FINISH slick carousel modal plugin =====*/
});