🔥[jetpopup and jetengine] Swiper Library

Hello , I would like to show you one or more details that will significantly improve not only the quality of crocoblock plugins but also the quality of our life and the work on our ideas and projects and imagination 😊

the plugins concerned on this post are.

Jetpopup
Jetengine "Slider Gallery for Dynamic Field widget"

inspiration

today we will try to learn how to recreate a simple quickview

demo inspiration2

Source

Before opening the browser I opened my adobe XD and I followed 4 basic rules :

1 - understand the limits of the concerned plugins (jetpopup , jetengine) 2 - make the first prototype with what they already offer 3 - make a second prototype with what is desired as a result (inspiration model) 4 - look for simple or existing solutions to implement to obtain the desired result (prototype 2)

now you can open your browser and start recreating your ideas.

1: limitations and problems

with jetpopup:

first major obstacle .. impossible to see your content the "preview dynamic content as" option is missing you have to be super patient and accept being like astrophysicists "just imagine what you can't see..." luckily, you have the visual on adobe xd

no preview

and you will need it (your imagination 😅) because our next problem is with jetengine:

any elementor widget type slider or gallery does not work except (fortunately) the Callback slider gallery, except... he is too limited and buggy and does not like to be personalized missing all the basic options for that. i will just try to apply some rescue css

no preview slider

2 and 3: prototypes ... between reality and desired reality

ok, you should have the same obstacles to override. with a few css manipulations and a lot of imaginations to see your elements inside the jetpopup..

and we have the real result now :

prototype 1 done Quickview demo 1

but it's not like the inspiration model ...! would you tell me...🤔

yes, that's why I'm telling you you have to have a lot of imagination .. what we want to see is that

prototype 2 : not possible Quickview demo 2

4: simple solutions

jetpopup:

add the possibility of "preview dynamic content as"

Route 1

jetengine:

add all the necessary options to customize the callback slider gallery
callback slider gallery add custom size image
callback slider gallery customize the middle icon
callback slider gallery image control options
add Slider Syncing mode and all the options that go with it

solution one

Route 2

callback slider gallery uses slick and slick as by miracle already offers a Slider Syncing mode and various other modes similar to elementor carousel

slick slider

So the idea not to disturb the compatibility or all kinds of possible problems that the devs can think of.

the idea is to combine the best of slick and its modes and the 3 jetengine widgets

solution 2

in a brand new widget "dynamic gallery" or "advanced dynamic gallery" it will integrate a slick carousel mode and a Slider Syncing mode or more modes .. with all the possible options 😊 i mentioned.

the main thing is to allow us to recreate this kind of slider without having to go to the neighbors to find a solution

I also think of many other uses of quickview not just my example. e-commerce projects etc.

while waiting for possible improvements in the future I let you observe this animation of my prototype 2 not possible for the moment :)

slick slider nav

Adobe XD file here

additional information

little update to tell you that I just found out that slick has been discontinued by elementor since 2.7

Capture d’écran 2022-01-07 094200

and they recommend switching to swiper.. I now understand why the callback slider gallery widget bug.. the last version dates from 2017 ...

the ideal is to switch to swipe and in this case it is Thumbs gallery the function equivalent to Slider Syncing

🔔Udpate : I redid the test with elementor carousel widget which is under swiper and it works without problem this time.. but that doesn't change the fact that we still don't have a thumbnail slide and especially notice the css that I had to do to force certain adjustments.

swiper800

/* Swiper slide image */
.gallery a .swiper-slide-image{
    width:100%;
    height:320px;
    object-fit: cover;
}

/* 767 and below screen sizes */
@media (max-width:767px) {
   .gallery a .swiper-slide-image{
    height:200px;

}
}

I think route 2 is the best solution for everyone we take the elementor carousel widget as a fork or base and we supercharge it with options + a thumbnail slide mode. and we call it "dynamic gallery" or whatever you want :)

last word

what I think : at this stage a decision must be made either we continue with slick and we improve it or follow the recommended route and free jetengine from slick and adopt swiper with new and more modern and efficient widget gallery.

I think I have provided enough information to initiate action on this issue. 🤞🙏

Crocoblock / suggestions