Develop Reference

Setting up a Slick Carousel, containing sliders as individual elements

I want to create a carousel like this one here:
https://codepen.io/newrya/pen/eYMZdKe
The catch is, I want to make an auto play carousel using "slick" and want the above slider as individual elements instead of images. This is my initial Code. So, instead of these img elements inside div having class horizontal. I want the above slider as the elements.
$('.horizontal').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 100,
});
#slider img{
width: 350px;
height: 350px;
margin-right: 100px;
}
<section id="slider" style="background-color:#fefefe;height: 800px;">
<div class="horizontal">
<img src="images/imags/1.jpg" class="before_after">
<img src="images/imags/2.jpg" class="before_after">
<img src="images/imags/3.jpg" class="before_after">
<img src="images/imags/4.jpg" class="before_after">
<img src="images/imags/5.jpg" class="before_after">
<img src="images/imags/6.jpg" class="before_after">
<img src="images/imags/8.jpg" class="before_after">
<img src="images/imags/9.jpg" class="before_after">
<img src="images/imags/10.jpg" class="before_after">
<img src="images/imags/11.jpg" class="before_after">
<img src="images/imags/12.jpg" class="before_after">
<img src="images/imags/13.jpg" class="before_after">
<img src="images/imags/14.jpg" class="before_after">
<img src="images/imags/15.jpg" class="before_after">
<img src="images/imags/16.jpg" class="before_after">
</div>
</section>
I copied the codepen code and replaced it with my img elements and made some changes with the css code and pasted it in my styles sheet.
This is the code:
const slider = document.querySelector('#image-slider');
const wrapper = document.querySelector('.img-wrapper');
const handle = document.querySelector('.handle');
slider.addEventListener("mousemove", sliderMouseMove);
slider.addEventListener("touchmove", sliderMouseMove);
function sliderMouseMove(event) {
if (isSliderLocked) return;
const sliderLeftX = slider.offsetLeft;
const sliderWidth = slider.clientWidth;
const sliderHandleWidth = handle.clientWidth;
let mouseX = (event.clientX || event.touches[0].clientX) - sliderLeftX;
if (mouseX < 0) mouseX = 0;
else if (mouseX > sliderWidth) mouseX = sliderWidth;
wrapper.style.width = `${((1 - mouseX/sliderWidth) * 100).toFixed(4)}%`;
handle.style.left = `calc(${((mouseX/sliderWidth) * 100).toFixed(4)}% - ${sliderHandleWidth/2}px)`;
}
let isSliderLocked = false;
slider.addEventListener("mousedown", sliderMouseDown);
slider.addEventListener("touchstart", sliderMouseDown);
slider.addEventListener("mouseup", sliderMouseUp);
slider.addEventListener("touchend", sliderMouseUp);
slider.addEventListener("mouseleave", sliderMouseLeave);
function sliderMouseDown(event) {
if (isSliderLocked) isSliderLocked = false;
sliderMouseMove(event);
}
function sliderMouseUp() {
if (!isSliderLocked) isSliderLocked = true;
}
function sliderMouseLeave() {
if (isSliderLocked) isSliderLocked = true;
}
$('.horizontal').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 100,
});
#slider img {
width: 350px;
height: 350px;
margin-right: 100px;
}
.horizontal {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
:root {
--image-slider-width: min(80vw, 768px);
--image-slider-handle-width: 50px;
}
.horizontal {
width: 100%;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-family: sans-serif;
}
#image-slider {
position: relative;
width: var(--image-slider-width);
overflow: hidden;
border-radius: 1em;
box-shadow: -4px 5px 10px 1px gray;
cursor: col-resize;
}
#image-slider img {
display: block;
width: var(--image-slider-width);
height: auto;
max-height: 80vh;
object-fit: cover;
pointer-events: none;
user-select: none;
}
#image-slider .img-wrapper {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 50%;
overflow: hidden;
z-index: 1;
}
#image-slider .img-wrapper img {
position: absolute;
top: 0;
right: 0;
height: 100%;
filter: grayscale(100%);
transform: scale(1.2);
}
#image-slider .handle {
border: 0px solid red;
position: absolute;
top: 0;
left: calc(50% - var(--image-slider-handle-width)/2);
width: var(--image-slider-handle-width);
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
user-select: none;
z-index: 2;
}
#image-slider .handle-circle {
width: var(--image-slider-handle-width);
height: var(--image-slider-handle-width);
color: white;
border: 2px solid white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: space-evenly;
}
#image-slider .handle-line {
width: 2px;
flex-grow: 1;
background: white;
}
#media (max-width: 768px) {
:root {
--image-slider-width: 90vw;
}
}
<section id="slider" style="background-color:#fefefe;height: 800px;">
<div class="horizontal">
<div id="image-slider">
<img src="https://images.pexels.com/photos/3923387/pexels-photo-3923387.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2">
<div class="img-wrapper">
<img src="https://images.pexels.com/photos/3923387/pexels-photo-3923387.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2">
</div>
<div class="handle">
<div class="handle-line"></div>
<div class="handle-circle">
&#171 &#187
</div>
<div class="handle-line"></div>
</div>
</div>
<div id="image-slider">
<img src="https://images.pexels.com/photos/3923387/pexels-photo-3923387.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2">
<div class="img-wrapper">
<img src="https://images.pexels.com/photos/3923387/pexels-photo-3923387.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2">
</div>
<div class="handle">
<div class="handle-line"></div>
<div class="handle-circle">
&#171 &#187
</div>
<div class="handle-line"></div>
</div>
</div>
<div id="image-slider">
<img src="https://images.pexels.com/photos/3923387/pexels-photo-3923387.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2">
<div class="img-wrapper">
<img src="https://images.pexels.com/photos/3923387/pexels-photo-3923387.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2">
</div>
<div class="handle">
<div class="handle-line"></div>
<div class="handle-circle">
&#171 &#187
</div>
<div class="handle-line"></div>
</div>
</div>
<div id="image-slider">
<img src="https://images.pexels.com/photos/3923387/pexels-photo-3923387.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2">
<div class="img-wrapper">
<img src="https://images.pexels.com/photos/3923387/pexels-photo-3923387.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2">
</div>
<div class="handle">
<div class="handle-line"></div>
<div class="handle-circle">
&#171 &#187
</div>
<div class="handle-line"></div>
</div>
</div>
</section>
For some, reason, in class "handle-circle", the code after '171' is not valid(it turns green).
The second problem I am facing is, the codepen slider doesn't work when I replaced it with the img elements. The 'mousemove' event is of no use when using it in carousels. How do I change that?

