如何在一个唤醒上左右两个div?

时间:2017-01-04 05:05:02

标签: css html5 slider

像这样在图片中显示我正在尝试但是什么都没发生我该怎么办?

enter image description here

滑块                                            

我在这里

                             

          <div class="carousel-inner" role="listbox">

         <div class="item active pic">

            <div class="container1 container">

            <h1><a href="#">A WORLD OF TOMORROW </a></h1>
                   <h2><a href="#">SEEKING INSPIRATION AND EQUILIBRIUM IAGE</a></h2>
                   <p><a href="#">Bringing together members of the public with leaders and experts from around the globe to discuss emerging issues and envision a brighter future together</a></p>
         </div>
        <img src="img/SOT_banner1.jpg" >
         </div>
            <div class="item pic">
              <div class="container1 container">
                <h1><a href="#">A WORLD OF TOMORROW </a></h1>
                  <h2><a href="#">SEEKING INSPIRATION AND EQUILIBRIUM IN A NEW AGE</a></h2>
                    <p><a href="#">11-12 March, 2017</a></p>
               </div>
                <img src="img/SOT_banner2.jpg" >
              </div>


            <div class="item pic">
              <div class="container1 container">
                <h1><a href="#">A WORLD OF TOMORROW </a></h1>
                  <h2><a href="#">SEEKING INSPIRATION AND EQUILIBRIUM IN A NEW AGE</a></h2>
                    <p><a href="#">Pak-China Friendship Centre</a></p>
            </div>
              <img src="img/SOT_banner3.jpg" >
             </div>

            <div class="item pic">
              <div class="container1 container">
                <h1><a href="#">A WORLD OF TOMORROW </a></h1>
                    <h2><a href="#">SEEKING INSPIRATION AND EQUILIBRIUM IN A NEW AGE</a></h2>
                    <p><a href="#">More than 40 panel discussions, debates, interactive workshops, performances and much, much more</a></p>
             </div>
             <img src="img/SOT_banner4.jpg" >
             </div>


           </div>

          </div>
       </div>

      <!-- slider-->

这里

      .container1{
            position:absolute;
            width:40%;
            height:auto;
            margin-top:150px;
            text-align:center;}
            .pic{
                width:100%;
                position:relative;}
        .upper{
            position:relative;
            width:30%;
            height:500px;
            background-color:#F00;
            float:right;}

1 个答案:

答案 0 :(得分:0)

您尝试复制的网站是建立在Joomla上的。因此,他们可能会将Dj-imagesliderGk_university template一起用作滑块。为了使这个主题和插件工作,你需要安装Joomla或找到另一个CMS的替代解决方案(如果你是在CMS之后)。

您提供的代码显然缺乏其他解释。

如果您只是在滑块上查看Bootstrap carousel example。以下是补充外部链接的示例代码:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <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" role="listbox">
    <div class="item active">
      <img class="first-slide" src="http://cdn.images.express.co.uk/img/dynamic/128/590x/kittens-615454.jpg" alt="First slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>Example headline.</h1>
          <p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>
          <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
        </div>
      </div>
    </div>
    <div class="item">
      <img class="second-slide" src="http://cdn.images.express.co.uk/img/dynamic/128/590x/kittens-615454.jpg" alt="Second slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>Another example headline.</h1>
          <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
          <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
        </div>
      </div>
    </div>
    <div class="item">
      <img class="third-slide" src="http://cdn.images.express.co.uk/img/dynamic/128/590x/kittens-615454.jpg" alt="Third slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>One more for good measure.</h1>
          <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
          <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
        </div>
      </div>
    </div>
  </div>
</div>