<div id="testimonials-wrapper">
    <div id="testimonials" class="clear relative">
        <div class="testimonial-item">
            <div class="testimonial border-box relative">
                <div class="testimonial-image"><img src="https://web.imasmi.com/plugin/WebCss/file/x-sLGYaQ_stMM-unsplash.jpg" class="image center"/></div>
                <div class="testimonial-content text-center">
                    <h3>EVA MAISON</h3>
                    <div class="testimonial-text">"This was one of the best experiences I have ever had with a cab company. I had problems at the airport and the driver stayed with me for over an hour and helped me sort everything out."</div>
                </div>
                
                <div class="testimonial-rating text-center">
                    <i class="far fa-star"></i>
                    <i class="far fa-star"></i>
                    <i class="far fa-star"></i>
                </div>
            </div>
        </div>
        
        <div class="testimonial-item">
            <div class="testimonial border-box relative">
                <div class="testimonial-image"><img src="https://web.imasmi.com/plugin/WebCss/file/x-sLGYaQ_stMM-unsplash.jpg" class="image center"/></div>
                <div class="testimonial-content text-center">
                    <h3>EVA MAISON</h3>
                    <div class="testimonial-text">"This was one of the best experiences I have ever had with a cab company. I had problems at the airport and the driver stayed with me for over an hour and helped me sort everything out."</div>
                </div>
                
                <div class="testimonial-rating text-center">
                    <i class="far fa-star"></i>
                    <i class="far fa-star"></i>
                    <i class="far fa-star"></i>
                </div>
            </div>
        </div>
        
        <div class="testimonial-item">
            <div class="testimonial border-box relative">
                <div class="testimonial-image"><img src="https://web.imasmi.com/plugin/WebCss/file/x-sLGYaQ_stMM-unsplash.jpg" class="image center"/></div>
                <div class="testimonial-content text-center">
                    <h3>EVA MAISON</h3>
                    <div class="testimonial-text">"This was one of the best experiences I have ever had with a cab company. I had problems at the airport and the driver stayed with me for over an hour and helped me sort everything out."</div>
                </div>
                
                <div class="testimonial-rating text-center">
                    <i class="far fa-star"></i>
                    <i class="far fa-star"></i>
                    <i class="far fa-star"></i>
                </div>
            </div>
        </div>
        
        <div class="testimonial-item">
            <div class="testimonial border-box relative">
                <div class="testimonial-image"><img src="https://web.imasmi.com/plugin/WebCss/file/x-sLGYaQ_stMM-unsplash.jpg" class="image center"/></div>
                <div class="testimonial-content text-center">
                    <h3>EVA MAISON</h3>
                    <div class="testimonial-text">"This was one of the best experiences I have ever had with a cab company. I had problems at the airport and the driver stayed with me for over an hour and helped me sort everything out."</div>
                </div>
                
                <div class="testimonial-rating text-center">
                    <i class="far fa-star"></i>
                    <i class="far fa-star"></i>
                    <i class="far fa-star"></i>
                </div>
            </div>
        </div>
        
        <div class="testimonial-item">
            <div class="testimonial border-box relative">
                <div class="testimonial-image"><img src="https://web.imasmi.com/plugin/WebCss/file/x-sLGYaQ_stMM-unsplash.jpg" class="image center"/></div>
                <div class="testimonial-content text-center">
                    <h3>EVA MAISON</h3>
                    <div class="testimonial-text">"This was one of the best experiences I have ever had with a cab company. I had problems at the airport and the driver stayed with me for over an hour and helped me sort everything out."</div>
                </div>
                
                <div class="testimonial-rating text-center">
                    <i class="far fa-star"></i>
                    <i class="far fa-star"></i>
                    <i class="far fa-star"></i>
                </div>
            </div>
        </div>
        
        <div class="testimonial-item">
            <div class="testimonial border-box relative">
                <div class="testimonial-image"><img src="https://web.imasmi.com/plugin/WebCss/file/x-sLGYaQ_stMM-unsplash.jpg" class="image center"/></div>
                <div class="testimonial-content text-center">
                    <h3>EVA MAISON</h3>
                    <div class="testimonial-text">"This was one of the best experiences I have ever had with a cab company. I had problems at the airport and the driver stayed with me for over an hour and helped me sort everything out."</div>
                </div>
                
                <div class="testimonial-rating text-center">
                    <i class="far fa-star"></i>
                    <i class="far fa-star"></i>
                    <i class="far fa-star"></i>
                </div>
            </div>
        </div>
    </div>
    
    <ul id="testimonials-pages">
        <li onclick="testimonialsPage(1)" class="active"></li>
        <li onclick="testimonialsPage(2)"></li>
    </ul>
    
    <button class="mobile button center" data-show="3" onclick="testimonialsMore(this)">Load more</button>
</div>

<div class="text-center">
    <div><a href="https://web.imasmi.com/webcss" target="blank">Created with WebCss</a></div>
    <div><a href="https://fontawesome.com/" target="blank">Created with Font Awesome</a></div>
    Photo by <a href="https://unsplash.com/@speckfechta?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">x )</a> on <a href="https://unsplash.com/s/photos/face?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
</div>

    #testimonials-wrapper{width: 100%; overflow-x: hidden;}
    #testimonials{white-space: nowrap; transition: 1s ease; left: 0; font-size: 0;}
    .testimonial-item{width: 33.3333%; display: inline-block; box-sizing: border-box; padding: 15px; vertical-align: top; font-size: initial;}
    .testimonial{font-family: sans-serif, Helvetica; box-shadow: 0 0 15px #CCCCCC; transition: 0.5s; top: 0; padding: 40px 60px; width: 100%; white-space: normal;}
    .testimonial:hover{background-color: red; color: #ffffff; top: -10px;}
    .testimonial:hover .testimonial-text,.testimonial:hover .testimonial-rating i{color: #ffffff;}
    .testimonial-image .image{width: 100px; height: 100px; border-radius: 100%; overflow: hidden;}
    .testimonial-text{font-size: 1.1em; line-height: 1.5em; color: #555555;}
    .testimonial-rating{margin-top: 20px;}
    .testimonial-rating i{font-size: 1.6em; margin: 0 5px; color: red;}
    #testimonials-pages{padding: 0; margin: 20px auto; display: table;}
    #testimonials-pages li{list-style-type: none; display: inline-block; margin: 0 5px; width: 30px; height: 5px; background-color: #888888; cursor: pointer;}
    #testimonials-pages .active, #testimonials-pages li:hover, .button{background-color: red;}
    @media (max-width: 1080px){
        .testimonial-item{width: 100%; display: none;}
        .testimonial-item:nth-child(-n+3){display: block;}
        #testimonials-pages{display: none;}
        .button{display: block;}
    }

    function testimonialsPage(numb){
        document.querySelector("#testimonials").style.left = "-" + (numb - 1) + "00%";
        var x = document.querySelectorAll("#testimonials-pages li");
        for (var i = 0; i < x.length; i++) {
          x[i].classList.remove("active");
        }
        event.target.classList.add("active");
    }
    
    function testimonialsMore(elem){
        let x = document.querySelectorAll(".testimonial-item");
        let dataShow = Number(event.target.getAttribute("data-show"));
        let total = x.length;
        let next = dataShow + 3 < total ? dataShow + 3 : total;
        for (var i = dataShow; i < next; ++i) {
          x[i].style.display = "block";
        }
        
        if(next < total){
            elem.setAttribute("data-show", next);
        } else {
            elem.style.display = "none";
        }
    }