<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css">

<!--
<link rel="stylesheet" href="../plugin/slick/slick.css">
<link rel="stylesheet" href="../plugin/slick/slick-theme.css">
<link rel="stylesheet" href="../plugin/slick/style.css">
<link rel="stylesheet" href="../plugin/slick/prism.css">

<script src="../plugin/slick/slick.js"></script>
<script src="../plugin/slick/prism.js"></script>



-->
<style media="screen">
.slick-next {
    right: 0px;
    top: 40%;
}
.slick-prev {
    left: 0px;
    z-index: 99;
    top: 40%;
}
.slick-slider {
    margin-bottom: 0px;
}

@media (max-width:736px)
{
  .bg-article-kai{
    width: 100px;
    height: 100px;
  }
  .slick-next {
      top: 25%;
  }
  .slick-prev {
      top: 25%;
  }
}
.hov-img:hover{
  width: 270px;
  border: 2px solid #ffffff;
}
@media (max-width:576px)
{
  .bg-article-kai {
    width: 95px;
    height: 95px;
  }
  .fix-l1{
    font-size: 18px;
    height: 55px;word-wrap: break-word;overflow: hidden;text-overflow: ellipsis;width: 111px;
  }
}
.slick-center{opacity: 1;}
@media (min-width:768px)
{
  .bg-article-kai{width: 221px;height: 210px;}
}
@media (min-width:819.99px)
{
  .bg-article-kai{width: 236px;height: 210px;}
}

