如何通过 "Owl Carousel 2" 使用 SVG

Question

我想在“Owl Carousel 2”中排列图像和 SVG 时将 SVG 与图像匹配。

图片一直是正方形的，SVG稍微长一点我也解决不了问题

如果我扩大或缩小“.right”的宽度，SGV就会变长如下图↓

enter image description here

如何制作 SVG 正方形？

HTML:

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" type="text/css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<div class="flex">
  <div class="left">
    <p>.left</p>
  </div>
  <div class="right">
    <p>.right</p>
    <div id="owl-example" class="owl-carousel">
    </div>
  </div>  
</div>

jQuery:

// Slider activation
$(document).ready(function() {

    // Insert samples
    var img = `<div><img src="https://placehold.jp/150x150.png"></div>`;
    var svg = getSvg('image'); 
    for (var i = 0;  i < 10;  i++) {
        if( ( i % 2 ) != 0 ) {
            $("#owl-example").append(img);
        }else{
            $("#owl-example").append(svg);
        }
    }

    // owlCarousel
    const right = getSvg('icon-cheveron-right'); 
    const left  = getSvg('icon-cheveron-left');
    $("#owl-example").owlCarousel({
        loop: false,
        margin: 10,
        nav: true,
        autoHeight: true,
        navText: [left, right],    
        dots: false,
        responsiveBaseElement:$(".right")[0],
        responsive  :{
            0:{
                items:2
            },
            340:{
                items:3
            },        
            510:{
                items:4
            },
            680:{
                items:5
            },        
        }
    });    

});

// Prepend all SVG in body
$('body').prepend( prependtSvgs() );    
function prependtSvgs(){
    return `
    <svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <defs>  
            <!-- 画像 -->
            <symbol id="icon-image" viewBox="0 0 24 24">
            <path d="M5 2c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v14c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h14c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-14c0-0.828-0.337-1.58-0.879-2.121s-1.293-0.879-2.121-0.879zM11 8.5c0-0.69-0.281-1.316-0.732-1.768s-1.078-0.732-1.768-0.732-1.316 0.281-1.768 0.732-0.732 1.078-0.732 1.768 0.281 1.316 0.732 1.768 1.078 0.732 1.768 0.732 1.316-0.281 1.768-0.732 0.732-1.078 0.732-1.768zM9 8.5c0 0.138-0.055 0.262-0.146 0.354s-0.216 0.146-0.354 0.146-0.262-0.055-0.354-0.146-0.146-0.216-0.146-0.354 0.055-0.262 0.146-0.354 0.216-0.146 0.354-0.146 0.262 0.055 0.354 0.146 0.146 0.216 0.146 0.354zM7.414 20l8.586-8.586 4 4v3.586c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293zM20 12.586l-3.293-3.293c-0.391-0.391-1.024-0.391-1.414 0l-10.644 10.644c-0.135-0.050-0.255-0.129-0.356-0.23-0.182-0.182-0.293-0.431-0.293-0.707v-14c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293h14c0.276 0 0.525 0.111 0.707 0.293s0.293 0.431 0.293 0.707z"></path>
            </symbol>
            <!-- 矢印 -->
            <symbol id="icon-cheveron-right" viewBox="0 0 20 20">
            <path d="M12.95 10.707l0.707-0.707-5.657-5.657-1.414 1.414 4.242 4.243-4.242 4.243 1.414 1.414 4.95-4.95z"></path>
            </symbol>
            <symbol id="icon-cheveron-left" viewBox="0 0 20 20">
            <path d="M7.050 9.293l-0.707 0.707 5.657 5.657 1.414-1.414-4.242-4.243 4.242-4.243-1.414-1.414z"></path>
            </symbol>
        </defs>
    </svg>
    `;        
}

// Get single SVG
function getSvg( name ){
    return `<svg class="icon icon-${name}"><use xlink:href="#icon-${name}"></use></svg>\n`;
}

CSS:

.flex {
    display: flex;
}
.right, .left {
    width: 50%;
    background: orange;
    margin: 10px;
    position: relative;
}
.icon.icon-image {
    width: 100%;
    height: 100%;
    background: red;
}

Answer 1

