滑块区域外的 Bootstrap 4 beta 轮播箭头

Posted

技术标签:

【中文标题】滑块区域外的 Bootstrap 4 beta 轮播箭头【英文标题】：Bootstrap 4 beta carousel arrows outside slider area 【发布时间】：2018-04-07 05:53:24 【问题描述】：

我在 Bootstrap 4 beta 中制作了一个纯文本轮播。如何将箭头从滑块区域中移出，在它之外？我尝试搜索谷歌并在这里但一无所获。由于轮播只有文本，所以轮播控制箭头位于文本的某些部分之上。

这是我所有的代码。我也将它添加到 https://codepen.io/mlegg10/pen/wrLJVN

.carousel 
  margin: 1.5rem;

.carousel-inner 
  height: auto;


.carousel-control.left 
  margin-left: -25px;


.carousel-control.right 
  margin-right: -25px;

<script src="https://use.fontawesome.com/a0aac8df13.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    
<div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="2000">
        
<div class="carousel-inner row w-100 mx-auto" role="listbox">
            
<div class="carousel-item col-md-6 active">
                
<blockquote class="blockquote">
<p>Attendees Rated The Program An Overwhelming Success. Your Tools, Techniques And Thought Provoking Ideas On Leadership, Communication Skills And Attitude Left Folks Wanting More.</p>
<footer class="blockquote-footer"><cite>Vickie Doyle, Vice President, Membership<br>
Tucson Convention & Visitors Bureau</cite></footer>
</blockquote>          
</div>
  
     
<div class="carousel-item col">
                
<blockquote class="blockquote">
<p>Since Our Seminar, Our Management Team Has Taken More Responsibility In Working With All New Hires.</p>
<footer class="blockquote-footer"><cite>Dominic R. Palmiers, CEO<br>
Odyssey Foods, LLC</cite></footer>
</blockquote>       
</div>
            

<div class="carousel-item col">
                
<blockquote class="blockquote text-center">
<p>&quot;Our Most Concise Training To Date!</p>
<footer class="blockquote-footer"><cite>John Comeau<br>
Mohegan Sun Casino</cite></footer>
</blockquote>           
</div>


<div class="carousel-item col">
                
<blockquote class="blockquote">
<p>Several Commented On How Mr. Scott Conveyed A Sense of Understanding And Genuine Desire To Provide Them With Concrete And Realistic Answers To The Questions And Concerns.</p>
<footer class="blockquote-footer"><cite>Maria Meza, Training & Development Manager<br>
Tohono O'odham Gaming Authority</cite></footer>
</blockquote>         
</div>
            

<div class="carousel-item col">
                
<blockquote class="blockquote">
<p>It Was One Of The Best Trainings I've Ever Seen.  Our Gaming Board Attended A Session And Just Loved It!</p>
<footer class="blockquote-footer"><cite>Marcus Diaz, Director of Training<br>
Casino Del Sol</cite></footer>
</blockquote>           
</div>
            

<div class="carousel-item col">
                
<blockquote class="blockquote">
<p>Your Customer Service Training On November 11, 2003, Was One Of The Best Training Events I Have Ever Experienced!</p>
<footer class="blockquote-footer"><cite>Robert Taschetta, Help Desk Manager<br>
Best Western International</cite></footer>
</blockquote>             
</div>
            

<div class="carousel-item col">
                
<blockquote class="blockquote">
<p>The Feedback That I Received From The Employees Was Overwhelming...The Information You Passed On & Taught Them Was Invaluable.  I Have Seen Many Of The Golden Eagle Distributors Employees Use A Wide Variety Of The Techniques That You Taught On A Daily Basis & People Are Thinking About Their Actions.</p> 
<footer class="blockquote-footer"><cite>Richard H. Wortman, Corporate Training Director<br>
Golden Eagle Distributors</cite></footer>
</blockquote>
            
</div>
            

<div class="carousel-item col">
                
<blockquote class="blockquote">
<p>In A Very Short Period of Time Our Level of Guest Service & Professionalism Has Dramatically Improved...You Built A Much Stronger And Confident Team.</p>
<footer class="blockquote-footer"><cite>Lynn W. Smith, General Manager<br>
Smuggler's Inn</cite></footer>
</blockquote>	
</div>
            

<div class="carousel-item col">
                
