JSFiddle - React, Tailwind, and code Playground

HTML

<div class="swiper-wrapper" data-bind="foreach: roomCardsGrouped">
     <div class="swiper-slide">
         <!-- ko foreach: $data -->
         <div>
             <span data-bind="text: $data"></span>
         </div>
         <!-- /ko -->
     </div>
</div>

CSS

div { border: 1px solid black; padding: 1em; }

JavaScript

Array.prototype.chunk = function (chunkSize) {
    var array = this;
    return [].concat.apply([],
    array.map(function (elem, i) {
        return i % chunkSize ? [] : [array.slice(i, i + chunkSize)];
    }));
}

function ViewModel() {
    var self = this;
    self.roomCards = ko.observableArray([1, 2, 3, 4, 5, 6, 7, 8]);

    self.roomCardsGrouped = ko.computed(function () {
        return self.roomCards().chunk(4);
    });
}

ko.applyBindings(new ViewModel());