how to put 2 divs left and right on one crousal? - css

Question

like this showing in the picture i am trying but nothing is happening what should i do?
slider
i am here
<div class="carousel-inner" role="listbox">
<div class="item active pic">
<div class="container1 container">
<h1>A WORLD OF TOMORROW </h1>
<h2>SEEKING INSPIRATION AND EQUILIBRIUM IAGE</h2>
<p>Bringing together members of the public with leaders and experts from around the globe to discuss emerging issues and envision a brighter future together</p>
</div>
<img src="img/SOT_banner1.jpg" >
</div>
<div class="item pic">
<div class="container1 container">
<h1>A WORLD OF TOMORROW </h1>
<h2>SEEKING INSPIRATION AND EQUILIBRIUM IN A NEW AGE</h2>
<p>11-12 March, 2017</p>
</div>
<img src="img/SOT_banner2.jpg" >
</div>
<div class="item pic">
<div class="container1 container">
<h1>A WORLD OF TOMORROW </h1>
<h2>SEEKING INSPIRATION AND EQUILIBRIUM IN A NEW AGE</h2>
<p>Pak-China Friendship Centre</p>
</div>
<img src="img/SOT_banner3.jpg" >
</div>
<div class="item pic">
<div class="container1 container">
<h1>A WORLD OF TOMORROW </h1>
<h2>SEEKING INSPIRATION AND EQUILIBRIUM IN A NEW AGE</h2>
<p>More than 40 panel discussions, debates, interactive workshops, performances and much, much more</p>
</div>
<img src="img/SOT_banner4.jpg" >
</div>
</div>
</div>
</div>
<!-- slider-->
css here
.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;}

Answer 1

The website you're trying to copy from is built on Joomla. So they're probably using Dj-imageslider as a slider along with Gk_university template. In order for this theme and plugin to work you need to install Joomla or find an alternative solution with another CMS (if you're after CMS).
The code you have provided is clearly lacking additional explanation.
If you're after just the slider have a look on Bootstrap carousel example. Here is the sample code to compliment the external link:
<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>