constrict0r/slick_gallery_2.html

## slick_gallery_2.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"/>
</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"/>
	</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>