// Slider activation
$(document).ready(function () {

    // Insert samples
    var img = `<div><img src="https://placehold.jp/150x150.png" class="img-fluid"></div>`; // I wrapped img in a div
    var svg = getSvg('image');
    for (var i = 0; i < 10; i++) {
        if ((i % 2) != 0) {
            $("#owl-example").append(img);
        } else {
            $("#owl-example").append(svg);
        }
    }

    // owlCarousel
    const right = getSvg('icon-cheveron-right');
    const left = getSvg('icon-cheveron-left');
    $("#owl-example").owlCarousel({
        loop: false,
        margin: 10,
        nav: true,
        autoHeight: true,
        navText: [left, right],
        dots: false,
        responsiveBaseElement: $(".right")[0],
        responsive: {
            0: {
                items: 2
            },
            340: {
                items: 3
            },
            510: {
                items: 4
            },
            680: {
                items: 5
            },
        },
        onInitialized: setOwlStageHeight,
        onResized: setOwlStageHeight,
        onTranslated: setOwlStageHeight
    });
    function setOwlStageHeight(event) {
        var maxHeight = 0;
        $('.owl-item.active').each(function () { // LOOP THROUGH ACTIVE ITEMS
            var thisHeight = parseInt($(this).height());
            maxHeight = (maxHeight >= thisHeight ? maxHeight : thisHeight);
        });
    }


// Prepend all SVG in body
    $('body').prepend(prependtSvgs());
    function prependtSvgs() {
        return `
    <div><svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <defs>  
            <!-- 画像 -->
            <symbol id="icon-image" viewBox="0 0 24 24">
            <path d="M5 2c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v14c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h14c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-14c0-0.828-0.337-1.58-0.879-2.121s-1.293-0.879-2.121-0.879zM11 8.5c0-0.69-0.281-1.316-0.732-1.768s-1.078-0.732-1.768-0.732-1.316 0.281-1.768 0.732-0.732 1.078-0.732 1.768 0.281 1.316 0.732 1.768 1.078 0.732 1.768 0.732 1.316-0.281 1.768-0.732 0.732-1.078 0.732-1.768zM9 8.5c0 0.138-0.055 0.262-0.146 0.354s-0.216 0.146-0.354 0.146-0.262-0.055-0.354-0.146-0.146-0.216-0.146-0.354 0.055-0.262 0.146-0.354 0.216-0.146 0.354-0.146 0.262 0.055 0.354 0.146 0.146 0.216 0.146 0.354zM7.414 20l8.586-8.586 4 4v3.586c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293zM20 12.586l-3.293-3.293c-0.391-0.391-1.024-0.391-1.414 0l-10.644 10.644c-0.135-0.050-0.255-0.129-0.356-0.23-0.182-0.182-0.293-0.431-0.293-0.707v-14c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293h14c0.276 0 0.525 0.111 0.707 0.293s0.293 0.431 0.293 0.707z"></path>
            </symbol>
            <!-- 矢印 -->
            <symbol id="icon-cheveron-right" viewBox="0 0 20 20">
            <path d="M12.95 10.707l0.707-0.707-5.657-5.657-1.414 1.414 4.242 4.243-4.242 4.243 1.414 1.414 4.95-4.95z"></path>
            </symbol>
            <symbol id="icon-cheveron-left" viewBox="0 0 20 20">
            <path d="M7.050 9.293l-0.707 0.707 5.657 5.657 1.414-1.414-4.242-4.243 4.242-4.243-1.414-1.414z"></path>
            </symbol>
        </defs>
    </svg></div>
    `;
    }

// Get single SVG
    function getSvg(name) {
        return `<div><svg class="icon icon-${name}"><use xlink:href="#icon-${name}"></use></svg></div>\n`; // I wrapped svg in a div
    }
});

.flex {
    display: flex;
}
.right, .left {
    width: 50%;
    background: orange;
    margin: 10px;
    position: relative;
}
.icon.icon-image {
    width: 100%;
    height: 100%;
    background: red;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" type="text/css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" type="text/css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<div class="flex">
    <div class="left">
        <p>.left</p>
    </div>
    <div class="right">
        <p>.right</p>
        <div id="owl-example" class="owl-carousel">
        </div>
    </div>  
</div>

如何通过 "Owl Carousel 2" 使用 SVG

How to use SVG with "Owl Carousel 2"

javascript

jquery

css

svg

owl-carousel