constrict0r/slick_gallery_4.html

## slick_gallery_4.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" src="smartresize.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {

            _slick_create();

            $(window).smartresize(function(){
                $('.responsive').slick('unslick');
                _slick_create();
            });

            function _slick_create() {

                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,
                     });
                 }

                return false;
            }
        });
    </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" src="smartresize.js"></script>
	<script type="text/javascript">
	$(document).ready(function() {

	_slick_create();

	$(window).smartresize(function(){
	$('.responsive').slick('unslick');
	_slick_create();
	});

	function _slick_create() {

	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,
	});
	}

	return false;
	}
	});
	</script>
	</body>
	</html>