carousel flat скрипт

имею код скрипт для вывода картинок в стиле карусель (слайдер) и хочется чтобы текста с кнопкой располагались справа от картинки над следующей картинкой, а у других картинок текст с кнопкой пропадали, где копаться по расположениям текста с кнопкой и пропаданием текста с кнопкой не активных картинок.

ccылка на код в codepen.io --> https://codepen.io/macrosofaq/pen/abJNVZN

<div id="flat">
    <ul>
        <li data-flip-title="Red" >
            <img class="img" src="http://brokensquare.com/Code/jquery-flipster/demo/img/text1.gif">
        
          <h1 class="text location">Scotland</h1>
            <p class="text description">The mountains are calling</p>
            <button class="button1" href="https://www.youtube.com/watch?v=k12bQFtSTAY" >button</button>
        </li>
        <li data-flip-title="red" data-flip-category="Purples">
            <img src="http://brokensquare.com/Code/jquery-flipster/demo/img/text2.gif">
            <h1 class="text location">Scotland</h1>
            <p class="text description">The mountains are calling</p>
          <button class="button1" href="https://www.youtube.com/watch?v=k12bQFtSTAY" >button</button>
         </li>
        <li data-flip-title="red" data-flip-category="Purples">
            <img src="http://brokensquare.com/Code/jquery-flipster/demo/img/text3.gif">
            <h1 class="text location">Scotland</h1>
            <p class="text description">The mountains are calling</p>
          <button class="button1" href="https://www.youtube.com/watch?v=k12bQFtSTAY" >button</button>
        </li>
        <li data-flip-title="red" data-flip-category="Purples">
            <img src="http://brokensquare.com/Code/jquery-flipster/demo/img/text4.gif">
            <h1 class="text location">Scotland</h1>
            <p class="text description">The mountains are calling</p>
          <button class="button1" href="https://www.youtube.com/watch?v=k12bQFtSTAY" >button</button>
        </li>
      
    </ul>

</div>