Bootstrap 4 Carousel Multiple Frames At Once And Slide By One

Another question was asked on the same need (that question) for bootstrap 3 but the proposed solutions don't work with Bootstrap 4. The image of this post explains very well what I

Solution 1:

    $('#carousel-example-generic').on('slid.bs.carousel', function () {
        $(".carousel-item.active:nth-child(" + ($(".carousel-inner .carousel-item").length -1) + ") + .carousel-item").insertBefore($(".carousel-item:first-child"));
        $(".carousel-item.active:last-child").insertBefore($(".carousel-item:first-child"));
    });   

.carousel-item.active,
        .carousel-item.active + .carousel-item,
        .carousel-item.active + .carousel-item  + .carousel-item {
           width: 33.3%;
           display: block;
           float:left;
        }  

<linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css"rel="stylesheet"/><h1>Hello, world!</h1><divclass="container"><divid="carousel-example-generic"class="carousel slide"data-ride="carousel"><olclass="carousel-indicators"><lidata-target="#carousel-example-generic"data-slide-to="0"class="active"></li><lidata-target="#carousel-example-generic"data-slide-to="1"></li><lidata-target="#carousel-example-generic"data-slide-to="2"></li></ol><divclass="carousel-inner"role="listbox"><divclass="carousel-item active"><imgdata-src="holder.js/300x200?text=1"></div><divclass="carousel-item"><imgdata-src="holder.js/300x200?text=2"></div><divclass="carousel-item"><imgdata-src="holder.js/300x200?text=3"></div><divclass="carousel-item"><imgdata-src="holder.js/300x200?text=4"></div><divclass="carousel-item"><imgdata-src="holder.js/300x200?text=5"></div><divclass="carousel-item"><imgdata-src="holder.js/300x200?text=6"></div><divclass="carousel-item"><imgdata-src="holder.js/300x200?text=7"></div></div><aclass="left carousel-control"href="#carousel-example-generic"role="button"data-slide="prev"><spanclass="icon-prev"aria-hidden="true"></span><spanclass="sr-only">Previous</span></a><aclass="right carousel-control"href="#carousel-example-generic"role="button"data-slide="next"><spanclass="icon-next"aria-hidden="true"></span><spanclass="sr-only">Next</span></a></div></div><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.1/holder.min.js"></script>

Solution 2:

Update 2018

Take a look at the Bootstrap 4 docs, and change the markup to Bootstrap 4:

http://bootply.com/SObwIezDyx

Bootstrap 4 Beta options: https://stackoverflow.com/a/20008623/171456