Question

我正在尝试制作只有滑动段而不是背景的旋转木马，而不是注册和登录按钮。

我没有把bootstrap库放在代码片段中，但我确信人们使用bootstrap会很容易看到我要插入的内容但我不知道怎么做。这是我的代码：

body {
	background: none;
	color:white;
}

a{color:white;}

.full {
  background: url(../img/1.jpg) rgba(36,36,36,0.8) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.overlay{
	position:absolute;
	width:100%;
	height:100%;
	background:rgba(36,36,36,0.8);
	  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

	
}
.container{
	margin-top: 200px;
	margin-bottom: 50px;
}

h1{
	color:rgba(255,255,0,1);
}

#registre{
	margin-top:100px;
	margin-left:-20px;
}

#circle-1 p{
	color:black;
	text-align:center;
	background:rgba(255,255,0,1);
	border:2px solid rgba(255,255,0,1);
	border-radius:40px;
	padding: 10px 0 10px 0;
}

#circle-2 p{
	text-align:center;
	color:white;
	border:2px solid rgba(255,255,0,1);
	border-radius:40px;
	padding: 10px 0 10px 0;
}

#circle-1 p, #circle-2 p{
	-webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

#circle-2 p:hover{
	color:black;
	background:rgba(255,255,0,1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="overlay">
    <div class="container">
        <div class="row">
       
            <div class="page-header col-md-6">
                <h1>Bienvenue sur ite-compet</h1>
                <p>Vous êtes étudiant à Itecom, Inscrivez-vous 
et connectez-vous au réseau Ite-compet
pour tester vos compétences face aux autres étudiants</p>
            
           <div id="registre">
            <a href="#"><div class="col-lg-4 col-md-4 col-sm-3 col-xs-6" id="circle-1">
                <p>S'enregistrer</p>
            </div></a>
            
             <a href="#"><div class="col-lg-4 col-md-4 col-sm-3 col-xs-6" id="circle-2">
                <p>Connexion</p>
            </div></a>
            </div>
         </div>
       </div>
    </div>
    </div>

Answer 1

试试这个：

 <!-- Carousel  -->
    <div id="myCarousel" class="carousel slide">
    <paper-shadow z="2">
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
      </ol>

      <div class="carousel-inner">
        <div class="item active">
          <div class="container">
            <div class="row">
              <div class="col-lg-6 col-md-6 hidden-sm hidden-xs" style="align=center">
            <img class="carousel-img visible-md visible-lg" style="margin-top:100px; align=middle"src="image1.png">
            </div>
            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
            <div style="color:rgb(244,244,244); margin-top:200px; margin-left:0px">
              <h1>Slide 1</h1>
              <p>The amazing text</p>
            </div>
           </div>

            </div>
          </div>
        </div>
        <div class="item">


          <div class="container">
            <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
            <div style="color:rgb(244,244,244); margin-top:150px; margin-left:0px">
              <h1>Slide 2 </h1>
              <p>The amazing text</p>
            </div>
           </div>

            <div class="col-lg-6 col-md-6 hidden-sm hidden-xs" style="align=center">
            <img class="carousel-img visible-md visible-lg" style="margin-top:70px; align=middle"src="imgage2.png">
            </div>
            </div>
          </div>
        </div>

        <div class="item">
          <div class="container">
              <div class="row">
              <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
              <div style="color:rgb(244,244,244); margin-top:200px; margin-left:0px">
             <h1>Slide 3</h1> 
              <p>The Amazing Text</p>
              </div>
             </div>
             <div class="col-lg-6 col-md-6 hidden-sm hidden-xs" style="align=center">
            <img class="carousel-img visible-md visible-lg" style="margin-top:100px; align=middle"src="image3.png">
            </div>
              </div>
            </div>
          </div>
      </div>
      <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
      </paper-shadow>
    </div><!-- /.carousel -->

您还需要添加javascript

如何使用文本滑动制作Twitter Bootstrap轮播？

1 个答案: