Open 79ho3ein opened 1 year ago
Add an ability to create gallery like on airbnb : https://www.airbnb.com/rooms/48821490?adults=1&category_tag=Tag%3A7769&children=0&enable_m3_private_room=true&infants=0&pets=0&photo_id=1150952775&search_mode=flex_destinations_search&check_in=2023-09-01&check_out=2023-09-08&source_impression_id=p3_1692639217_%2B1jmoy5KL9PKr4%2FL&previous_page_section_name=1000&federated_search_id=bded5b55-573b-4064-849a-b3e795a7c3ba
I agree. I use that widget a lot, but its kinda limited, what you can do.
I would also add:
There are some css i use for horizontal gallery to achieve some of these.
Custom ID is "gallery"
/* ==== Jet Slider Gallery ==== */
/* Change main image height and object-fit */
#gallery .jet-woo-product-gallery__image-link img{
height: 450px;
object-fit: contain;
}
/* Change thumbnails images height and object-fit */
#gallery .jet-woo-swiper-control-thumbs__item-image img{
height: 120px;
object-fit: contain;
}
/* Change thumbnails container padding (gap between main image and thumbnails) */
.jet-gallery-swiper-thumb{
padding: 0px 10px 0px 10px !important;
}
/* Same settings just for phone */
@media only screen and (max-width: 767px) {
#gallery .jet-woo-product-gallery__image-link img{
height: 350px;
object-fit: contain;
}
#gallery .jet-woo-swiper-control-thumbs__item-image img{
height: 100px;
object-fit: contain;
}
.jet-gallery-swiper-thumb{
padding: 0px 10px 0px 10px !important;
}
}
Add an ability to create gallery like on airbnb : https://www.airbnb.com/rooms/48821490?adults=1&category_tag=Tag%3A7769&children=0&enable_m3_private_room=true&infants=0&pets=0&photo_id=1150952775&search_mode=flex_destinations_search&check_in=2023-09-01&check_out=2023-09-08&source_impression_id=p3_1692639217_%2B1jmoy5KL9PKr4%2FL&previous_page_section_name=1000&federated_search_id=bded5b55-573b-4064-849a-b3e795a7c3ba
That's would be great, but rather, than make it possible in slider widget, that would be new widget completly.
Please consider these few things to improve this widget as they are very important.
1- padding for product tumbnails.
2- padding for images : https://prnt.sc/Gc3LORWNxpbt
3- Gap option to control the distance between the featured image and thumbnails : https://prnt.sc/WQkBwavCkxUR
4- Left and right position for thumbnails : https://prnt.sc/10fimlfbWzE0
For example, if we choose the left position, the result will be like this: https://prnt.sc/lEvMa5uKlos-
5- box shadow for Prev/Next Arrows (featured image and thumbnails)
6- inside and outside position for Prev/Next Arrows (Like Elementor's slider widget) This option is very useful and helps to keep the Prev/Next Arrows in the widget frame.
7- speed slide control for thumbnails
thank you