{include file=comm/head.html}
{include file=comm/top.html}
<div class="container pages">
  {include file=comm/position.html}
  <div class="row">
    <div class="col-12 col-lg-6 mb-5">
      <div class="view">
        <a class="arrow-left" href="#"></a>
        <a class="arrow-right" href="#"></a>
        <div class="swiper-container">
          <div class="swiper-wrapper" >
            <div class="swiper-slide">
              <img src="{content:ico}">
            </div>
            {pboot:pics num=5 id={content:id}}
            <div class="swiper-slide">
              <img src="[pics:src]">
            </div>
            {/pboot:pics}
          </div>
        </div>
      </div>
      <div class="preview mt-3">
        <a class="arrow-left" href="#"></a>
        <a class="arrow-right" href="#"></a>
        <div class="swiper-container" >
          <div class="swiper-wrapper">
            <div class="swiper-slide active-nav swiper-slide-active">
              <img src="{content:ico}">
            </div>
            {pboot:pics num=10 id={content:id}}
            <div class="swiper-slide">
              <img src="[pics:src]" alt="[pics:title]">
            </div>
            {/pboot:pics}
          </div>
        </div>
      </div>
    </div>

  <div class="col-24 col-lg-6 mb-4 pr-3">
  <h2 class="border-bottom pb-2 fs-sm-28 fs-20">{content:title}</h2>    
  <table class="table-style2">
    <tbody>
    <tr>
      <td>{plang:equip_brand}:</td>
      <td>{content:ext_equip_brand}</td>
    </tr>
    <tr>
      <td>{plang:equip_type}:</td>
      <td>{content:ext_equip_type1}</td>
    </tr>
    <tr>
      <td>{plang:equip_model}:</td>
      <td>{content:ext_equip_model}</td>
    </tr>
    <tr>
      <td>{plang:equip_price}:</td>
      <td>{content:ext_equip_price}</td>
    </tr>
    </tbody>
  </table>
  {include file=comm/product_contact.html}
  </div>

  </div>

  <h5 class="border-bottom border-info pb-2 mb-2"><i class="fa fa-sliders" aria-hidden="true"></i>{plang:product_detail}</h5>
  <div class="content">{content:content}</div>
  <h5 class="border-bottom border-info pb-2 mb-2"></h5>

  <div class="text-secondary lh-2">
    <p class="text-left position d-none d-md-block">{plang:page_pre}:{content:precontent}</p>
    <p class="text-left position d-none d-md-block">{plang:page_next}:{content:nextcontent}</p>
  </div>
</div>

{include file=comm/comment.html}

<!--<script type="text/javascript" src="{ver({pboot:sitepath}/static/js/qs2.js)}"></script>-->
<script src="{pboot:sitepath}/static/public/swiper-4.3.5/js/swiper.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
  var viewSwiper;
  var previewSwiper;

  function updateNavPosition() {
    if (!viewSwiper || !previewSwiper) {
      return;
    }
    var realIndex = typeof viewSwiper.realIndex === "number" ? viewSwiper.realIndex : viewSwiper.activeIndex || 0;
    var previewSlides = previewSwiper.slides || [];

    Array.prototype.forEach.call(previewSlides, function (slide, index) {
      if (index === realIndex) {
        slide.classList.add("active-nav");
      } else {
        slide.classList.remove("active-nav");
      }
    });

    var activeSlide = previewSlides[realIndex];
    if (!activeSlide) {
      return;
    }

    var perView = Math.floor(previewSwiper.width / activeSlide.offsetWidth) || 1;
    var maxIndex = previewSwiper.activeIndex + perView - 1;

    if (realIndex > maxIndex) {
      previewSwiper.slideTo(realIndex - perView + 1);
    } else if (realIndex < previewSwiper.activeIndex) {
      previewSwiper.slideTo(realIndex);
    }
  }

  previewSwiper = new Swiper(".preview .swiper-container", {
    slidesPerView: "auto",
    spaceBetween: 10,
    allowTouchMove: false,
    watchSlidesVisibility: true
  });

  viewSwiper = new Swiper(".view .swiper-container", {
    loop: true,
    autoplay: {
      delay: 3000,
      disableOnInteraction: false
    },
    on: {
      init: updateNavPosition,
      slideChangeTransitionStart: updateNavPosition
    }
  });

  var prevTriggers = document.querySelectorAll(".view .arrow-left, .preview .arrow-left");
  Array.prototype.forEach.call(prevTriggers, function (trigger) {
    trigger.addEventListener("click", function (event) {
      event.preventDefault();
      viewSwiper.slidePrev();
    });
  });

  var nextTriggers = document.querySelectorAll(".view .arrow-right, .preview .arrow-right");
  Array.prototype.forEach.call(nextTriggers, function (trigger) {
    trigger.addEventListener("click", function (event) {
      event.preventDefault();
      viewSwiper.slideNext();
    });
  });

  previewSwiper.on("tap", function () {
    if (typeof previewSwiper.clickedIndex !== "undefined" && previewSwiper.clickedIndex !== null) {
      if (typeof viewSwiper.slideToLoop === "function") {
        viewSwiper.slideToLoop(previewSwiper.clickedIndex);
      } else {
        viewSwiper.slideTo(previewSwiper.clickedIndex);
      }
    }
  });

  updateNavPosition();
});
</script>

{include file=comm/foot.html}