I think you might have issues with the slick mouse over binding conflicting with the mouse over your image, as a workaround you could iframe it and it will work like so
$(document).ready(function() {
$('.carousel').slick({
slidesToShow: 3,
dots: true,
centerMode: true,
});
});
html,
body {
background-color: #e74c3c;
}
.wrapper {
width: 100%;
padding-top: 20px;
text-align: center;
}
h2 {
font-family: sans-serif;
color: #fff;
}
.carousel {
width: 90%;
margin: 0px auto;
}
.slick-slide {
margin: 10px;
}
.slick-slide img {
width: 100%;
border: 2px solid #fff;
}
.wrapper .slick-dots li button:before {
font-size: 20px;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<div class="wrapper">
<h2>Slick Carousel Example
<h2>
<div class="carousel">
<div>
<iframe width="100%" height="300" style="margin-top: -210px;" src="https://codepen.io/ptahume/full/YzaNzjy" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
</div>
<div> <iframe width="100%" height="300" style="margin-top: -210px;" src="https://codepen.io/ptahume/full/YzaNzjy" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe></div>
<div> <iframe width="100%" height="300" style="margin-top: -210px;" src="https://codepen.io/ptahume/full/YzaNzjy" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe></div>
<div><img src="https://picsum.photos/300/200?random=4"></div>
<div><img src="https://picsum.photos/300/200?random=5"></div>
<div><img src="https://picsum.photos/300/200?random=6"></div>
</div>
</div>
not a nice solution but will give you what you want

Sticky section scrolling effect HTML

In the following pen I would like to create an effect where you have to scroll (by scrolling, not with mouse movement), all the way down until the top image is revealed, until we move to the next section.
The effect I'm trying to re-create, in case the explanation is too confusing can be found on Apple's website here
As you scroll down you'll understand.
let wrapper = document.querySelector('#wrapper');
let topLayer = wrapper.querySelector('.top');
let handle = wrapper.querySelector('.handle');
wrapper.addEventListener('mousemove', e => {
handle.style.top = e.clientY + 'px';
topLayer.style.height = e.clientY + 'px';
});
});

