<?php 
/*
Template Name: 产品详情
Author: 畔游科技  
Version: 1.0  
*/
get_header(); ?>
<?php if (have_posts()) : while (have_posts()) : the_post();  ?>
<div id="luxy">
    <main id="main">
        <div class="g_body n_pro_d">
            <div class="n_banner banner">
                <div class="img">
                    <div class="g_bg" style="background-image: url('<?php echo of_get_option('banner_products'); ?>')">
                    </div>
                </div>
            </div>
            <div class="n_top">
                <div class="g_w">
                    <div class="n_breadcrumb">
                        <a href="<?php echo esc_url( home_url( '/' ) ); ?>">首页</a>><a href="/product">产品与服务</a>><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                    </div>
                </div>
            </div>
            <div class="n_con">
                <div class="con1" id="link1">
                    <div class="top">
                        <div class="g_w">
                                <div class="flex">
                                    <div class="detail-pro-left">
                                    <?php if (get_field('pro-imgs')) { ?>
                                        <?php $my_arr = get_field('pro-imgs'); ?>
                                            <img src="<?php echo $my_arr[0][url]; ?>" alt="<?php the_title(); ?>" id="pre-img" />
                                    <?php } else { ?>
                                        <img src="<?php echo wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'large')[0]; ?>"  alt="<?php the_title(); ?>" />
                                    <?php } ?>
                                        <?php if (get_field('pro-imgs')) { ?>
                                            <div class="product-swiper">
                                                <div class="swiper-container">
                                                    <div class="swiper-wrapper">
                                                    <?php
                                                        for($i=0;$i<count($my_arr);$i++){
                                                            $arr = $my_arr[$i];
                                                            $n=$i+1;
                                                        echo "<div class='swiper-slide'><img src='$arr[url]' alt='the_title();' /></div>";
                                                        }
                                                    ?>
                                                    </div>
                                                </div>
                                            </div> 
                                    <?php } ?>
                                        </div>
                                    </div>
                                    <div class="detail-pro-right">
                                        <div class="detail-pro-info">
                                            <div class="detail-pro-title">
                                                <h1><?php the_title(); ?></h1>
                                                <div class="detail-meta">
                                                    <?php the_field('miaoshu'); ?>
                                                </div>
                                            </div>
                                            <div class="detail-pro-link">
                                                <a href="/contact" title="联系我们">联系我们</a>
                                                <a href="/product" title="返回列表">返回列表</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="con2">
                    <div class="g_w">
                        <div class="detail-btm">
                            <div class="detail-pro-editor">
                                <h3>参数</h3>
                            </div>
                            <div class="chl-editor">
                                <?php the_content(); ?>
                            </div>
                        </div>
                    </div>
                    
                </div>
            </div>
        </div>
    </main>
</div>
<?php endwhile; endif; ?>
<script>
	document.getElementById("head_li_2").className = "active";
</script>
<link href="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/Swiper/4.5.0/css/swiper.min.css" type="text/css" rel="stylesheet" />
<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/Swiper/4.5.0/js/swiper.min.js" type="application/javascript"></script>
<script>
    var proSwiper = new Swiper('.product-swiper .swiper-container', {
        spaceBetween: 15,
        // autoplay: true,
        loop: true,
        speed: 2000,
        slidesPerView: 3,
        navigation: {
            nextEl: '.pro-imgs .swiper-button-next',
            prevEl: '.pro-imgs .swiper-button-prev',
        },
        breakpoints: {
            960: {
                spaceBetween: 10,
            },
        }
    });

    
    

    $(".swiper-container .swiper-slide img").click(function() {
        var preUrl = $(this).attr("src");
        $('#pre-img').attr("src",preUrl);
    })
</script>
<?php get_footer(); ?>