I need to make Image Slider with two images per slide by using HTML and CSS alone.
What I have trying:
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<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>
<div class="col-sm-6">
<div class="carousel-inner">
<div class="item active">
<img src="./resources/images/image1.jpg" style="width:640px; height:280px;">
<div class="carousel-caption">
<h3>Image 1</h3>
<p>Image 1 Image 1</p>
</div>
</div>
<div class="item">
<img src="./resources/images/image2.jpg" alt="Image 2" style="width:640px; height:280px;">
<div class="carousel-caption">
<h3>Image 2</h3>
<p>Image 2 Image 2</p>
</div>
</div>
<div class="item">
<img src="./resources/images/image3.jpg" alt="Image 3" style="width:640px; height:280px;">
<div class="carousel-caption">
<h3>Image 3</h3>
<p>Image 3 Image 3</p>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="carousel-inner">
<div class="item active">
<img src="./resources/images/image4.jpg" alt="Image 4" style="width:640px; height:280px;">
<div class="carousel-caption">
<h3>Image 4</h3>
<p>Image 4 Image 4</p>
</div>
</div>
<div class="item">
<img src="./resources/images/image5.jpg" alt="Image 5" style="width:640px; height:280px;">
<div class="carousel-caption">
<h3>Image 5</h3>
<p>Image 5 Image 5</p>
</div>
</div>
<div class="item">
<img src="./resources/images/image6.jpg" alt="Image 6" style="width:640px; height:280px;">
<div class="carousel-caption">
<h3>Image 6</h3>
<p>Image 6 Image 6</p>
</div>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
The above code Shows only 1 image per slide(1st Column) and Empty space in 2nd Column.
Expected Output:
I need two columns with two images. When I hit Next Control, next two images will appear. When I hit Previous Control, previous two images will appear. (All this done by HTML and CSS alone not JS or others.)
I hope you all understand!
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<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>
<div class="col-sm-6">
<div class="carousel-inner">
<div class="item active">
<div class="col-sm-6">
<img src="./resources/images/image1.jpg" >
</div>
<div class="col-sm-6">
<img src="./resources/images/image1.jpg" >
</div>
<div class="carousel-caption">
<h3>Image 1</h3>
<p>Image 1 Image 1</p>
</div>
</div>
<div class="item">
<div class="col-sm-6">
<img src="./resources/images/image1.jpg" >
</div>
<div class="col-sm-6">
<img src="./resources/images/image1.jpg" >
</div>
<div class="carousel-caption">
<h3>Image 2</h3>
<p>Image 2 Image 2</p>
</div>
</div>
<div class="item">
<div class="col-sm-6">
<img src="./resources/images/image1.jpg" >
</div>
<div class="col-sm-6">
<img src="./resources/images/image1.jpg" >
</div>
<div class="carousel-caption">
<h3>Image 3</h3>
<p>Image 3 Image 3</p>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="carousel-inner">
<div class="item active">
<div class="col-sm-6">
<img src="./resources/images/image1.jpg" >
</div>
<div class="col-sm-6">
<img src="./resources/images/image1.jpg" >
</div>
<div class="carousel-caption">
<h3>Image 4</h3>
<p>Image 4 Image 4</p>
</div>
</div>
<div class="item">
<div class="col-sm-6">
<img src="./resources/images/image1.jpg" >
</div>
<div class="col-sm-6">
<img src="./resources/images/image1.jpg" >
</div>
<div class="carousel-caption">
<h3>Image 5</h3>
<p>Image 5 Image 5</p>
</div>
</div>
<div class="item">
<div class="col-sm-6">
<img src="./resources/images/image1.jpg" >
</div>
<div class="col-sm-6">
<img src="./resources/images/image1.jpg" >
</div>
<div class="carousel-caption">
<h3>Image 6</h3>
<p>Image 6 Image 6</p>
</div>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
you can do this
Related
I added 2 bootstrap 5 carousels on the same page, added unique ID to each of them, but sadly the second carousel mixes photos with the first carousel. It takes 2 photos from the previous slide. Adding unique ID's to each carousel didn't change the situation.
Is there a solution to this?
I checked also this post but it didn't help:
How to place two bootstrap carousels in the same page?
<!-- Bootstrap carousel 1 -->
<div class="container text-center my-3 mb-5">
<div class="row mx-auto my-auto justify-content-between">
<div id="Carousel-1" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<div class="col-md-4">
<div class="card">
<div class="card-img">
<img src="./images/person1.jpg" class="img-fluid">
</div>
<div class="card-img-overlay"><strong>John Smith</strong>
<p class="mt-0 me-2" style="font-size: 13px;">Administration</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card">
<div class="card-img">
<img src="./images/person2.jpg" class="img-fluid">
</div>
<div class="card-img-overlay"><strong>Sarah Smith</strong>
<p class="mt-0 me-2" style="font-size: 13px;">Finance</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card">
<div class="card-img">
<img src="./images/person3.jpg" class="img-fluid">
</div>
<div class="card-img-overlay"><strong>Roger Kensinghton</strong>
<p class="mt-0 me-2" style="font-size: 13px;">Security</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card">
<div class="card-img">
<img src="./images/person4.jpg" class="img-fluid">
</div>
<div class="card-img-overlay"><strong>Kelly Parker</strong>
<p class="mt-0 me-2" style="font-size: 13px;">Design</p>
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev bg-transparent w-aut" href="#Carousel-1" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next bg-transparent w-aut" href="#Carousel-1" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
<!-- Bootstrap carousel 2 -->
<div class="container text-center my-3 mb-5 carousel2">
<div class="row mx-auto my-auto justify-content-between">
<div id="Carousel-2" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<div class="col-md-4">
<div class="card">
<div class="card-img">
<img src="./images/woman1.jpg" class="img-fluid">
</div>
<div class="card-img-bottom"><strong>Jane Dow</strong>
<p class="mt-0 me-2" style="font-size: 13px;">CEO AXA Group</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card">
<div class="card-img">
<img src="./images/man1.jpg" class="img-fluid">
</div>
<div class="card-img-bottom"><strong>Dave Johnson</strong>
<p class="mt-0 me-2" style="font-size: 13px;">Marketing Manager Johnson's & Co</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card">
<div class="card-img">
<img src="./images/man2.jpg" class="img-fluid">
</div>
<div class="card-img-bottom"><strong>Roger Smith</strong>
<p class="mt-0 me-2" style="font-size: 13px;">CEO Hi-Tech Intl.</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card">
<div class="card-img">
<img src="./images/woman2.jpg" class="img-fluid">
</div>
<div class="card-img-bottom"><strong>Diana Russel</strong>
<p class="mt-0 me-2" style="font-size: 13px;">Manager Creativity Hub</p>
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev bg-transparent w-aut" href="#Carousel-2" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next bg-transparent w-aut" href="#Carousel-2" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
let items = document.querySelectorAll('.carousel .carousel-item')
items.forEach((el) => {
const minPerSlide = 3
let next = el.nextElementSibling
for (var i=1; i<minPerSlide; i++) {
if (!next) {
// wrap carousel by using first child
next = items[0]
}
let cloneChild = next.cloneNode(true)
el.appendChild(cloneChild.children[0])
next = next.nextElementSibling
}
})
because you use .carousal selector and class is present in both carousals use ids instead of class #Carousel-1 or #Carousel-2
let items = document.querySelectorAll('#Carousel-1 .carousel-item')
What I really want to achieve is that to put the background image to a specific height like I have one section which contains two divs I gave the section a background image
which is
background-image: linear-gradient(-207deg, #0EC573, #0093FF);
Now I want to achieve is the background image covers the whole of the Second div and some part of the first div
FULL CODE
<section class="company py-4" >
<div class="container">
<div class="row">
<div class="col-12">
<div class="mt-5 px-3">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="4000">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="img-fluid" src="{!! asset('images/Company/02.jpg') !!}">
<div class="mt-5 ">
</div>
</div>
<div class="carousel-item ">
<div class="justify-content-center align-items-center">
<img class="img-fluid" src="{!! asset('images/Company/01.jpg') !!}">
</div>
<div class="mt-5 ">
</div>
</div>
<div class="carousel-item">
<img class="img-fluid" src="{!! asset('images/Company/03.jpg') !!}">
<div class="mt-5 ">
</div>
</div>
<div class="carousel-item">
<img class="img-fluid" src="{!! asset('images/Company/04.jpg') !!}">
<div class="mt-5 ">
</div>
</div>
</div>
<!-- <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button"data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a> -->
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row justify-content-center align-items-center">
<div class="col-12 ">
<h1 class="text-left heading">Company</h1>
<p class="text-left description"> ALL THE DESCRIPTION</p>
</div>
</div>
</div>
</section>
Use it (See JSFiddle:https://jsfiddle.net/Lfxja1e5/7/) :
background-size: 100% 70%;
background-repeat: no-repeat;
**If you want it in bottom use:
background-position: bottom;
.company{
background-image:linear-gradient(-207deg,#0EC573, #0093FF);
background-size: 100% 70%;
background-repeat: no-repeat;
background-position: bottom;
}
<section class="company py-4" >
<div class="container d1">
<div class="row">
<div class="col-12">
<div class="mt-5 px-3">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="4000">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="img-fluid" src="{!! asset('images/Company/02.jpg') !!}">
<div class="mt-5 ">
</div>
</div>
<div class="carousel-item ">
<div class="justify-content-center align-items-center">
<img class="img-fluid" src="{!! asset('images/Company/01.jpg') !!}">
</div>
<div class="mt-5 ">
</div>
</div>
<div class="carousel-item">
<img class="img-fluid" src="{!! asset('images/Company/03.jpg') !!}">
<div class="mt-5 ">
</div>
</div>
<div class="carousel-item">
<img class="img-fluid" src="{!! asset('images/Company/04.jpg') !!}">
<div class="mt-5 ">
</div>
</div>
</div>
<!-- <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button"data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a> -->
</div>
</div>
</div>
</div>
</div>
<div class="container d2">
<div class="row justify-content-center align-items-center">
<div class="col-12 ">
<h1 class="text-left heading">Company</h1>
<p class="text-left description"> ALL THE DESCRIPTION</p>
</div>
</div>
</div>
</section>
I have used bootstrap carousel to show 3 items on a row, and it works on a good way. But I want to show only one item for the small devices(mobiles or tablets). Can anyone help me please?
Here is the code I have used
<section id="services" class="service">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading" style="font-family:daniel; font-weight:bolder; font-size:40px; color:#F9121A;">WorkShops & Tracks</h2>
<hr class="primary">
</div>
</div>
</div><br>
<div id="myCarousel" class="carousel slide" data-ride="carousel" >
<div class="container">
<div class="row">
<!-- Indicators -->
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div class="col-lg-4 col-md-4 text-center">
<div class="service-box">
<img src="img/img.jpg" class="text-primary sr-icons" width="200px" height="150px">
<h3 style="color:#F9121A;"></h3>
<p class="text-muted" >
</p>
Show Details
</div>
</div>
<div class="col-lg-4 col-md-4 text-center">
<div class="service-box">
<img src="img.jpg" class="text-primary sr-icons" width="200px" height="150px">
<h3 style="color:#F9121A;"></h3>
<p class="text-muted" >
</p>
Show Details
</div>
</div>
<div class="col-lg-4 col-md-4 text-center">
<div class="service-box">
<img src="img.jpg" class="text-primary sr-icons" width="200px" height="150px"><br><br>
<h3 style="color:#F9121A;"></h3>
<p class="text-muted" >
</p>
Show Details
</div>
</div>
</div>
<div class="item">
<div class="col-lg-4 col-md-4 text-center">
<div class="service-box">
<img src="img.jpg" class="text-primary sr-icons" width="200px" height="150px">
<h3 style="color:#F9121A;"></h3>
<p class="text-muted" >
</p>
Show Details
</div>
</div>
<div class="col-lg-4 col-md-4 text-center">
<div class="service-box">
<img src="img.jpg" class="text-primary sr-icons" width="200px" height="150px">
<h3 style="color:#F9121A;"></h3>
<p class="text-muted" >
</p>
Show Details
</div>
</div>
<div class="col-lg-4 col-md-4 text-center">
<div class="service-box">
<img src="img.jpg" class="text-primary sr-icons" width="200px" height="150px">
<h3 style="color:#F9121A;"></h3>
<p class="text-muted" >
</p>
Show Details
</div>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</section>
I would use a media query with javascript.
https://www.sitepoint.com/javascript-media-queries/
hi so this is the code
<div id='mai'>
<div class="jumbotron">
<div class="container">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/2.jpg" alt="">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="img/3.jpg" alt="">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">pre</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">nx</span>
</a>
</div>
</div>
</div>
</div>
<h3>Example heading <span class="label label-default">New</span></h3>
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="img/4.jpg" alt="..">
<div class="caption">
<h3>برنده لوح تقدیر</h3>
<p>...</p>
<p>Button Button</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img data-src="holder.js/300x300" alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p>Button Button</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img data-src="holder.js/300x300" alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p>Button Button</p>
</div>
</div>
</div>
</div>
i tried to change the height and width with class mai , but it wont change my carousel div height and it will broke my thumbnails and brings them upward towards the main carousel ...
what should i do ????
I am creating a bootstrap carousel using Bootstrap 3x. I want to have 2 divs one (col-md-9) for Big image and another one (col-md-3) for displaying respective carousel caption. I want to have thumbnail at the bottom (col-md-12).
Currently, I am able to display carousel with thumbnail but when i try to add a div for carousel's caption it don't fit as i wanted.
My codes for current
<div class="container">
<div class ="row">
<!--Carousel-->
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div id="carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner ">
<div class="item active ">
<img class="image" src="img/construction.JPG">
</div><!-- /item -->
<div class="item">
<img class="image" src="img/scaffolding.JPG">
</div>
<div class="item">
<img class="image" src="img/construction-iron.JPG">
</div>
<div class="item">
<img class="image" src="img/Bridge-Construction-Swale-Bridge.JPG">
</div>
<div class="item">
<img class="image" src="img/industrial-building-construction-scaffolding.JPG">
</div>
<div class="item">
<img class="image" src="img/men-at-building-construction.JPG">
</div>
<div class="item">
<img class="image" src="img/Construction-Workers.JPG">
</div>
<div class="item">
<img class="image" src="img/building-construction.JPG">
</div>
</div>
</div>
</div> <!-- /col-sm-6 -->
</div>
<div class ="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="clearfix">
<div id="thumbcarousel" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div class="item active">
<div data-target="#carousel" data-slide-to="0" class="thumb"><img src="img/construction.JPG" width="100" height="100"></div>
<div data-target="#carousel" data-slide-to="1" class="thumb"><img src="img/scaffolding.JPG" width="100" height="100"></div>
<div data-target="#carousel" data-slide-to="2" class="thumb"><img src="img/construction-iron.JPG" width="100" height="100"></div>
<div data-target="#carousel" data-slide-to="3" class="thumb"><img src="img/Bridge-Construction-Swale-Bridge.JPG" width="100" height="100"></div>
</div><!-- /item -->
<div class="item">
<div data-target="#carousel" data-slide-to="4" class="thumb"><img src="img/industrial-building-construction-scaffolding.JPG" width="100" height="100"></div>
<div data-target="#carousel" data-slide-to="5" class="thumb"><img src="img/men-at-building-construction.JPG" width="100" height="100"></div>
<div data-target="#carousel" data-slide-to="6" class="thumb"><img src="img/Construction-Workers.JPG" width="100" height="100"></div>
<div data-target="#carousel" data-slide-to="7" class="thumb"><img src="img/building-construction.JPG" width="100" height="100"></div>
</div><!-- /item -->
</div><!-- /carousel-inner -->
<a class="left carousel-control" href="#thumbcarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#thumbcarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div> <!-- /thumbcarousel -->
</div><!-- /clearfix -->
</div> <!-- /col-sm-6 -->
</div>
<!-- /.carousel -->
</div><!--/.container-->
Try 1 with caption
The problem with following is the caption's text don't appear
<div class="container">
<div class ="row">
<!--Carousel-->
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div id="carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner ">
<div class="item active">
<div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<img class="image" src="img/construction.JPG">
</div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 -->
<div class ="col-xs-12 col-sm-12 col-md-3 col-lg-3">
<div class="carousel-caption">
<h1>Welcome to our site! 5a4UkoC9vURkjKVHTBAgi7</h1>
<p>Take a look around and let us know if you have any questions.</p>
</div><!-- carousal-caption -->
</div><!-- /col-xs-3 col-sm-3 col-md-3 col-lg-3 -->
</div><!-- /item -->
<div class="item">
<div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<img class="image" src="img/scaffolding.JPG">
</div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 -->
</div>
<div class="item">
<div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<img class="image" src="img/construction-iron.JPG">
</div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 -->
</div>
<div class="item">
<div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<img class="image" src="img/Bridge-Construction-Swale-Bridge.JPG">
</div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 -->
</div>
<div class="item">
<div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<img class="image" src="img/industrial-building-construction-scaffolding.JPG">
</div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 -->
</div>
<div class="item">
<div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<img class="image" src="img/men-at-building-construction.JPG">
</div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 -->
</div>
<div class="item">
<div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<img class="image" src="img/Construction-Workers.JPG">
</div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 -->
</div>
<div class="item">
<div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<img class="image" src="img/building-construction.JPG">
</div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 -->
</div>
</div>
</div>
</div> <!-- /col-sm-6 -->
</div>
<div class ="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="clearfix">
<div id="thumbcarousel" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div class="item active">
<div data-target="#carousel" data-slide-to="0" class="thumb"><img src="img/construction.JPG" width="100" height="100"></div>
<div data-target="#carousel" data-slide-to="1" class="thumb"><img src="img/scaffolding.JPG" width="100" height="100"></div>
<div data-target="#carousel" data-slide-to="2" class="thumb"><img src="img/construction-iron.JPG" width="100" height="100"></div>
<div data-target="#carousel" data-slide-to="3" class="thumb"><img src="img/Bridge-Construction-Swale-Bridge.JPG" width="100" height="100"></div>
</div><!-- /item -->
<div class="item">
<div data-target="#carousel" data-slide-to="4" class="thumb"><img src="img/industrial-building-construction-scaffolding.JPG" width="100" height="100"></div>
<div data-target="#carousel" data-slide-to="5" class="thumb"><img src="img/men-at-building-construction.JPG" width="100" height="100"></div>
<div data-target="#carousel" data-slide-to="6" class="thumb"><img src="img/Construction-Workers.JPG" width="100" height="100"></div>
<div data-target="#carousel" data-slide-to="7" class="thumb"><img src="img/building-construction.JPG" width="100" height="100"></div>
</div><!-- /item -->
</div><!-- /carousel-inner -->
<a class="left carousel-control" href="#thumbcarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#thumbcarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div> <!-- /thumbcarousel -->
</div><!-- /clearfix -->
</div> <!-- /col-sm-6 -->
</div>
<!-- /.carousel -->
</div><!--/.container-->
Try 2 with caption
The problem with following is the caption's text don't appear on big screen and appear on the big image div when browser is smaller
<div class="container">
<div class ="row">
<!--Carousel-->
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div id="carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner ">
<div class="item active ">
<div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<img class="image" src="img/construction.JPG">
</div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 -->
<div class ="col-xs-12 col-sm-12 col-md-3 col-lg-3">
<div class="carousel-caption">
<h1>Welcome to our site! 5a4UkoC9vURkjKVHTBAgi7</h1>
<p>Take a look around and let us know if you have any questions.</p>
</div><!-- carousal-caption -->
</div><!-- /col-xs-3 col-sm-3 col-md-3 col-lg-3 -->
</div><!-- /item -->
<div class="item">
<div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<img class="image" src="img/scaffolding.JPG">
</div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 -->
<div class ="col-xs-12 col-sm-12 col-md-3 col-lg-3">
<div class="carousel-caption">
<h1>Welcome to our site2!</h1>
<p>Take a look around and let us know if you have any questions.</p>
</div><!-- carousal-caption -->
</div><!-- /col-xs-3 col-sm-3 col-md-3 col-lg-3 -->
</div>
<div class="item">
<div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<img class="image" src="img/construction-iron.JPG">
</div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 -->
<div class ="col-xs-12 col-sm-12 col-md-3 col-lg-3">
<div class="carousel-caption">
<h1>Welcome to our site!</h1>
<p>Take a look around and let us know if you have any questions.</p>
</div><!-- carousal-caption -->
</div><!-- /col-xs-3 col-sm-3 col-md-3 col-lg-3 -->
</div>
<div class="item">
<div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<img class="image" src="img/Bridge-Construction-Swale-Bridge.JPG">
</div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 -->
<div class ="col-xs-12 col-sm-12 col-md-3 col-lg-3">
<div class="carousel-caption">
<h1>Welcome to our site!</h1>
<p>Take a look around and let us know if you have any questions.</p>
</div><!-- carousal-caption -->
</div><!-- /col-xs-3 col-sm-3 col-md-3 col-lg-3 -->
</div>
<div class="item">
<div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<img class="image" src="img/industrial-building-construction-scaffolding.JPG">
</div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 -->
<div class ="col-xs-12 col-sm-12 col-md-3 col-lg-3">
<div class="carousel-caption">
<h1>Welcome to our site!</h1>
<p>Take a look around and let us know if you have any questions.</p>
</div><!-- carousal-caption -->
</div><!-- /col-xs-3 col-sm-3 col-md-3 col-lg-3 -->
</div>
<div class="item">
<div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<img class="image" src="img/men-at-building-construction.JPG">
</div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 -->
<div class ="col-xs-12 col-sm-12 col-md-3 col-lg-3">
<div class="carousel-caption">
<h1>Welcome to our site!</h1>
<p>Take a look around and let us know if you have any questions.</p>
</div><!-- carousal-caption -->
</div><!-- /col-xs-3 col-sm-3 col-md-3 col-lg-3 -->
</div>
<div class="item">
<div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<img class="image" src="img/Construction-Workers.JPG">
</div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 -->
<div class ="col-xs-12 col-sm-12 col-md-3 col-lg-3">
<div class="carousel-caption">
<h1>Welcome to our site!</h1>
<p>Take a look around and let us know if you have any questions.</p>
</div><!-- carousal-caption -->
</div><!-- /col-xs-3 col-sm-3 col-md-3 col-lg-3 -->
</div>
<div class="item">
<div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<img class="image" src="img/building-construction.JPG">
</div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 -->
<div class ="col-xs-12 col-sm-12 col-md-3 col-lg-3">
<div class="carousel-caption">
<h1>Welcome to our site!</h1>
<p>Take a look around and let us know if you have any questions.</p>
</div><!-- carousal-caption -->
</div><!-- /col-xs-3 col-sm-3 col-md-3 col-lg-3 -->
</div>
</div>
</div>
</div> <!-- /col-sm-6 -->
</div>
<div class ="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="clearfix">
<div id="thumbcarousel" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div class="item active">
<div data-target="#carousel" data-slide-to="0" class="thumb"><img src="img/construction.JPG" width="100" height="100"></div>
<div data-target="#carousel" data-slide-to="1" class="thumb"><img src="img/scaffolding.JPG" width="100" height="100"></div>
<div data-target="#carousel" data-slide-to="2" class="thumb"><img src="img/construction-iron.JPG" width="100" height="100"></div>
<div data-target="#carousel" data-slide-to="3" class="thumb"><img src="img/Bridge-Construction-Swale-Bridge.JPG" width="100" height="100"></div>
</div><!-- /item -->
<div class="item">
<div data-target="#carousel" data-slide-to="4" class="thumb"><img src="img/industrial-building-construction-scaffolding.JPG" width="100" height="100"></div>
<div data-target="#carousel" data-slide-to="5" class="thumb"><img src="img/men-at-building-construction.JPG" width="100" height="100"></div>
<div data-target="#carousel" data-slide-to="6" class="thumb"><img src="img/Construction-Workers.JPG" width="100" height="100"></div>
<div data-target="#carousel" data-slide-to="7" class="thumb"><img src="img/building-construction.JPG" width="100" height="100"></div>
</div><!-- /item -->
</div><!-- /carousel-inner -->
<a class="left carousel-control" href="#thumbcarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#thumbcarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div> <!-- /thumbcarousel -->
</div><!-- /clearfix -->
</div> <!-- /col-sm-6 -->
</div>
<!-- /.carousel -->
</div><!--/.container-->
I've made a fork from the example I gave you.
HTML:
<div class="container">
<div id="main_area">
<!-- Slider -->
<div class="row">
<div class="col-xs-12" id="slider">
<!-- Top part of the slider -->
<div class="row">
<div class="col-sm-8" id="carousel-bounding-box">
<div class="carousel slide" id="myCarousel">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item" data-slide-number="0">
<img src="http://placehold.it/770x300&text=one"></div>
<div class="item" data-slide-number="1">
<img src="http://placehold.it/770x300&text=two"></div>
<div class="item" data-slide-number="2">
<img src="http://placehold.it/770x300&text=three"></div>
<div class="item" data-slide-number="3">
<img src="http://placehold.it/770x300&text=four"></div>
<div class="item" data-slide-number="4">
<img src="http://placehold.it/770x300&text=five"></div>
<div class="item" data-slide-number="5">
<img src="http://placehold.it/770x300&text=six"></div>
</div><!-- Carousel nav -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
<div class="col-sm-4" id="carousel-text"></div>
<div id="slide-content" style="display: none;">
<div id="slide-content-0">
<h2>Slider One</h2>
<p>Lorem Ipsum Dolor</p>
<p class="sub-text">October 24 2012 - Read more</p>
</div>
<div id="slide-content-1">
<h2>Slider Two</h2>
<p>Lorem Ipsum Dolor</p>
<p class="sub-text">October 24 2012 - Read more</p>
</div>
<div id="slide-content-2">
<h2>Slider Three</h2>
<p>Lorem Ipsum Dolor</p>
<p class="sub-text">October 24 2012 - Read more</p>
</div>
<div id="slide-content-3">
<h2>Slider Four</h2>
<p>Lorem Ipsum Dolor</p>
<p class="sub-text">October 24 2012 - Read more</p>
</div>
<div id="slide-content-4">
<h2>Slider Five</h2>
<p>Lorem Ipsum Dolor</p>
<p class="sub-text">October 24 2012 - Read more</p>
</div>
<div id="slide-content-5">
<h2>Slider Six</h2>
<p>Lorem Ipsum Dolor</p>
<p class="sub-text">October 24 2012 - Read more</p>
</div>
</div>
</div>
</div>
</div><!--/Slider-->
<div class="row hidden-xs" id="slider-thumbs">
<!-- Bottom switcher of slider -->
<ul class="hide-bullets">
<li class="col-sm-2">
<a class="thumbnail" id="carousel-selector-0"><img src="http://placehold.it/170x100&text=one"></a>
</li>
<li class="col-sm-2">
<a class="thumbnail" id="carousel-selector-1"><img src="http://placehold.it/170x100&text=two"></a>
</li>
<li class="col-sm-2">
<a class="thumbnail" id="carousel-selector-2"><img src="http://placehold.it/170x100&text=three"></a>
</li>
<li class="col-sm-2">
<a class="thumbnail" id="carousel-selector-3"><img src="http://placehold.it/170x100&text=four"></a>
</li>
<li class="col-sm-2">
<a class="thumbnail" id="carousel-selector-4"><img src="http://placehold.it/170x100&text=five"></a>
</li>
<li class="col-sm-2">
<a class="thumbnail" id="carousel-selector-5"><img src="http://placehold.it/170x100&text=six"></a>
</li>
</ul>
</div>
</div>
</div>
CSS:
.hide-bullets {
list-style:none;
margin-left: -40px;
margin-top:20px;
}
JS:
jQuery(document).ready(function($) {
$('#myCarousel').carousel({
interval: 5000
});
$('#carousel-text').html($('#slide-content-0').html());
//Handles the carousel thumbnails
$('[id^=carousel-selector-]').click( function(){
var id_selector = $(this).attr("id");
var id = id_selector.substr(id_selector.length -1);
var id = parseInt(id);
$('#myCarousel').carousel(id);
});
// When the carousel slides, auto update the text
$('#myCarousel').on('slid.bs.carousel', function (e) {
var id = $('.item.active').data('slide-number');
$('#carousel-text').html($('#slide-content-'+id).html());
});
});
Functional Bootply: http://www.bootply.com/zaKtDsH6V4