A
A
Alexander Sidorov2019-01-22 14:40:31
Slick
Alexander Sidorov, 2019-01-22 14:40:31

Missing svg tag from shadow-root when rebuilding slider elements?

Problem: when rebuilding (slidesToShow) elements in slider slick from slick-slide elements, those elements that are visible on the screen, the svg tag from shadow-root(sprite) disappears, as soon as they disappear from the screen, the tag appears and the icon is visible.
Where is the problem: Chrome, Opera, Safari. Latest versions.
Works: ie 10.11. Edge, mozila latest version.
At the same time, there is no such problem in owl carousel 2.
Only default styles were applied to the slider, no styles were added to svg.

@import "../../../../node_modules/normalize.css/normalize";
@import "../../../../node_modules/slick-carousel/slick/slick.scss";
@import "../../../../node_modules/slick-carousel/slick/slick-theme.scss";
@import "../../../../node_modules/owl.carousel/src/scss/owl.carousel.scss";
@import "../../../../node_modules/owl.carousel/src/scss/owl.theme.default.scss";

markup
.container 
    .slider.owl-theme.owl-carousel
      .item
        a(href="#")
          +icon('share')
      .item
        a(href="#")
          +icon('share')
      .item
        a(href="#")
          +icon('share')
    .slider1
      .item
        a(href="#")
          +icon('share')
      .item
        a(href="#")
          +icon('share')
      .item
        a(href="#")
          +icon('share')

Top slider owl carousel 2 (icons visible)
5c47028ddfa64950266037.png
I am using svg4everybody plugin.
Two slider settings
$('.slider1').slick({
        slidesToShow: 3,
        responsive: [{
                breakpoint: 768,
                settings: {
                    slidesToShow: 2,
                }
            },
            {
                breakpoint: 576,
                settings: {
                    slidesToShow: 1,
                }
            }
        ]
    });
    $('.slider').owlCarousel({
        items: 3,
        responsive: {
            0: {
                items: 1
            },
            576: {
                items: 2
            },
            768: {
                items: 3
            }
        }
    });
});

SVG task
module.exports = function () {
    $.gulp.task('svg', () => {
        return $.gulp.src(svgPath.input)
            .pipe(svgmin({
                js2svg: {
                    pretty: true
                }
            }))
            .pipe(cheerio({
                run: function ($) {
                    $('[fill]').removeAttr('fill');
                    $('[stroke]').removeAttr('stroke');
                    $('[style]').removeAttr('style');
                },
                parserOptions: {xmlMode: true}
            }))
            .pipe(replace('>', '>'))
            .pipe(svgSprite({
                mode: {
                    symbol: {
                        sprite: "sprite.svg"
                    }
                }
            }))
            .pipe($.gulp.dest(svgPath.output));
    });
};

Answer the question

In order to leave comments, you need to log in

1 answer(s)
A
Alexander Sidorov, 2019-01-22
@SidorovAN

Problem solved.
Added options to the svg4everybody plugin:
nosvg: true, // shiv and elements and use image fallbacks
polyfill: true // polyfill elements for External Content

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question