Testing Carousel 

Okay this story begin when I got broken heart, and I just stalk her, cause I got mad with her. I got some good app for stalking her account. The name of the app is steller. So yeah, I got encouraged about the apps, and I just know the feature is named carousel in css.

I also found that the css and html part can be applied to my blog. Okay, for now I will ignore how to write the shortcodes part. This is how I write the carousel part, so it can be inline with html. The image collection must be at least 3 items to make it work like infinite scroll and force it to has same resolution. I just use app named Hand Lettering, to easy make something and having same resolution. This is how to write it in blog page :

{{ carousel_add(w="405", h="616") }}
{{ carousel_item(srce="https://i.ibb.co/X723gmX/img-8.png", in="broken_heart", num=8, loc="last") }}
{{ carousel_item(srce="https://i.ibb.co/JyGqhyh/img-7.png", in="broken_heart", num=7, loc="golast") }}
{{ carousel_item(srce="https://i.ibb.co/LJdx4vc/img-1.png", in="broken_heart", num=1, loc="first") }}
</div>

Somehow you must make the first item on the last to be drawn, since my css style is using tilde(~) so to make the first page doesn’t visible, I put it in the last part. Specify the resolution in the carousel_add shortcode and closed it using div tag html. Okay aafter wandering around tera, finally I can make it into just using one shortcodes. Yeah the command right now changed like this :

{{ carousel(ulist=["https://i.ibb.co/LJdx4vc/img-1.png","https://i.ibb.co/9gb0zvm/img-2.png","https://i.ibb.co/DrV3JtX/img-3.png","https://i.ibb.co/Z8Xn8Zy/img-4.png","https://i.ibb.co/7tBd7Jx/img-5.png","https://i.ibb.co/jkQdB2D/img-6.png","https://i.ibb.co/JyGqhyh/img-7.png","https://i.ibb.co/X723gmX/img-8.png"], in="list-test", w="405", h="616") }}

Here is the result, after wandering around, finally found way to adjust the height of relative image to adjust based on image size. It is very useful basically on smaller screen. The function I used was calc, I am adjusting it like calc((h/w)*80vw) so no matter sceen size the carousel wrapper height will have proportion scaling as input of width and height in the shortcodes.

Carousel List Test 

Still though there isn’t any indicator point on the below part of the carousel image. I am satisfied this way, Well, it will make me happy though, right now I can write the style like steller app. Something that usually I write about broken heart blog in the old time. Cause right now, the steller app was really heavy, and it really hard to load it in my phone. The ui interface also changed so much that it make it hard again to view story about my ex heartbroken haha.