Injection breaking behaviour?

[polarathene]

I've got a small slider project I put together and used to test html-injector with. CodePen here, repo here.

Have been giving browser-sync a go and the carousel transitions to the next slide fine, when I update the html the page is refreshed. When adding html-injector to the mix , it's injecting the html but the transitions are not triggered by the timer or button interactions? Any idea what might be causing this behaviour? I can update the html again but the js related behaviour doesn't seem to be there unless I disable the html-injector watch task. There appears to be no errors in the console.

var bs = require('browser-sync').create();
var bs_html = require('bs-html-injector');

gulp.task('browser-sync', function() {
    bs.use(bs_html, {
        files: "*.html"
    });
    bs.init({
        server: {
            baseDir: "./dist"
        },
        browser: ["google chrome", "firefox"]
    });
});

gulp.task('html-copy', function() {
    return gulp.src('./src/index.html')
        .pipe(gulp.dest('./dist/'));
        //.pipe(bs.stream()); // enabled prior to html-injector usage, refreshed the page
})

gulp.task('default', ['browser-sync'], function () {
    gulp.watch("./src/*.html", ['html-copy']);
    gulp.watch("./dist/*.html", bs_html); // html-injector functionality, enabled is breaking js functionality?
});

[shakyShane]

@polarathene html injection is not well suited to projects that have DOM manipulations.

It was designed as a tool you would use for layout/styling at the beginning of a project. (it does diffing server side, so cannot know how the dom looks on page)

That being said, with the restrictions option you could target 'static' sections of your page still https://github.com/shakyShane/html-injector/blob/master/examples/inline.restrictions.js