<style>
	.teamlist, .jcarousel li { height: 900px;}
	.teaminfo { width: 236px; } 
	
	.greyboxt { clear:both; width: 90%; height: 200px; -webkit-border-radius: 10px;
		-moz-border-radius: 10px; border-radius: 10px; padding: 10px; text-align: left;		
	}
	.tri {position:relative; top: 2px; left: 40%;}
	.teamlist div {text-align: left;}
	.teamlist div.teaminfo b {
		font-size: 20px;
		font-style: normal;
	}
	.teamname {
		font-size: 16px;
	}
</style>
</div>
<div class="jcarousel-wrapper">
	<div class="container teamlist jcarousel">
		<ul>
<?php 
	 /* $aboutUsLink = esc_url( get_permalink( get_page_by_title('Over ons')));  */
	$args = array('post_type' => array( 'team'), 'post_status' => 'publish', 'posts_per_page' => -1);
	$query = new WP_Query($args);
	//echo $query->request;
	if($query->found_posts) {
		while ( $query->have_posts() ) : $query->the_post();
			$image = get_field('afbeelding');
			?>	           

            <li style="cursor:pointer">
                <img src="<?php echo $image['url']?>" alt="<?php echo $image['alt']?>"/><br/>
            	<div class="teaminfo">	            	
					<div class="greyboxt">
						<div class="teamname"><?php echo strtoupper(get_field('functie'));?></div>                        <br>
						<b><?php echo strtoupper(get_the_title());?></b><br/>
                    		<div class="teamdesc1"><?php echo strip_tags(get_the_content(""));?>
					<a class="obtn" href="<?php echo get_permalink(); ?>" id="knop">Lees meer...</a></div>
					</div>              	
                </div>
            </li>	                
<?php endwhile; 
	} ?>		                
		 </ul>                            
	</div>
	<a href="#" class="jcarousel-control-prev">&lsaquo;</a>
	<a href="#" class="jcarousel-control-next">&rsaquo;</a>
</div>
<br/><br/>

			<script type="text/javascript">	
	            (function($) {
	                $(function() {
	                    var jcarousel = $('.jcarousel');
	
	                    jcarousel
	                        .on('jcarousel:reload jcarousel:create', function () {
	                            var width = jcarousel.innerWidth();	
	                            if (width >= 1100) {
		                            width = width / 4;
	                            } else if (width >= 600) {
	                                width = width / 3;
	                            } else if (width >= 350) {
	                                width = width / 2;
	                            }	
	                            jcarousel.jcarousel('items').css('width', width + 'px');
	                        })
	                        .on('jcarousel:createend', function(event, carousel) {		                        
		                    })
	                        .jcarousel({
	                            wrap: 'circular'
	                        });          
	                    $('.jcarousel-control-prev')
	                        .jcarouselControl({
	                            target: '-=1'
	                        });	
	                    $('.jcarousel-control-next')
	                        .jcarouselControl({
	                            target: '+=1'
	                        });
	                });
	            })(jQuery);
	            $(window).load(function(){
	            	
		        });
            </script>