@media (min-width:1200px)
{
  .slick-prev:before {font-size: 50px;}
  .slick-prev {left: 14%;}
  .slick-next:before, .slick-prev:before{font-size: 50px;color: #000000;}
  .slick-next{right: 16%;}
  .bg-article-kai{width: 280px;height: 210px;}
  .hov-img:hover{
    width: 282px;
    border: 2px solid #ffffff;
  }
}
@media (min-width:1400px)
{
  .slick-prev:before {font-size: 50px;}
  .slick-prev {left: 14%;}
  .slick-next:before, .slick-prev:before{font-size: 50px;}
  .bg-article-kai{width: 280px;height: 210px;}
  .slick-next{right: 249px;}
}
</style>
<!-- /.article -->
<div class="container mt-5 mt-md-0 px-md-5">
   <div class="row px-md-5 mb-3 ">
     <div class="col-md-12 px-md-2 d-flex justify-content-between align-baseline" >
         <div class="">
           <h2 class="pb-0 mb-0">บทความ</h2>
           <!--<hr class="line1 my-1">-->
         </div>
         <a href="../article/index.php" class="text-decoration-none text-kai-link">ดูเพิ่มเติม</a>
     </div>
   </div>
</div>

<div class="px-0">
  <div class="row">
    <div class="main">
      <!--
      <div class="slider slider-for">
        <div><h3>1</h3></div>
        <div><h3>2</h3></div>
        <div><h3>3</h3></div>
        <div><h3>4</h3></div>
        <div><h3>5</h3></div>
      </div>
    -->
      <div class="slider center align-center text-center">
        <?php
        $list_at = array('table'=>'article','where'=>'status = 1 AND highlight = 1','order'=> "ORDER BY up_date DESC LIMIT 0 , 10");
    	$view_at = $view_db->view($list_at);
    	$result_at = $view_db->q_re($view_at);
    	while($row_at = $view_db->q_ro($result_at))
    	{
        $img_ar="../redbag/article/".$row_at['image'];
      // echo $image_class -> webpImage($img_ar, $quality = 100, $removeOld = false);
    		?>

        <!--
        <div><h3>1</h3></div>
      -->
      <div class="rounded-3 mx-1 mx-md-0" onclick="window.location.href='../article/info.php?id=<?php echo $row_at['id']; ?>'">
        <div class="bg-article-kai rounded-3 hov-img" style="background-image: url(<?php echo $image_class->webpImage2($img_ar); ?>);">
          <a href="../article/info.php?id=<?php echo $row_at['id']; ?>" class="text-decoration-none text-light"
            style="">
          </a>

        </div>
        <label class="ps-3 pt-2 fix-l1" style=""><?php echo $row_at['title']; ?></label>

      </div>

        <?php } ?>
      </div>
        <!--
        <img src="../redbag/article/<?php echo $row_at['image'];?>" width="100%" height="100%"
        class="img-responsive rounded-3 px-1" >
      <div class="action">
        <a href="#" data-slide="3">go to slide 3</a>
        <a href="#" data-slide="4">go to slide 4</a>
        <a href="#" data-slide="5">go to slide 5</a>
      </div>
    -->
    </div>
  </div>
</div>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
<script>
  if (window.matchMedia('(max-width: 767px)').matches) {
    $('.slider-for').slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: false,
      fade: true,
      asNavFor: '.slider-nav'
    });
    $('.slider-nav').slick({
      slidesToShow: 3,
      slidesToScroll: 1,
      asNavFor: '.slider-for',
      dots: true,
      focusOnSelect: true
    });

  }else if(window.matchMedia('(max-width: 990px)').matches){
    $('.slider-for').slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: false,
      fade: true,
      asNavFor: '.slider-nav'
    });
    $('.slider-nav').slick({
      slidesToShow: 4 ,
      slidesToScroll: 2,
      asNavFor: '.slider-for',
      dots: true,
      focusOnSelect: true
    });

  }else if(window.matchMedia('(max-width: 1199px)').matches){
    $('.slider-for').slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: false,
      fade: true,
      asNavFor: '.slider-nav'
    });
    $('.slider-nav').slick({
      slidesToShow: 4 ,
      slidesToScroll: 2,
      asNavFor: '.slider-for',
      dots: true,
      focusOnSelect: true
    });

  }else if(window.matchMedia('(max-width: 1400px)').matches){
    $('.slider-for').slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: false,
      fade: true,
      asNavFor: '.slider-nav'
    });
    $('.slider-nav').slick({
      slidesToShow: 4 ,
      slidesToScroll: 2,
      asNavFor: '.slider-for',
      dots: true,
      focusOnSelect: true
    });

  } else {
    $('.slider-for').slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: false,
      fade: true,
      asNavFor: '.slider-nav'
    });
    $('.slider-nav').slick({
      slidesToShow: 5,
      slidesToScroll: 3,
      asNavFor: '.slider-for',
      dots: true,
      focusOnSelect: true
    });

  }
  $('.center').slick({
    centerMode: true,
    centerPadding: '100px',
    slidesToShow: 4,
    dots: true,
    focusOnSelect: true,
    responsive: [
      {
        breakpoint: 1300,
        settings: {
          arrows: false,
          centerMode: true,
          centerPadding: '40px',
          slidesToShow: 4
        }
      },
      {
        breakpoint: 992,
        settings: {
          arrows: false,
          centerMode: true,
          centerPadding: '40px',
          slidesToShow: 3
        }
      },
      {
        breakpoint: 768.99,
        settings: {
          arrows: false,
          centerMode: true,
          centerPadding: '40px',
          slidesToShow: 3
        }
      },
      {
        breakpoint: 576,
        settings: {
          arrows: false,
          centerMode: true,
          centerPadding: '40px',
          slidesToShow: 4,
        }
      },
      {
        breakpoint: 480,
        settings: {
          arrows: false,
          centerMode: true,
          centerPadding: '40px',
          slidesToShow: 3,
        }
      },
      {
        breakpoint: 290,
        settings: {
          arrows: false,
          centerMode: true,
          centerPadding: '10px',
          slidesToShow: 2,
        }
      }
    ]
  });


$('a[data-slide]').click(function(e) {
  e.preventDefault();
  var slideno = $(this).data('slide');
  $('.slider-nav').slick('slickGoTo', slideno - 1);
});
</script>