I have built a slider using Slick and now when I add a ACF options value into the slider it breaks. Any Ideas why? Just repeated the element for testing reasons.

Anyone had something similar?

So when I say its broken. You can add text in where it says the_field and it works so it displays the slider on screen. When you add the php the_field it cuts half the slide off and then shows the bottom part of the item.

So example the image below is how its displaying with the PHP Code so its displaying diffrently to how it should Next image below.

<div class="service_slider">
<div class="item">
    <div class="col s12 m7 l7 pad0">
        <div class="image">
            <img src="/images/temp.jpg">
        </div>
    </div>
    <div class="col s12 m5 l5 pad0">
        <?php the_field('title_resin', 'options'); ?>
        <p><a href="#">Find Out More</a></p>
    </div>
</div>
<div class="item">
    <div class="col s12 m7 l7 pad0">
        <div class="image">
            <img src="/images/temp.jpg">
        </div>
    </div>
    <div class="col s12 m5 l5 pad0">
        <?php the_field('title_resin', 'options'); ?>
        <p><a href="#">Find Out More</a></p>
    </div>
</div>
<div class="item">
    <div class="col s12 m7 l7 pad0">
        <div class="image">
            <img src="/images/temp.jpg">
        </div>
    </div>
    <div class="col s12 m5 l5 pad0">
        <?php the_field('title_resin', 'options'); ?>
        <p><a href="#">Find Out More</a></p>
    </div>
</div>
<div class="item">
    <div class="col s12 m7 l7 pad0">
        <div class="image">
            <img src="/images/temp.jpg">
        </div>
    </div>
    <div class="col s12 m5 l5 pad0">
        <?php the_field('title_resin', 'options'); ?>
        <p><a href="#">Find Out More</a></p>
    </div>
</div>
<div class="item">
    <div class="col s12 m7 l7 pad0">
        <div class="image">
            <img src="/images/temp.jpg">
        </div>
    </div>
    <div class="col s12 m5 l5 pad0">
        <?php the_field('title_resin', 'options'); ?>
        <p><a href="#">Find Out More</a></p>
    </div>
</div>

<script type="text/javascript">
$(document).ready(function(){
    $('.service_slider').slick({
            //dots: true,
            autoplay: false,
            autoplaySpeed: 3000,
            //fade: true,
            cssEase: 'linear',
            slidesToShow: 2,
            slidesToScroll: 1,
            vertical: true,
            prevArrow: '<button class="slick-prev slick-arrow" type="button" style="display: block;"><span></span></button>',
            nextArrow: '<button class="slick-next slick-arrow" type="button" style="display: block;"><span></span></button>',
        });
});