<style media="screen">
  .slick-next3:before, .slick-prev3:before{font-size: 30px;color: #000;}

  @media (max-width: 540px) {
    .slick-prev {
      top: 68%;
      left: 77%;
    }
    .slick-next {
      top: 68%;
      right: 5%;
    }
    .slick-next:before, .slick-prev:before {
      color: #6645b5;
    }
    
  }
  
  @media (min-width: 1900px) {
    .box-shop {
      min-height: 9.5rem;
      width: 9.5rem;
    }
  }
  @media (min-width: 2049px) {
    .box-shop {
      min-height: 8.5rem;
      width: 8.5rem;
    }
  }
  @media (min-width: 2700px) {
    .box-shop {
      min-height: 10.5rem;
      width: 10.5rem;
    }
  }
  @media (max-width: 1899px) {
    .box-shop {
      min-height: 7.5rem;
      width: 7.5rem;
    }
  }
  @media (max-width: 1400px) {
    .box-shop {
      min-height: 8rem;
      width: 8rem;
    }
  }
  @media (max-width: 1300px) {
    .box-shop {
      min-height: 9rem;
      width: 9rem;
    }
  }
  @media (max-width: 1000px) {
    .box-shop {
        min-height: 6.5rem;
        width: 6.5rem;
        margin-bottom: 6px;
    }
  }
  @media (max-width: 700px) {
    .box-shop {
      min-height: 6rem;
      width: 6rem;
      margin-bottom: 4px;
    }
  }
  @media (max-width: 460px) {
    .box-shop {
      min-height: 4.5rem;
      width: 4.5rem;
      margin-bottom: 4px;
    }
  }
  @media (max-width: 400px) {
    .box-shop {
      min-height: 4rem;
      width: 4rem;
      margin-bottom: 4px;
    }
  }
  @media (max-width: 380px) {
    .box-shop {
      min-height: 3.8rem;
      width: 3.8rem;
      margin-bottom: 4px;
    }
  }
  @media (max-width: 280px) {
    .box-shop {
      min-height: 2.8rem;
      width: 2.8rem;
      margin-bottom: 4px;
    }
  }
  
</style>
<?php
$limit_store = 24;
$start_store = 0;
if($server_mo=='?1'){
  $limit_store = 8;
}
$list_sho = array('table'=>'shop',
'where'=>'shop.status = 1 AND shop.status_op = 1 AND shop.activate = 1',
'order'=> "ORDER BY RAND() LIMIT  ".$start_store.",".$limit_store);
$view_sho = $view_db->view($list_sho);
$result_sho = $view_db->q_re($view_sho);
$result_sho2 = $view_db->q_nr($result_sho);

$store_de = array();
$s = 0;
while($row_sho = $view_db->q_ro($result_sho))
{
    $phonenumber = $row_sho['carregistration'];
    $row_mobilenetwork = $actiondata_db->q_one('stylecar','id = "'.$row_sho['styleid'].'"','image');

    $list_shr = array('table'=>'shop','where'=>'id = "'.$row_sho['id_shop'].'" ');
    $view_shr = $view_db->view($list_shr);
    $row_shr = $view_db->q($view_shr);

    $countber =  $util_class->countber($row_shr['id']);
    $txt_phonenumber =  $Phone_class->phonecomma($row_shr['phone']);

    $codeshop = $row_sho['codeshop'];
    $image_profile = $row_sho['image_profile'];
    $image_profile2 = imgprofile_shophi($image_profile);

    $store_de[$s]['codeshop'] = $codeshop;
    $store_de[$s]['image_profile2'] = $image_profile2;
    $s++;
}

?>

  <div class="row text-spacing-md pt-2 pt-lg-1 pt-0 pt-lg-5">
    <div class="col-md-12 text-center justify-content-center HeadTextXL2 text-white mb-lg-3" >
      ร้านขายเบอร์
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-12 col-xxl-11">
      <div class="slider centerstore align-center text-center" style="min-height: 258px;">
        <?php for ($i1=0; $i1 < count($store_de); $i1++) { ?>
          <div class="">
            <div class="box-ber px-1 mb-3 d-lg-block d-none">
              <?php if ($i1 % 2 == 0) { ?>
                <?php  for ($i3=$i1; $i3 < $i1+1; $i3++) { ?>
                  <a href="../shop/<?php echo $store_de[$i3]['codeshop']; ?>" class="position-relative" role="bottom" tabindex="0">
                    <div class="rounded-sim border-2 border-danger-sim box-shop"  onclick="window.location.href='../shop/<?php echo $store_de[$i3]['codeshop']; ?>'" accesskey="
                      "style="text-align: center;background-image: url(<?php echo $store_de[$i3]['image_profile2']; ?>);  " role="button" tabindex="0">
                    </div>
                  </a>
                <?php }  ?>
                <?php for ($i4=$i1+1; $i4 < $i1+2; $i4++) { ?>
                  <a href="../shop/<?php echo $store_de[$i4]['codeshop']; ?>" class="position-relative" style="top:13px;" role="bottom" tabindex="0">
                    <div class="rounded-sim border-2 border-danger-sim box-shop"  onclick="window.location.href='../shop/<?php echo $store_de[$i4]['codeshop']; ?>'" accesskey="
                      "style="text-align: center;background-image: url(<?php echo $store_de[$i4]['image_profile2']; ?>);  " role="button" tabindex="0">
                    </div>
                  </a>
                <?php } ?>
              <?php } ?>
            </div>


            <div class="col-3 col-md-3 d-lg-none d-block px-1">
              <div class="box-ber px-1 mb-3 ">
                <?php if ($i1 % 2 == 0) { ?>
                  <?php  for ($i5=$i1; $i5 < $i1+1; $i5++) { ?>
                    <a href="../shop/<?php echo $store_de[$i5]['codeshop']; ?>">
                      <div class="rounded-sim border-2 border-danger-sim box-shop"  onclick="window.location.href='../shop/<?php echo $store_de[$i5]['codeshop']; ?>'" accesskey="
                        "style="text-align: center;background-image: url('<?php echo $store_de[$i5]['image_profile2']; ?>');  " role="button" tabindex="0">
                      </div>
                    </a>
                  <?php }  ?>
                  <?php for ($i6=$i1+1; $i6 < $i1+2; $i6++) { ?>
                    <a href="../shop/<?php echo $store_de[$i6]['codeshop']; ?>">
                      <div class="rounded-sim border-2 border-danger-sim box-shop"  onclick="window.location.href='../shop/<?php echo $store_de[$i6]['codeshop']; ?>'" accesskey="
                        "style="text-align: center;background-image: url('<?php echo $store_de[$i6]['image_profile2']; ?>');  " role="button" tabindex="0">
                      </div>
                    </a>
                  <?php }  ?>
                <?php }  ?>
              </div>
            </div>

          </div>
        <?php  $i1++; } ?>


      </div>
    </div>
    
  </div>

<script>

  $('.centerstore').slick({
    centerMode: false,
    centerPadding: '3px',
    slidesToShow: 6,
    dots: true,
    arrows: false,
    focusOnSelect: true,
    responsive: [
      {
        breakpoint: 2100,
        settings: {
          arrows: true,
          centerMode: false,
					dots: false,
          centerPadding: '15px',
          slidesToShow: 8
        }
      },
      {
        breakpoint: 1850,
        settings: {
          arrows: true,
          centerMode: false,
					dots: false,
          centerPadding: '15px',
          slidesToShow: 9
        }
      },
      {
        breakpoint: 1400,
        settings: {
          arrows: true,
          centerMode: false,
					dots: false,
          centerPadding: '15px',
          slidesToShow: 8
        }
      },
      {
        breakpoint: 1300,
        settings: {
          arrows: true,
          centerMode: false,
					dots: false,
          centerPadding: '0px',
          slidesToShow: 7
        }
      },
      {
        breakpoint: 1100,
        settings: {
          arrows: true,
          centerMode: false,
					dots: false,
          centerPadding: '3px',
          slidesToShow: 6
        }
      },
      {
        breakpoint: 992,
        settings: {
          arrows: true,
          centerMode: false,
					dots: false,
          centerPadding: '3px',
          slidesToShow: 3
        }
      },
      {
        breakpoint: 940,
        settings: {
          arrows: true,
          centerMode: true,
					dots: false,
          centerPadding: '3px',
          slidesToShow: 6
        }
      },
      {
        breakpoint: 820,
        settings: {
          arrows: true,
          centerMode: true,
					dots: false,
          centerPadding: '0px',
          slidesToShow: 6,
        }
      },
      {
        breakpoint: 768,
        settings: {
          arrows: true,
          centerMode: true,
					dots: false,
          centerPadding: '0px',
          slidesToShow: 7,
        }
      },
      {
        breakpoint: 700,
        settings: {
          arrows: true,
          centerMode: true,
					dots: false,
          centerPadding: '0px',
          slidesToShow: 5,
        }
      }
    ]
  });

</script>