GeoffreyDijkstra/flex-slider.html

## flex-slider.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>(Almost) Pure CSS Flex-Slider Demo</title>
    <style>
        * {
            box-sizing: border-box;
        }

        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 50px;
        }

        .slider {
            /* What ever you want (can have media queries) */
            width: 600px;
            height: 400px;
            /* required */
            overflow: hidden;
            /* optional: for the looks of the dots */
            position: relative;
        }

        /* optional: for the dots */
        .slider .dots {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            z-index: 1;
        }

        .slider .dots .dot {
            flex: 0 0 auto;
            width: 20px;
            height: 20px;
            padding: 5px;
            position: relative;
        }

        .slider .dots .dot:before {
            display: block;
            content: "";
            width: 100%;
            height: 100%;
            border-radius: 100%;
            background-color: gray;
            transition: background-color 1s ease;
        }

        /* required (always the same) */
        .slides {
            display: flex;
            position: relative;
            transition: left 2.5s ease;
            width: 100%;
            height: 100%;
        }

        /* required, (always 100%) slide content can be styled to wishes. */
        .slide {
            flex: 0 0 auto;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        /* slide content, can be anything, in this case simply an image. */
        .slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* This sliding magic: Should match the amount of divs, Left-to-right animation. */
        input[name="slider-1"] {
            display: none;
        }

        #slider-1-1:checked ~ [data-name="slider-1"] .slides {
            left: 0;
        }

        #slider-1-2:checked ~ [data-name="slider-1"] .slides {
            left: -100%;
        }

        #slider-1-3:checked ~ [data-name="slider-1"] .slides {
            left: -200%;
        }

        #slider-1-4:checked ~ [data-name="slider-1"] .slides {
            left: -300%;
        }

        #slider-1-5:checked ~ [data-name="slider-1"] .slides {
            left: -400%;
        }

        /*
         sass/scss loop of above would be:
         (where 5 is the maximum of supported slides, it won't break if there are less slides in the html)

         @for $i from 1 through 5 {
            #slider-1-#{$i}:checked {
                ~ [data-name="slider-1"].slides {
                    left: -100% * ($i - 1);
                }
            }
         */

        /* optional: for dots checked animation */
        #slider-1-1:checked ~ [data-name="slider-1"] [for="slider-1-1"]:before {
            background-color: red;
        }

        #slider-1-2:checked ~ [data-name="slider-1"] [for="slider-1-2"]:before {
            background-color: red;
        }

        #slider-1-3:checked ~ [data-name="slider-1"] [for="slider-1-3"]:before {
            background-color: red;
        }

        #slider-1-4:checked ~ [data-name="slider-1"] [for="slider-1-4"]:before {
            background-color: red;
        }

        #slider-1-5:checked ~ [data-name="slider-1"] [for="slider-1-5"]:before {
            background-color: red;
        }
    </style>
    <!-- example script, for changing slide automatically every x seconds. -->
    <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
    <script type="text/javascript">
        'use strict';

        $(function () {
            var $inputs = $('input[name="slider-1"]');
            setInterval(function () {
                var index = $inputs.index($inputs.find(':checked')[0]);
                var next = $inputs.get(index + 1) || $inputs.first().get(0);
                next.checked = true;
            }, 5000); // every 5 seconds.
        });
    </script>
</head>
<body>
<!-- should match the amount of divs -->
<input type="radio" name="slider-1" id="slider-1-1" checked="checked" />
<input type="radio" name="slider-1" id="slider-1-2" />
<input type="radio" name="slider-1" id="slider-1-3" />
<input type="radio" name="slider-1" id="slider-1-4" />
<input type="radio" name="slider-1" id="slider-1-5" />
<div class="slider" data-name="slider-1">
    <div class="slides" data-trigger="bar">
        <div class="slide">
            <img src="https://picsum.photos/1920/1080?v=1" />
        </div>
        <div class="slide">
            <img src="https://picsum.photos/1920/1080?v=2" />
        </div>
        <div class="slide">
            <img src="https://picsum.photos/1920/1080?v=3" />
        </div>
        <div class="slide">
            <img src="https://picsum.photos/1920/1080?v=4" />
        </div>
        <div class="slide">
            <img src="https://picsum.photos/1920/1080?v=5" />
        </div>
    </div>
    <!-- optional, dots on slider, should match amount of divs -->
    <div class="dots">
        <label class="dot" for="slider-1-1"></label>
        <label class="dot" for="slider-1-2"></label>
        <label class="dot" for="slider-1-3"></label>
        <label class="dot" for="slider-1-4"></label>
        <label class="dot" for="slider-1-5"></label>
    </div>
