how to make a slide?
frame > container (flex row) > several images
give the frame and images certain but responsive width and height, for example, 60vw.
queryselect the frame and all pictures as an array of nodes.
get the frame's width in the js file.
modify the container's margin-left based on the index of the nodes array and frame's width.
notes for touchscreen
1.add {passive: true} for event listener as the 3rd parameter to prevent default scrolling.
2.event.preventdefault() also works but it's much more expensive so passive: true is preferable.
notes for element.style
1.element.style="something" will be erased when you declare element.style="another thing" else where.
Hi there~ I really have trouble adding the introduction image for bigger screens. Where should I add it in HTML and how to make it responsive? And I don't know how to deal with two formats of the image (png and webp). TIA~~~
.hero { display: grid; grid-template-columns: 1fr 1fr;
&_right {
// @include border();
z-index: -1;
display: block;
position: relative;
width: 150%;
top: -50px;
min-width: 400px;
overflow-clip-margin: content-box;
overflow: clip;
}
}