滑块
<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;}
答案 0 :(得分:0)
您尝试复制的网站是建立在Joomla上的。因此,他们可能会将Dj-imageslider与Gk_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>