Here is an example using the CSS position: sticky
body {
font-family: georgia;
height: 1000px;
}
img {
display: block;
margin: 0 auto;
}
.sticky {
position: sticky;
position: -webkit-sticky;
width: 100%;
top: 25vh;
justify-content: center;
align-items: center;
color: #fff;
}
.wrapper {
width: 75%;
margin: auto;
background-color: silver;
padding: 15px;
}
.wrapper {
height: 200vh;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.css" rel="stylesheet"/>
<div class="wrapper bg-primary">
<div class="sticky">
<img src='https://dummyimage.com/400x100.png?text=image-1' alt='' />
</div>
</div>
<br>
<div class="wrapper bg-success">
<div class="sticky">
<img src='https://dummyimage.com/400x100.png?text=image-2' alt='' />
</div>
</div>
<br>
<div class="wrapper bg-warning">
<div class="sticky">
<img src='https://dummyimage.com/400x100.png?text=image-3' alt='' />
</div>
</div>

Set image max-width and max-heigth 100% but allow the image to scale larger than 100% of itself

I'm trying to scale an image to 100% of it's parent. The aspect ratio of the image should stay the same, so the 100% scale should be either 100% of the width or 100% of the height, whichever comes first.
I've tried using
max-height: 100%;
max-width: 100%;
This works as long as the image is larger than it's container. As soon as the container becomes larger than the image, the image no longer stretches to an edge but stays at 100% of it's size.
Browser support is an issue, Ive tried flexbox with object-fit: contain; but I have to support IE10.
Consider the following:
.img-container {
border: solid red 1px;
margin-bottom: 10px;
}
.img-container img {
max-height: 100%;
max-width: 100%;
border: solid green 1px;
}
.size1 {
width: 200px;
height: 50px;
}
.size2 {
height: 200px;
width: 50px;
}
.size3 {
width: 650px;
height: 650px;
}
<div class="img-container size1">
<img src="https://www.google.nl/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
</div>
<div class="img-container size2">
<img src="https://www.google.nl/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
</div>
<div class="img-container size3">
<img src="https://www.google.nl/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
</div>
The images inside .size1 and .size2 scale correctly, but the container for .size3 is larger than the image, this one should stretch to the edge as well.
How do I go about doing this?
Pure CSS is preferred, but JS is not out of the question.

Have a look at this solution using jQuery.
$(document).ready(function(){
$('img').each(function(){
let imgHeight = $(this).height();
let containerHeight = $(this).closest('.img-container').height();
if(imgHeight > containerHeight){
$(this).css('width','auto');
$(this).css('height', '100%');
}
});
});
.img-container {
border: solid red 1px;
margin-bottom: 10px;
}
.img-container img {
width: 100%;
height: auto;
border: solid green 1px;
}
.size1 {
width: 200px;
height: 50px;
}
.size2 {
height: 200px;
width: 50px;
}
.size3 {
width: 650px;
height: 650px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="img-container size1">
<img src="https://www.google.nl/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
</div>
<div class="img-container size2">
<img src="https://www.google.nl/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
</div>
<div class="img-container size3">
<img src="https://www.google.nl/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
</div>

3 DIVs same height. Shrink leftmost width and all heights with window

Trying to do this with CSS only.
Have a Canvas on the left side that I want to shrink both width and height as the window is resized. Want the center and right divs to shrink in height to match the canvas. Don't want center and right divs to move under the canvas.
<div class="container">
<div class="left">
<canvas id="draw" width="250" height="300"></canvas>
</div>
<div id="center" class="center"></div>
<div id="right" class="right"></div>
</div>
Fiddle: https://jsfiddle.net/mrx6zk27/
Any help would be appreciated. Expecting I will probably need JavaScript to align the heights, but want to reduce JavaScript as much as possible.
Update: Fiddle using table layout (doesn't work): https://jsfiddle.net/mrx6zk27/2/

I sugest to use flexbox, It's required to update the center and right divs in the markup slightly for this solution. See the code snippet and demo as follows.
jsfiddle
var c = document.getElementById("draw");
ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 250, 300);
ctx.fillStyle = "white";
ctx.font = "bold 40pt Arial";
ctx.fillText("CANVAS", 10, 100);
tmp = "";
for (var i = 0; i < 100; i++) {
tmp += "<p>" + i + "</p>";
}
document.getElementById("center").innerHTML = tmp;
document.getElementById("right").innerHTML = tmp;
.container {
max-width: 650px;
margin: 0 auto;
border: 1px solid black;
display: flex;
}
.container > div {
position: relative;
min-width: 0;
}
.left {
max-width: 250px;
width: auto;
}
.left canvas {
display: block;
max-width: 100%;
height: auto;
}
.center {
flex: 0 0 200px;
overflow-y: scroll;
background-color: blue;
}
.right {
flex: 0 0 200px;
overflow-y: scroll;
background-color: green;
}
.scroll {
position: absolute;
width: 100%;
}
<div class="container">
<div class="left">
<canvas id="draw" width="250" height="300"></canvas>
</div>
<div class="center"><div id="center" class="scroll"></div></div>
<div class="right"><div id="right" class="scroll"></div></div>
</div>

Not very sure if this is what you want, but I think you use display:table.
<div id="container" style="display: table; width:100%;">
<div style="display: table-cell; background-color: red; width:-100%; height:200px"></div>
<div style="display: table-cell; background-color: blue; width:300px;"></div>
<div style="display: table-cell; background-color: green; width: 300px;"> </div>
</div>
http://jsfiddle.net/8mpx1kok/2/

Forcing images to dynamically resize to container/browser height with Javascript

Basically I'm looking to get my horizontal scrolling sites (using indexhibit) images to be relative to browser size.
At the moment using the following code it seems to resize the height but not the width?
This is my javascript that I found from this thread http://www.indexhibit.org/forum/thread/11531 which I've attached in an external js doc.
function resizeit() { showHeight('document', $(window).height());
function showHeight(ele, h) {
$('.picture img').css( 'height', h -30 );
$('#img-container').css( 'height', h -30 );
}
var sum = 0;
$('.picture img').each(function()
{
sum += $(this).width() +21;
});
$('#img-container').width( sum );
}
$(window).resize(function() {
resizeit();
});
$(window).load(function(){
resizeit();
});
And this is my PHP
<script type='text/javascript' src='{{baseurl}}/ndxzsite/js/images.js<last:page:version
/>'></script>
<last:page:css />
<last:page:onready />
<plugin:backgrounder />
</head>
<body class='{{object}} section-{{section_id}} exhibit-{{id}} format-{{format}}'>
<div class="header">
<h1></div>
<div id='index'>
<div class='menu'>
<div class='top'>{{obj_itop}}</div>
<plugin:index:load_index />
<div class='bot'><p>© Lucy bower 2014</p> <p>Built by Neptik</p>
{{obj_ibot}}</div>
<last:page:append_index />
</div>
</div>
<div id='exhibit'>
<div class='container'>
<div class='top'><!-- --></div>
<!-- text and image -->
<plugin:page:exhibit />
<!-- end text and image -->
</div>
</div>
<plugin:page:append_page />
<plugin:page:closing />
</body>
And my images end up sitting in a stack like this
I just don't really understand what I'm doing wrong if it's worked for other people :( is there any other way of doing it?

Instead of sizing the img tag, I would personally recommend making the image file the background-image of the parent div ie.
<div style="background-image=url('locationofImage.png'); background-size:cover;"></div>
background-image:url(''); - Sets the background image
background-size:cover; - Set how the image should fill the div
This will simply position the image in the background of the div to ensure there is no whitespace. You then can using css set the height and width of the div to fit the space you need.

I'am not really sure if you can use it. But the whole layout can be done with CSS alone, here is an example.
Demo Here: http://jsfiddle.net/T9Zz5/1/
*
{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html, body
{
height: 100%;
overflow-y: hidden;
margin:0;
padding:0;
}
.wrap
{
overflow-x: visible;
white-space: nowrap;
height: 100%;
width: 100%;
}
.left
{
width: 200px;
float: left;
}
.item
{
display: inline-block;
width: 100%;
height: 100%;
padding: 4px;
background-color: green;
margin-left: -4px;
text-align: center;
vertical-align: top;
}
.item img
{
max-width: 100%;
display: inline-block;
vertical-align: middle;
}
.item:before
{
display: inline-block;
content:"";
vertical-align: middle;
height: inherit;
}
/* First Item width - nav width */
.left + .item
{
width: calc( 100% - 200px );
margin-left: 0px;
}
.item:nth-child(2){
background-color: yellow;
}
.item:nth-child(3){
background-color: purple;
}
HTML:
<div class="wrap">
<div class="left">
<ul>
<li>Nav</li>
<li>Nav</li>
<li>Nav</li>
<li>Nav</li>
</ul>
</div>
<div class="item"><img src="http://www.placehold.it/1000x800" /></div>
<div class="item"><img src="http://www.placehold.it/1000x100" /></div>
<div class="item"><img src="http://www.placehold.it/1000x800" /></div>
</div>