One Section Showing Perfectly on Android and Mobile Resposnive Viewport but on IOS Not Showing. I try to recreate this but nothing work.
{%- capture flickity_options -%}
{
"prevNextButtons": true,
"pageDots": false,
"contain": true,
"cellAlign": "left",
"groupCells": true,
"arrowShape": {"x0": 20, "x1": 60, "y1": 40, "x2": 60, "y2": 35, "x3": 25}
}
{%- endcapture -%}
<div class="container1 gp-shop-height">
<div class="row">
<div class="col-sm-12">
</div> <!-- /col-sm-6 -->
</div>
<div id="carousel-example-generic-3" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div class="row flex1 shop-by-age-top-m">
<div class="col-12">
<a href="[https://website.com/collections/baby-wipes](https://website.com/collections/baby-wipes)"><img class="d-block w-100 shop-1 shop-by-age-bg-img" src="[https://cdn.shopify.com/s/files/1/0764/5455/t/85/assets/beautiful-baby-sits-table-holding-nut-looking-aside-removebg-preview.png?v=1680787749](https://cdn.shopify.com/s/files/1/0764/5455/t/85/assets/beautiful-baby-sits-table-holding-nut-looking-aside-removebg-preview.png?v=1680787749)" alt="First slide"></a><h4 class="vm shop-by-cat-12 gp-slider-font">Baby Wipes</h4>
</div>
<div class="col-12">
<a href="[https://website.com/collections/boys-clothes](https://website.com/collections/boys-clothes)"><img class="d-block w-100 shop-1 shop-by-age-bg-img" src="[https://cdn.shopify.com/s/files/1/0764/5455/t/85/assets/beautiful-baby-sits-table-holding-nut-looking-aside-removebg-preview.png?v=1680787749](https://cdn.shopify.com/s/files/1/0764/5455/t/85/assets/beautiful-baby-sits-table-holding-nut-looking-aside-removebg-preview.png?v=1680787749)" alt="First slide"></a><h4 class="vm shop-by-cat-12 gp-slider-font">Boys Clothes</h4>
</div>
</div>
</div>
<div class="item">
<div class="row flex1">
<div class="col-12">
<a href="[https://website.com/collections/cot-bedding](https://website.com/collections/cot-bedding)"><img class="d-block w-100 shop-1 shop-by-age-bg-img" src="[https://cdn.shopify.com/s/files/1/0764/5455/t/85/assets/beautiful-baby-sits-table-holding-nut-looking-aside-removebg-preview.png?v=1680787749](https://cdn.shopify.com/s/files/1/0764/5455/t/85/assets/beautiful-baby-sits-table-holding-nut-looking-aside-removebg-preview.png?v=1680787749)" alt="First slide"></a><h4 class="vm shop-by-cat-12 gp-slider-font">Cot Bedding</h4>
</div>
<div class="col-12">
<a href="[https://website.com/collections/girls-clothes](https://website.com/collections/girls-clothes)"><img class="d-block w-100 shop-1 shop-by-age-bg-img" src="[https://cdn.shopify.com/s/files/1/0764/5455/t/85/assets/beautiful-baby-sits-table-holding-nut-looking-aside-removebg-preview.png?v=1680787749](https://cdn.shopify.com/s/files/1/0764/5455/t/85/assets/beautiful-baby-sits-table-holding-nut-looking-aside-removebg-preview.png?v=1680787749)" alt="First slide"></a><h4 class="vm shop-by-cat-12 gp-slider-font">Girls Clothes</h4>
</div>
</div>
</div>
<div class="item">
<div class="row flex1">
<div class="col-12">
<a href="[https://website.com/collections/decor-accessories](https://website.com/collections/decor-accessories)"><img class="d-block w-100 shop-1 shop-by-age-bg-img" src="[https://cdn.shopify.com/s/files/1/0764/5455/t/85/assets/beautiful-baby-sits-table-holding-nut-looking-aside-removebg-preview.png?v=1680787749](https://cdn.shopify.com/s/files/1/0764/5455/t/85/assets/beautiful-baby-sits-table-holding-nut-looking-aside-removebg-preview.png?v=1680787749)" alt="First slide"></a><h4 class="vm shop-by-cat-12 gp-slider-font">Decor Items</h4>
</div>
<div class="col-12">
<a href="[https://website.com/collections/gold-plated-jewellery](https://website.com/collections/gold-plated-jewellery)"><img class="d-block w-100 shop-1 shop-by-age-bg-img" src="[https://cdn.shopify.com/s/files/1/0764/5455/t/85/assets/beautiful-baby-sits-table-holding-nut-looking-aside-removebg-preview.png?v=1680787749](https://cdn.shopify.com/s/files/1/0764/5455/t/85/assets/beautiful-baby-sits-table-holding-nut-looking-aside-removebg-preview.png?v=1680787749)" alt="First slide"></a><h4 class="vm shop-by-cat-12 gp-slider-font" id="cat-txt1">Jewellery</h4>
</div>
</div>
</div>
</div>
<div class="btn-c">
<!-- Controls -->
<a class="left carousel-control shop-by-cat-button gp-page-age-left" href="#carousel-example-generic-3" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control shop-by-cat-button-2" href="#carousel-example-generic-3" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<style>
.gp-shop-height {
height: 100% !important;
}
#carousel-example-generic-3 {
position: relative;
z-index: 1;
}
</style>
<script>
$('.carousel').on('touchstart', function(event){
const xClick = event.originalEvent.touches[0].pageX;
$(this).one('touchmove', function(event){
const xMove = event.originalEvent.touches[0].pageX;
const sensitivityInPx = 5;
if( Math.floor(xClick - xMove) > sensitivityInPx ){
$(this).carousel('next');
}
else if( Math.floor(xClick - xMove) < -sensitivityInPx ){
$(this).carousel('prev');
}
});
$(this).on('touchend', function(){
$(this).off('touchmove');
});
});
</script>
{% schema %}
{
"name": "Shop By Age",
"settings": [],
"presets": [
{
"name": "Shop By Age",
"category": "ADVANCED LAYOUT"
}
]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}
Website Link : Link
Second Section - Shop By Age
