<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>

<div class="p-detail-photo">
    <div class="swiper-container thumbnail swiper-container-horizontal">
        <div class="swiper-wrapper">
            @foreach($photos as $photo)
            <div class="swiper-slide"><img src="{{$photo->disp_file_path}}"></div>
            @endforeach
        </div>
    </div>
    <div class="swiper-container main swiper-container-horizontal">
        <div class="swiper-wrapper">
            @foreach($photos as $photo)
            <div class="swiper-slide"><img src="{{$photo->disp_file_path}}" style="width:100%;"></div>
            @endforeach
        </div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next swiper-button-disabled"></div>
    </div>
</div>

<script type="text/javascript">
window.addEventListener('DOMContentLoaded', function() {
    var swiperMain = new Swiper ('.p-detail-photo .main', {
        paginationClickable: true,
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        observer: true,
        observeParents: true
    });

    var swiperThumb = new Swiper('.p-detail-photo .thumbnail', {
        centeredSlides: true,
        slidesPerView: 3,
        slideToClickedSlide: true,
        observer: true,
        observeParents: true
    });
    swiperMain.params.control = swiperThumb;
    swiperThumb.params.control = swiperMain;
}, false);

</script>


<div id="modal-content" class="modal-contents">
    <input type="hidden" value="" id="type" >
    <div id="modal_open" class="p-print-modal">
      <header id="modal_header" style="text-align:right;">
        <button type="button" class="btn btn-default" data-dismiss="modal" id="modal-close" style="color:gray; font-weight:bold; font-size:30px; padding:0px; line-height:20px;">×</button>
      </header>
      <main id="modal_main">
        <p class="p-print-modal__title">レイアウトをお選びください。</p>
        <ul class="p-print-modal__menus d-flex">
          <li>
            <p class="p-print-modal__menus-icon">
              <a href="javascript:void(0);" class="btnPhotoPrint" data-n="4">
                <span class="p-print-modal__menus-text">４枚ずつ</span>
                <img src="/business/img/layout2x2.png" width="120">
              </a>
            </p>
          </li>
          <li>
          <p class="p-print-modal__menus-icon">
            <a href="javascript:void(0);" class="btnPhotoPrint" data-n="8">
                <span class="p-print-modal__menus-text">８枚ずつ</span>
                <img src="/business/img/layout2x4.png" width="120">
              </a>
            </p>
          </li>
          <li>
          <p class="p-print-modal__menus-icon">
            <a href="javascript:void(0);" class="btnPhotoPrint" data-n="18">
                <span class="p-print-modal__menus-text">１８枚ずつ</span>
                <img src="/business/img/layout3x6.png" width="120">
              </a>
            </p>
          </li>
        </ul>
      </main>
      <footer id="modal_footer">
      </footer>
    </div>
</div>
