constrict0r/slick_gallery_3.html

## slick_gallery_3.html
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="slick.css"/>
  <link rel="stylesheet" type="text/css" href="slick-theme.css"/>
  <style type="text/css">
      .slick-slide { height: auto !important; }

      .responsive img { height: 60%; margin-left: auto; margin-right: auto; }

      .slider-img-responsive { width: 33%; margin-left: 4px; margin-right: 4px; }

      @media (max-width:499px) { .responsive img { height: auto; } }
      .responsive img { width: 96%; margin-bottom: 1em; }

      .slick-dots li button:before {
          font-size: 40px;
      }
  </style>
</head>

<body>
    <h2>Gallery</h2>
    <div class="slider responsive">
        <div class="slider-img-responsive"><img src="./skull_01.jpg"></a></div>
        <div class="slider-img-responsive"><img src="./skull_02.jpg"></a></div>
        <div class="slider-img-responsive"><img src="./skull_03.jpg"></a></div>
        <div class="slider-img-responsive"><img src="./skull_04.jpg"></a></div>
        <div class="slider-img-responsive"><img src="./skull_05.jpg"></a></div>
        <div class="slider-img-responsive"><img src="./skull_06.jpg"></a></div>
        <div class="slider-img-responsive"><img src="./skull_01.jpg"></a></div>
        <div class="slider-img-responsive"><img src="./skull_02.jpg"></a></div>
        <div class="slider-img-responsive"><img src="./skull_03.jpg"></a></div>
        <div class="slider-img-responsive"><img src="./skull_04.jpg"></a></div>
        <div class="slider-img-responsive"><img src="./skull_05.jpg"></a></div>
        <div class="slider-img-responsive"><img src="./skull_06.jpg"></a></div>
    </div>

    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="slick.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            var width = window.innerWidth || document.body.clientWidth;
            if (width < 480) {
                $('.responsive').slick({
                    dots: true,
                    arrows: true,
                    infinite: true,
                    speed: 300,
                    slidesToShow: 2,
                    slidesToScroll: 2,
                });
            }
            else if (width < 700 && width > 480){
                $('.responsive').slick({
                    rows: 2,
                    dots: true,
                    arrows: true,
                    infinite: true,
                    speed: 300,
                    slidesToShow: 2,
                    slidesToScroll: 2,
                });
            }
            else {
                 $('.responsive').slick({
                     rows: 2,
                     dots: true,
                     arrows: true,
                     infinite: true,
                     speed: 300,
                     slidesToShow: 3,
                     slidesToScroll: 3,
                 });
             }
        });
    </script>
</body>
</html>
	<html>
	<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="slick.css"/>
	<link rel="stylesheet" type="text/css" href="slick-theme.css"/>
	<style type="text/css">
	.slick-slide { height: auto !important; }

	.responsive img { height: 60%; margin-left: auto; margin-right: auto; }

	.slider-img-responsive { width: 33%; margin-left: 4px; margin-right: 4px; }

	@media (max-width:499px) { .responsive img { height: auto; } }
	.responsive img { width: 96%; margin-bottom: 1em; }

	.slick-dots li button:before {
	font-size: 40px;
	}
	</style>
	</head>

	<body>
	<h2>Gallery</h2>
	<div class="slider responsive">
	<div class="slider-img-responsive"><img src="./skull_01.jpg"></a></div>
	<div class="slider-img-responsive"><img src="./skull_02.jpg"></a></div>
	<div class="slider-img-responsive"><img src="./skull_03.jpg"></a></div>
	<div class="slider-img-responsive"><img src="./skull_04.jpg"></a></div>
	<div class="slider-img-responsive"><img src="./skull_05.jpg"></a></div>
	<div class="slider-img-responsive"><img src="./skull_06.jpg"></a></div>
	<div class="slider-img-responsive"><img src="./skull_01.jpg"></a></div>
	<div class="slider-img-responsive"><img src="./skull_02.jpg"></a></div>
	<div class="slider-img-responsive"><img src="./skull_03.jpg"></a></div>
	<div class="slider-img-responsive"><img src="./skull_04.jpg"></a></div>
	<div class="slider-img-responsive"><img src="./skull_05.jpg"></a></div>
	<div class="slider-img-responsive"><img src="./skull_06.jpg"></a></div>
	</div>

	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript" src="slick.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function() {
	var width = window.innerWidth \|\| document.body.clientWidth;
	if (width < 480) {
	$('.responsive').slick({
	dots: true,
	arrows: true,
	infinite: true,
	speed: 300,
	slidesToShow: 2,
	slidesToScroll: 2,
	});
	}
	else if (width < 700 && width > 480){
	$('.responsive').slick({
	rows: 2,
	dots: true,
	arrows: true,
	infinite: true,
	speed: 300,
	slidesToShow: 2,
	slidesToScroll: 2,
	});
	}
	else {
	$('.responsive').slick({
	rows: 2,
	dots: true,
	arrows: true,
	infinite: true,
	speed: 300,
	slidesToShow: 3,
	slidesToScroll: 3,
	});
	}
	});
	</script>
	</body>
	</html>