原文:https://www . geesforgeks . org/how-design-半页轮播-in-bootstrap/

它可以使用“bootstrap.js”或“bootstrap.min.js”包含在您的网页中。在 Internet Explorer 中不正确支持旋转木马，这是因为它们使用 CSS3 过渡和动画来实现幻灯片效果。【Bootstrap Carousel】是你网页的图片幻灯片，让它看起来更有吸引力。但是普通的 Bootstrap Carousel 拍下了整个网页，如果使用的图片尺寸很大，Bootstrap Carousel 还有一个问题，就是页面变大的时候会放大。为了处理这种情况，在本文中，我们将设计一个仅占页面一半的引导转盘。
以下示例说明了上述方法:
示例:在此示例中，我们将更改三个类别 CSS 属性的值，它们是转盘-内部、项目.活动的和项目 img 。它将固定页面转盘的高度。

超文本标记语言




    
    
            cOntent=">
            href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity=
"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
        crossorigin="anonymous">
    
    
    


    

        

            class="carousel slide carousel-fade"
            data-ride="carousel" >
            
            

                
1.                     data-slide-to="0"
                       class="active">

                
2.                     data-slide-to="1">

                
3.                     data-slide-to="2">

            

            
            

                

                    

                        "https://www.geeksforgeeks.org/wp-content/uploads/html.png"
                            alt="First slide">
                        

                    

                

                

                    
                    

                        "https://www.geeksforgeeks.org/wp-content/uploads/CSS.png"
                            alt="Second slide">
                        

                    

                

                

                    
                    

                        "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190531150437/Bootstrap_image.png"
                            alt="Third slide">
                        

                    

                

            

            
                        href="#carousel1" role="button"
            data-slide="prev">
                                    aria-hidden="true">
                Previous
            
                        href="#carousel1" role="button"
            data-slide="next">
                                    aria-hidden="true">
                Next
            
        

    

输出:

支持的浏览器:

• 谷歌 Chrome


• 微软边缘


• 火狐浏览器


• 歌剧


• 旅行队