</div>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<title>(Almost) Pure CSS Flex-Slider Demo</title>
	<style>
	* {
	box-sizing: border-box;
	}

	html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 50px;
	}

	.slider {
	/* What ever you want (can have media queries) */
	width: 600px;
	height: 400px;
	/* required */
	overflow: hidden;
	/* optional: for the looks of the dots */
	position: relative;
	}

	/* optional: for the dots */
	.slider .dots {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	z-index: 1;
	}

	.slider .dots .dot {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	padding: 5px;
	position: relative;
	}

	.slider .dots .dot:before {
	display: block;
	content: "";
	width: 100%;
	height: 100%;
	border-radius: 100%;
	background-color: gray;
	transition: background-color 1s ease;
	}

	/* required (always the same) */
	.slides {
	display: flex;
	position: relative;
	transition: left 2.5s ease;
	width: 100%;
	height: 100%;
	}

	/* required, (always 100%) slide content can be styled to wishes. */
	.slide {
	flex: 0 0 auto;
	width: 100%;
	height: 100%;
	overflow: hidden;
	}

	/* slide content, can be anything, in this case simply an image. */
	.slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	}

	/* This sliding magic: Should match the amount of divs, Left-to-right animation. */
	input[name="slider-1"] {
	display: none;
	}

	#slider-1-1:checked ~ [data-name="slider-1"] .slides {
	left: 0;
	}

	#slider-1-2:checked ~ [data-name="slider-1"] .slides {
	left: -100%;
	}

	#slider-1-3:checked ~ [data-name="slider-1"] .slides {
	left: -200%;
	}

	#slider-1-4:checked ~ [data-name="slider-1"] .slides {
	left: -300%;
	}

	#slider-1-5:checked ~ [data-name="slider-1"] .slides {
	left: -400%;
	}

	/*
	sass/scss loop of above would be:
	(where 5 is the maximum of supported slides, it won't break if there are less slides in the html)

	@for $i from 1 through 5 {
	#slider-1-#{$i}:checked {
	~ [data-name="slider-1"].slides {
	left: -100% * ($i - 1);
	}
	}
	*/

	/* optional: for dots checked animation */
	#slider-1-1:checked ~ [data-name="slider-1"] [for="slider-1-1"]:before {
	background-color: red;
	}

	#slider-1-2:checked ~ [data-name="slider-1"] [for="slider-1-2"]:before {
	background-color: red;
	}

	#slider-1-3:checked ~ [data-name="slider-1"] [for="slider-1-3"]:before {
	background-color: red;
	}

	#slider-1-4:checked ~ [data-name="slider-1"] [for="slider-1-4"]:before {
	background-color: red;
	}

	#slider-1-5:checked ~ [data-name="slider-1"] [for="slider-1-5"]:before {
	background-color: red;
	}
	</style>
	<!-- example script, for changing slide automatically every x seconds. -->
	<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
	<script type="text/javascript">
	'use strict';

	$(function () {
	var $inputs = $('input[name="slider-1"]');
	setInterval(function () {
	var index = $inputs.index($inputs.find(':checked')[0]);
	var next = $inputs.get(index + 1) \|\| $inputs.first().get(0);
	next.checked = true;
	}, 5000); // every 5 seconds.
	});
	</script>
	</head>
	<body>
	<!-- should match the amount of divs -->
	<input type="radio" name="slider-1" id="slider-1-1" checked="checked" />
	<input type="radio" name="slider-1" id="slider-1-2" />
	<input type="radio" name="slider-1" id="slider-1-3" />
	<input type="radio" name="slider-1" id="slider-1-4" />
	<input type="radio" name="slider-1" id="slider-1-5" />
	<div class="slider" data-name="slider-1">
	<div class="slides" data-trigger="bar">
	<div class="slide">
	<img src="https://picsum.photos/1920/1080?v=1" />
	</div>
	<div class="slide">
	<img src="https://picsum.photos/1920/1080?v=2" />
	</div>
	<div class="slide">
	<img src="https://picsum.photos/1920/1080?v=3" />
	</div>
	<div class="slide">
	<img src="https://picsum.photos/1920/1080?v=4" />
	</div>
	<div class="slide">
	<img src="https://picsum.photos/1920/1080?v=5" />
	</div>
	</div>
	<!-- optional, dots on slider, should match amount of divs -->
	<div class="dots">
	<label class="dot" for="slider-1-1"></label>
	<label class="dot" for="slider-1-2"></label>
	<label class="dot" for="slider-1-3"></label>
	<label class="dot" for="slider-1-4"></label>
	<label class="dot" for="slider-1-5"></label>
	</div>
	</div>
	</body>
	</html>