FlexSlider+Carousal

by boorsma

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.5.0/flexslider.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.5.0/jquery.flexslider-min.js"></script>
<section class="content-block content-block--no-padding-top">
	<div class="container">
		<h2 class="content-block__title content-block__title--center"><span class="content-block__title-span">Heb je nog ander drukwerk nodig?</span></h2>
		<div id="carousel__product-slider" class="flexslider ">
			<div class="flex-viewport">
				
			</div>
		<div class="flex-viewport" style="overflow: hidden; position: relative;"><ul class="slides product-overview product-overview--homepage" style="width: 3200%; transition-duration: 0s; transform: translate3d(-3660px, 0px, 0px);"><li class="product-overview__item carousel-cell" style="width: 295px; margin-right: 10px; float: left; display: block;">
	            <a class="product-overview__link" href="https://www.studentendrukwerk.nl/producten/magazines" title="Magazines">
	                <img class="product-overview__image" src="/content/images/home/additional-product/magazines/shop-afbeelding.png" alt="Magazines" draggable="false">
	                <h3 class="product-overview__title">Magazines</h3>
	            </a>
	        </li><li class="product-overview__item carousel-cell" style="width: 295px; margin-right: 10px; float: left; display: block;">
	            <a class="product-overview__link" href="https://www.studentendrukwerk.nl/producten/t-shirt" title="T-shirt">
	                <img class="product-overview__image" src="/content/images/home/additional-product/t-shirt/shop-afbeelding.png" alt="T-shirt" draggable="false">
	                <h3 class="product-overview__title">T-shirt</h3>
	            </a>
	        </li><li class="product-overview__item carousel-cell" style="width: 295px; margin-right: 10px; float: left; display: block;">
	            <a class="product-overview__link"...

JavaScript

(function() {

        // store the slider in a local variable
        var $window = $(window),
            flexslider = {
                vars: {}
            };

        // tiny helper function to add breakpoints
        function getGridSize() {
            return (window.innerWidth < 600) ? 2 :
                (window.innerWidth < 900) ? 3 : 4;
        }

       
        $window.ready(function() {
            $('.flexslider').flexslider({
                animation: "slide",
                animationLoop: false,
                itemWidth: 210,
                itemMargin: 2,
                minItems: 6, // use function to pull in initial value
                maxItems: getGridSize() // use function to pull in initial value
            });
        });

        // check grid size on resize event
        $window.resize(function() {
            var gridSize = getGridSize();

            flexslider.vars.minItems = gridSize;
            flexslider.vars.maxItems = gridSize;
        });
        
    }());