One of my page has a swiper and list items. Currently everything is scrolling. But I want fixed swiper on top then list items scrollable.
<template>
<div class="page page-inner navbar-fixed toolbar-fixed" data-name="academy">
<div class="navbar">
<div class="navbar-inner">
<div class="left" @click="NavigationBack()">
<a href="#" class="link icon-only">
<i class="icon icon-back"></i>
</a>
</div>
<div class="title center">{{ Title }}</div>
<div class="right">
<a href="#" class="link icon-only">
<i class="icon icon-bars"></i>
</a>
</div>
</div>
</div>
<div class="page-content news academy front-dashboard">
<div class="content-block">
<div class="card height-fixed overflow-auto">
<div class="card-content no-padding h-100">
<swiper :slides-per-view="1" :loop="true" :autoplay="{ delay: 6000 }"
:pagination="{ clickable: true }" :space-between="25">
<swiper-slide v-for="data in firstThreeItems" :key="data.CARD_ID">
<div class="imageview">
<img class="main_img" :src="data.IMAGE_PATH" alt="">
</div>
</swiper-slide>
</swiper>
<div class="news-list list">
<ul class="no-margin padding">
<li @click="ItemClick(data)" v-for="data in filteredAcademyData" :key="data.CARD_ID"
class="display-flex justify-content-space-between">
<div>
<div class="thumb-image">
<img :src="data.IMAGE_PATH">
</div>
</div>
<div>
<div class="news-summary padding">
{{ data.CARD_DESCRIPTION }}
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<Tool-Bar :SearchBarID="'prof-searchbar-emp'"></Tool-Bar>
</div>
</template>