<blockquote class="blockquote">
<p>I Was Skeptical About This Experiential Training, But It Was Phenomenal!</p> 
<footer class="blockquote-footer"><cite>Ana Zysko, Director of Training<br>
Inn Of The Mountain Gods Resort & Casino</cite></footer>
</blockquote>           
</div>
            

<div class="carousel-item col">
                
<blockquote class="blockquote">
<p>Peter Scott's Programs Are All About Content & Core Values.</p>
<footer class="blockquote-footer"><cite>Dr. Thomas Dullien, Executive Director Human Resources & HR Development<br>
Barona Resort & Casino</cite></footer>
</blockquote>        
</div>
       
 
</div>
        
<a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
            
<i style="color:#FF8C46; text-decoration: none;" class="fa fa-chevron-circle-left fa-2x"></i>
            
<span class="sr-only">Previous</span>
</a>
        
<a class="carousel-control-next text-faded" href="#carouselExample" role="button" data-slide="next">
            
<i style="color:#FF8C46; text-decoration: none;" class="fa fa-chevron-circle-right fa-2x"></i>
            
<span class="sr-only">Next</span>
</a>
    
</div>
</div>
<div class="clearfix"></div>

【问题讨论】：

【参考方案1】：

你使用了错误的类：

.carousel-control.left 
  margin-left: -25px;


.carousel-control.right 
  margin-right: -25px;

应该是：（增加的边距）

.carousel-control-prev 
  margin-left: -100px;


.carousel-control-next 
  margin-right: -100px;

演示： 

.carousel 
  margin: 1.5rem;

.carousel-inner 
  height: auto;


.carousel-control-prev 
  margin-left: -100px;


.carousel-control-next 
  margin-right: -100px;

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/a0aac8df13.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    
<div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="2000">
        
<div class="carousel-inner row w-100 mx-auto" role="listbox">
            
<div class="carousel-item col-md-6 active">
                
<blockquote class="blockquote">
<p>Attendees Rated The Program An Overwhelming Success. Your Tools, Techniques And Thought Provoking Ideas On Leadership, Communication Skills And Attitude Left Folks Wanting More.</p>
<footer class="blockquote-footer"><cite>Vickie Doyle, Vice President, Membership<br>
Tucson Convention & Visitors Bureau</cite></footer>
</blockquote>          
</div>
  
     
<div class="carousel-item col">
                
<blockquote class="blockquote">
<p>Since Our Seminar, Our Management Team Has Taken More Responsibility In Working With All New Hires.</p>
<footer class="blockquote-footer"><cite>Dominic R. Palmiers, CEO<br>
Odyssey Foods, LLC</cite></footer>
</blockquote>       
</div>
            

<div class="carousel-item col">
                
<blockquote class="blockquote text-center">
<p>&quot;Our Most Concise Training To Date!</p>
<footer class="blockquote-footer"><cite>John Comeau<br>
Mohegan Sun Casino</cite></footer>
</blockquote>           
</div>


<div class="carousel-item col">
                
<blockquote class="blockquote">
<p>Several Commented On How Mr. Scott Conveyed A Sense of Understanding And Genuine Desire To Provide Them With Concrete And Realistic Answers To The Questions And Concerns.</p>
<footer class="blockquote-footer"><cite>Maria Meza, Training & Development Manager<br>
Tohono O'odham Gaming Authority</cite></footer>
</blockquote>         
</div>
            

<div class="carousel-item col">
                
<blockquote class="blockquote">
<p>It Was One Of The Best Trainings I've Ever Seen.  Our Gaming Board Attended A Session And Just Loved It!</p>
<footer class="blockquote-footer"><cite>Marcus Diaz, Director of Training<br>
Casino Del Sol</cite></footer>
</blockquote>           
</div>
            

<div class="carousel-item col">
                
<blockquote class="blockquote">
<p>Your Customer Service Training On November 11, 2003, Was One Of The Best Training Events I Have Ever Experienced!</p>
<footer class="blockquote-footer"><cite>Robert Taschetta, Help Desk Manager<br>
Best Western International</cite></footer>
</blockquote>             
</div>
            

<div class="carousel-item col">
                
