JSFiddle - React, Tailwind, and code Playground

by Front Dev

HTML

<script src="http://www.idangero.us/swiper/dist/js/swiper.min.js"></script>
<link rel="stylesheet" href="http://www.idangero.us/swiper/dist/css/swiper.min.css">
    <div class="swiper-container">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide">
<img src="http://t3.gstatic.com/images?q=tbn:ANd9GcS1yIzftAzhxBKYn1QG3ziyxzWyOigoQSXFEAe1XqlqKpFgkytxFA">                                        
                                    </div>
                                    <div class="swiper-slide">
                                       <img src="http://t3.gstatic.com/images?q=tbn:ANd9GcS1yIzftAzhxBKYn1QG3ziyxzWyOigoQSXFEAe1XqlqKpFgkytxFA"> 
                                    </div>
                                    <div class="swiper-slide">
                                       <img src="http://t3.gstatic.com/images?q=tbn:ANd9GcS1yIzftAzhxBKYn1QG3ziyxzWyOigoQSXFEAe1XqlqKpFgkytxFA"> 
                                    </div>
                                    <div class="swiper-slide"><img src="http://t3.gstatic.com/images?q=tbn:ANd9GcS1yIzftAzhxBKYn1QG3ziyxzWyOigoQSXFEAe1XqlqKpFgkytxFA"> 
                                    </div>
                                    <div class="swiper-slide"><img src="http://t3.gstatic.com/images?q=tbn:ANd9GcS1yIzftAzhxBKYn1QG3ziyxzWyOigoQSXFEAe1XqlqKpFgkytxFA"> 
                                    </div>
                                    <div class="swiper-slide">
                                        <?= HTML::image('/assets/images/tmp/carousel/img1.jpg') ?>
                                    </div>
                                   
                                </div>
    
                                <div class="swiper-pagination">
                                    <div class="swiper-prev">
                                        left
                                    </div>
                                    <div...

CSS

.swiper-container .swiper-slide {
      max-width: 700px;
      margin-left: 3px;
      margin-right: 0!important;
      display: inline-block;
      width: auto;
      overflow: hidden;
    }
    .swiper-container .swiper-slide img {
      width: auto;
    }
    .swiper-container .swiper-slide:first-child {
      margin-left: 0;
    }
    .swiper-wrapper * {
      height: 100%;
    }
    .swiper-container {
      height: 100%;
    }
    .swiper-container-horizontal > .swiper-pagination {
      bottom: auto;
      top: 50%;
      margin-top: -60px;
    }
    .swiper-prev,
    .swiper-next {
      width: 60px;
      height: 120px;
      background: rgba(0, 0, 0, 0.2);
      line-height: 150px;
      cursor: pointer;
      border-radius: 3px;
      -webkit-transition: all 0.2s;
      -moz-transition: all 0.2s;
      -o-transition: all 0.2s;
      transition: all 0.2s;
    }
    .swiper-prev {
      margin-left: 45px;
      float: left;
    }
    .swiper-next {
      margin-right: 45px;
      float: right;
    }

JavaScript

$(document).ready(function(){
        
        var swiper = new Swiper('.swiper-container', {
            slidesPerView: 'auto',
            nextButton: '.swiper-next',
            prevButton: '.swiper-prev',
            paginationClickable: true
        });


        var imgHeight = $(window).width()/2;
        $('.swiper-slide').each(function(){
            var width = $(this).children('img').width();
            $(this).css('width', width + 'px');
        });
        $('.block-carousel').css('height', imgHeight + 'px');
    });
    $(window).resize(function() {
        var imgHeight = $(window).width()/2;
        $('.swiper-slide').each(function(){
            var width = $(this).children('img').width();
            $(this).css('width', width + 'px');
        });
        $('.block-carousel').css('height', imgHeight + 'px');
    });