My webpage features image scrolling functionality, powered by Flexslider.
The images on the page are sorted by date - for example, selecting "last 7 days" will display images from the past week (data managed through AngularJS).
However, when the JSON data is received and updated in the view with FlexSlider, a problem arises. The Flexslider is updated with new data, but the width remains based on the maximum number of elements that were previously present.
Can anyone provide insight into this issue?
<div class="recent_uploads mar_btm" ng-controller="recentuploadsController">
<div class="mar_btm titl_img"><h6>Recent Uploads</h6><!--<img alt="recent uploads" src="<?php echo base_url();?>public/image/net03.png">--></div>
<input type="text" ng-model="search.text" class="community-searching hide">
<button ng-click="clearSearch()" class="hide">clear</button>
<div class="rec_uplist_cont">
<div class="rec_uplist_slider">
<div class="flex-viewport" style="overflow: hidden; position: relative;">
<ul class="slides" style="width: 800%; transition-duration: 0.6s; transform: translate3d(-240px, 0px, 0px);">
<div class="recnt_info" ng-if="recentupload!=null"><p> No Data Found</p></div>
<li id="apptest" style="width: 226px; float: left; display: block;" class="animate-repeat" ng-repeat="recentupload in recentuploads | filter:search.text">
<div class="rec_uplist" >
<div class="recnt_info">{{recentupload.user}} <span class="timeago" title="{{recentupload.time}}">{{recentupload.time}}</span></div>
<a href="#" data-toggle="modal" data-target="#view_video"><img width="226" ng-click="showvideo(recentupload.id)" height="127" src="http://img.youtube.com/vi/{{recentupload.embededCode}}/0.jpg" /></a>
<a href="#" ng-click="showvideo(recentupload.id)" >{{recentupload.vtitle}}</a>
</div>
</li>
</ul>
</div>
<ol class="flex-control-nav flex-control-paging"><li><a class="">1</a></li><li><a class="flex-active">2</a></li></ol><ul class="flex-direction-nav"><li><a href="#" class="flex-next">Next</a></li><li><a href="#" class="flex-prev">Previous</a></li></ul></div>
</div>
</div>