<blockquote class="blockquote">
<p>The Feedback That I Received From The Employees Was Overwhelming...The Information You Passed On & Taught Them Was Invaluable.  I Have Seen Many Of The Golden Eagle Distributors Employees Use A Wide Variety Of The Techniques That You Taught On A Daily Basis & People Are Thinking About Their Actions.</p> 
<footer class="blockquote-footer"><cite>Richard H. Wortman, Corporate Training Director<br>
Golden Eagle Distributors</cite></footer>
</blockquote>
            
</div>
            

<div class="carousel-item col">
                
<blockquote class="blockquote">
<p>In A Very Short Period of Time Our Level of Guest Service & Professionalism Has Dramatically Improved...You Built A Much Stronger And Confident Team.</p>
<footer class="blockquote-footer"><cite>Lynn W. Smith, General Manager<br>
Smuggler's Inn</cite></footer>
</blockquote>	
</div>
            

<div class="carousel-item col">
                
<blockquote class="blockquote">
<p>I Was Skeptical About This Experiential Training, But It Was Phenomenal!</p> 
<footer class="blockquote-footer"><cite>Ana Zysko, Director of Training<br>
Inn Of The Mountain Gods Resort & Casino</cite></footer>
</blockquote>           
</div>
            

<div class="carousel-item col">
                
<blockquote class="blockquote">
<p>Peter Scott's Programs Are All About Content & Core Values.</p>
<footer class="blockquote-footer"><cite>Dr. Thomas Dullien, Executive Director Human Resources & HR Development<br>
Barona Resort & Casino</cite></footer>
</blockquote>        
</div>
       
 
</div>
        
<a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
            
<i style="color:#FF8C46; text-decoration: none;" class="fa fa-chevron-circle-left fa-2x"></i>
            
<span class="sr-only">Previous</span>
</a>
        
<a class="carousel-control-next text-faded" href="#carouselExample" role="button" data-slide="next">
            
<i style="color:#FF8C46; text-decoration: none;" class="fa fa-chevron-circle-right fa-2x"></i>
            
<span class="sr-only">Next</span>
</a>
    
</div>
</div>
<div class="clearfix"></div>

【讨论】：

【参考方案2】：

我想确认G-Cyr's的解决方案，但指出一个问题，因此提出另一种解决方案。

问题 如果使用边距值，则只会将元素相对远离其实际位置。由于轮播箭头已向外移动，因此它们可能不可见。如果滑块是页面上唯一的内容元素并且视口不利，就会出现这种情况。见下图：

在这里，箭头是可见的，因为视口是有利的。

在这里，浏览器没有切换到下一个断点，因此轮播箭头在从原始位置移开时不可见。

解决方案： 因此，我想提出一个基于 Bootstrap 提供的flex classes 的解决方案。首先，我们要取箭头的绝对位置（见下面的Css）。然后我们将 html 文档中的元素重新排列为 1) carousel-control-prev、2) carousel-inner 和 3) carousel-control-next。此外，我们必须将Flex classes 添加到轮播容器中。在我的示例中，这些是“d-flex justify-content-around align-items-center”类。为确保箭头在滑块的整个高度上都是可点击的，您必须为它们提供“对齐-自拉伸”类。这是我的例子：

CSS

.carousel-control-prev, .carousel-control-next 
    position: inherit;

HTML

<div id="word-carousel" class="carousel slide d-flex justify-content-around align-items-center" data-ride="carousel" data-interval="false">
    <a class="carousel-control-prev align-self-stretch" href="#word-carousel" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img class="d-block w-100" src="https://placeimg.com/800/400/nature" >
        </div>
        <div class="carousel-item">
            <img class="d-block w-100" src="https://placeimg.com/800/400/arch" >
        </div>      
    </div>
    <a class="carousel-control-next align-self-stretch" href="#word-carousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

注意事项：由于箭头默认为白色，您可能需要为它们着色。在我的示例中，由于清晰，我没有填充 Carousel 项目。我愿意接受改进建议。

【讨论】：

以上是关于滑块区域外的 Bootstrap 4 beta 轮播箭头的主要内容，如果未能解决你的问题，请参考以下文章

如何在 Bootstrap 4 中定位轮播指示器

Bootstrap 4 滑块仅文本推荐

Bootstrap 4 - 更改轮播控件的位置

ui滑块和bootstrap 3轮播在一起

Bootstrap carousel：如何同时滑动两个 carousel 滑块？

bootstrap怎么用滚动监听控制轮播