How to mark up such a slider?

Hi all. There's a layout. joxi.ru/E2ppB81UBdOgK2
You need to make so that when prelistavanje, the image from the right side, shown in the left part of the monitor area, tell me how to mark up?
June 5th 19 at 21:36
1 answer
June 5th 19 at 21:38
Solution
Hi! Not sure it's worth it to compile, most likely, you will approach animation using canvas.

You can, of course, to finish completely and animate through the manipulation of Dom, but it's more hassle.
Even know what to begin and where to start. Maybe there are some similar examples of implementation? - jordan_Flatley commented on June 5th 19 at 21:41
Similar did not meet, but saw a few sliders, written using the animation canvas'and, for example:
https://tympanus.net/Tutorials/PiecesSlider/
and the lesson:
https://tympanus.net/codrops/2018/02/21/animated-f...

Maybe to you it will come in handy

But if you have very little experience with js, then I would suggest to postpone this venture, as with a swoop it will be difficult to digest. - Tatum.Deck commented on June 5th 19 at 21:44
Yes , it is very zamorochenno. But there is another option that would be when you click on the picture to the right, it appeared on the left. Maybe this version is more easier to implement? - jordan_Flatley commented on June 5th 19 at 21:47
if it is a strict condition, then I would do the following (provided that the slider is fixed, not adaptive):

1) the monitor Image with a blank screen in a separate div container for the images - the pad under the monitor. Picture yourself in this case is stretchable under max. size backgrounds.

2) the Image on the right will be a conventional slider, the implementation of which can be easily found on the Internet.

.carousel
.monitor
 img.monitor__img[width="FIX_WIDTH" height="FIX_HEIGHT"]
.monitor__liner
ul.images
li.images__item
li.images__item
 ...


.monitor {
p:r;
w:100p;
h:100p;

 &__img {
d:b;
p:r;
 z-index: 1;
}

 &__liner {
p:a;
 z-index: 0;
 top: TOP_MARGIN; // You have to dance to the width and height of the image monitor and tweak these settings
 left: LEFT_MARGIN;
 w: FIX_WIDTH;
 h: FIX_HEIGHT;
 trf: skew(...);
 bgi: url(link_to_image);
 bgp: center;
 bgs: cover;
}
}


3) Using js, when you switch just change the links for .monitor__liner

PS Probably will cause a lot of problems with vyrashivaniem etc - Tatum.Deck commented on June 5th 19 at 21:50
, Adaptiv is a prerequisite... - jordan_Flatley commented on June 5th 19 at 21:53
if isparenie will not be changed in size, then this option can earn.

Otherwise, you'll need to make auto height of the image img.monitor__image, to make the width w:100%, max-width: ___px;to make the padding on the left and top for .monitor__liner in percent. - Tatum.Deck commented on June 5th 19 at 21:56

Find more questions by tags CSSHTMLjQuery