tflpereira
Reputation: 21
Bootstrap 3 Carousel Hide image when sliding
I'm developing a website for a company. In a certain part of the website i'm using Bootstrap Carousel to show some projects, this is my issue :
This happens when i click on the button that makes carousel slide, after the click i see the exchange of the first image with the third when the first image is leaving the carousel. Basically what i want is when user clicks on the nav buttons the carousel slides showing only the four images and hide the images that are leaving.
This is my CSS for the carousel:
@media all and (transform-3d), (-webkit-transform-3d) {
.carousel#solutions-carousel > .carousel-inner{
margin: auto;
overflow: hidden;
width: 100%;
}
.carousel#solutions-carousel > .carousel-inner .item{
-webkit-transition: -webkit-transform .6s ease-in-out;
-o-transition: -o-transform .6s ease-in-out;
transition: transform .6s ease-in-out;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
perspective: 1000;
transition-timing-function:linear;
}
.carousel#solutions-carousel > .carousel-inner .item.next, .carousel#solutions-carousel > .carousel-inner .item.active.right{
-webkit-transform: translate3d(25%, 0, 0);
transform: translate3d(25%, 0, 0);
}
.carousel#solutions-carousel > .carousel-inner .item.prev, .carousel#solutions-carousel > .carousel-inner .item.active.left{
-webkit-transform: translate3d(-25%, 0, 0);
transform: translate3d(-25%, 0, 0);
}
.carousel#solutions-carousel > .carousel-inner .item.prev.right,
.carousel#solutions-carousel > .carousel-inner .item.next.left,
.carousel#solutions-carousel > .carousel-inner .item.active{
left: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.carousel#solutions-carousel > .carousel-inner .active,
.carousel#solutions-carousel > .carousel-inner .next,
.carousel#solutions-carousel > .carousel-inner .prev{
display: block;
}
.carousel#solutions-carousel > .carousel-inner .active{
left:0;
}
.carousel#solutions-carousel > .carousel-inner .next,
.carousel#solutions-carousel > .carousel-inner .prev{
position: absolute;
top: 0;
width: 100%;
}
.carousel#solutions-carousel > .carousel-inner .next{
left: 75%;
}
.carousel#solutions-carousel > .carousel-inner .prev{
left: -75%;
}
.carousel#solutions-carousel > .carousel-inner .next.left,
.carousel#solutions-carousel > .carousel-inner .prev.right{
left: 0;
}
.carousel#solutions-carousel > .carousel-inner .active.left {
left: -75%;
}
.carousel#solutions-carousel > .carousel-inner .active.right {
left: 75%;
}
.carousel#solutions-carousel > .carousel-inner > .item .solution-info{
padding-left: 0px;
padding-right: 0px;
width: 25%;
display: inline-block;
float:left;
}
.carousel#solutions-carousel > .carousel-inner > .item .solution-info .image-wrapper{
overflow: hidden;
background-color: #000000;
}
.carousel#solutions-carousel > .carousel-inner > .item .solution-info a:hover img{
opacity: 0.6;
transform: scale(1.1);
}
.carousel#solutions-carousel > .carousel-inner > .item .solution-info img{
width: 100%;
background-color: #000000;
transition:transform .3s ease-in-out, opacity .3s ease-in-out;
}
.carousel#solutions-carousel > .carousel-inner > .item .solution-info .solution-caption{
margin-top: 2%;
left:0%;
}
.carousel#solutions-carousel > .carousel-inner > .item .solution-info a:hover h3{
color:#8c8c8c;
}
.carousel#solutions-carousel > .carousel-inner > .item .carousel-caption{
position: relative;
text-shadow: none;
margin-top: 20px;
left: 0;
right: 0;
}
.carousel#solutions-carousel > .carousel-inner > .item .carousel-caption > .caption-title h3{
font-family: "Ubuntu Condensed";
color: #000000;
font-size: 32px;
font-weight: 400;
text-align: center;
color:; .3s ease-in-out;
text-transform: uppercase;
margin-top: 30px;
}
.carousel#solutions-carousel > .carousel-inner > .item .carousel-caption .caption-body{
margin-top: 24px;
}
.carousel#solutions-carousel > .carousel-inner > .item .carousel-caption > .caption-body p{
font-family: "Merriweather", sans-serif;
color: #5a5959;
font-size: 16px;
font-weight: 300;
line-height: 26.444px;
text-align: center;
margin-left:6%;
margin-right:6%;
}
.carousel#solutions-carousel .carousel-control#right-btn{
margin-bottom: 12.7%;
margin-right: 3%;
}
.carousel#solutions-carousel .carousel-control#left-btn{
margin-bottom: 12.7%;
margin-right: 5.6%;
}
Here is the code that generates the carousel(there is no problem with this code):
if($solutions){
$count = 0;
$flag = false;
$totalSolutions = count($solutions);
$html .= "<div id='solutions-carousel' class='carousel slide' data-ride='carousel'>";
$html .= "<div class='carousel-inner' role='listbox'>";
foreach ($solutions as $s) {
if ($flag == false){
$html .= "<div class='item active'>";
$image = getImage("solucoes",$s['id'],'crop');
$html .= "<div class='solution-info'><a data-target='#solutions-carousel' data-slide-to='$count' href='{$s['ref']}'><div class='image-wrapper'>$image</div>";
$html .= "<div class='carousel-caption'>";
$html .= "<div class='caption-title'>";
$html .= "<h3>".$s['title']."</h3>";
$html .= "</div>";
$html .= "<div class='caption-body'>";
$html .= "<p>".$s['description']."</p>";
$html .= "</div>";
$html .= "</div>";
$html .= "</a>";
$html .= "</div>";
$html .= "</div>";
$flag = true;
}else{
$html .= "<div class='item'>";
$image = getImage("solucoes",$s['id'],'crop');
$html .= "<div class='solution-info'><a data-target='#solutions-carousel' data-slide-to='$count' href='{$s['ref']}'><div class='image-wrapper'>$image</div>";
$html .= "<div class='carousel-caption'>";
$html .= "<div class='caption-title'>";
$html .= "<h3>".$s['title']."</h3>";
$html .= "</div>";
$html .= "<div class='caption-body'>";
$html .= "<p>".$s['description']."</p>";
$html .= "</div>";
$html .= "</div>";
$html .= "</a>";
$html .= "</div>";
$html .= "</div>";
}
$count++;
}
$html .= "</div>";
if($totalSolutions > 4){
$html .= "<a class='right carousel-control' href='#solutions-carousel' role='button' data-slide='prev' id='left-btn'>";
$html .= "<img src='/img/carousel-lbtn.png'>";
$html .= "</a>";
$html .= "<a class='right carousel-control' href='#solutions-carousel' role='button' data-slide='next' id='right-btn'>";
$html .= "<img src='/img/carousel-rbtn.png'>";
$html .= "</a>";
}
$html .= "</div>";
}
And here is the javascripts that populates the carousel:
$('.carousel#solutions-carousel .item').each(function () {
console.log("aqui");
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i=0;i<2;i++) {
next=next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
Waiting for answers. Best Regards,
EDIT:
Found the solution to my problem, i was missing one css instruction in this fields:
.carousel#solutions-carousel > .carousel-inner .item.next, .carousel#solutions-carousel > .carousel-inner .item.active.right{
-webkit-transform: translate3d(25%, 0, 0);
transform: translate3d(25%, 0, 0);
}
.carousel#solutions-carousel > .carousel-inner .item.next, .carousel#solutions-carousel > .carousel-inner .item.active.left{
-webkit-transform: translate3d(-25%, 0, 0);
transform: translate3d(-25%, 0, 0);
}
the only thing that was missing was the left:0; on both instructions.
Hope this helps anyone
Upvotes: 2
Views: 2474
Answers (1)
Mohamed Rihan
Reputation: 119
// Carousel Auto-Cycle
$(document).ready(function() {
$('.carousel').carousel({
interval: 6000
})
});/* Global */
body {
background: #3399cc;
padding: 40px;
}
img { max-width:100%; }
a {
-webkit-transition: all 150ms ease;
-moz-transition: all 150ms ease;
-ms-transition: all 150ms ease;
-o-transition: all 150ms ease;
transition: all 150ms ease;
}
a:hover {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 */
filter: alpha(opacity=50); /* IE7 */
opacity: 0.6;
text-decoration: none;
}
/* Container */
.container-fluid {
background: #FFFFFF;
margin: 40px auto 10px;
padding: 20px 40px 0;
max-width: 960px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
/* Page Header */
.page-header {
background: #f9f9f9;
margin: -30px -40px 40px;
padding: 20px 40px;
border-top: 4px solid #ccc;
color: #999;
text-transform: uppercase;
}
.page-header h3 {
line-height: 0.88rem;
color: #000;
}
/* Thumbnail Box */
.caption h4 {
font-size: 1rem;
color: #444;
}
.caption p {
font-size: 0.75rem;
color: #999;
}
.btn.btn-mini {
font-size: 0.63rem;
}
/* Carousel Control */
.control-box {
text-align: right;
width: 100%;
}
.carousel-control{
background: #666;
border: 0px;
border-radius: 0px;
display: inline-block;
font-size: 34px;
font-weight: 200;
line-height: 18px;
opacity: 0.5;
padding: 4px 10px 0px;
position: static;
height: 30px;
width: 15px;
}
/* Footer */
.footer {
margin: auto;
width: 100%;
max-width: 960px;
display: block;
font-size: 0.69rem;
}
.footer, .footer a {
color: #c9e4f7;
}
p.right {
float: right;
}
/* Mobile Only */
@media (max-width: 767px) {
.page-header, .control-box {
text-align: center;
}
}
@media (max-width: 479px) {
.caption {
word-break: break-all;
}
}
/* ADD-ON
-------------------------------------------------- */
body:after{content:"less than 320px";font-size:1rem;font-weight:bold;position:fixed;bottom:0;width:100%;text-align:center;background-color:hsla(1,60%,40%,0.7);color:#fff;height:20px;padding-top:0;margin-left:0;left:0}@media only screen and (min-width:320px){body:after{content:"320 to 480px";background-color:hsla(90,60%,40%,0.7);height:20px;padding-top:0;margin-left:0}}@media only screen and (min-width:480px){body:after{content:"480 to 768px";background-color:hsla(180,60%,40%,0.7);height:20px;padding-top:0;margin-left:0}}@media only screen and (min-width:768px){body:after{content:"768 to 980px";background-color:hsla(270,60%,40%,0.7);height:20px;padding-top:0;margin-left:0}}@media only screen and (min-width:980px){body:after{content:"980 to 1024px";background-color:hsla(300,60%,40%,0.7);height:20px;padding-top:0;margin-left:0}}@media only screen and (min-width:1024px){body:after{content:"1024 and up";background-color:hsla(360,60%,40%,0.7);height:20px;padding-top:0;margin-left:0}}
::selection { background: #ff5e99; color: #FFFFFF; text-shadow: 0; }
::-moz-selection { background: #ff5e99; color: #FFFFFF; }
a, a:focus, a:active, a:hover, object, embed { outline: none; }
:-moz-any-link:focus { outline: none; }
input::-moz-focus-inner { border: 0; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css">
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div class="page-header">
<h3>Bootstrap</h3>
<p>Responsive Moving Box Carousel Demo</p>
</div>
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<ul class="thumbnails">
<li class="span3">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/360x240" alt=""></a>
</div>
<div class="caption">
<h4>Praesent commodo</h4>
<p>Nullam Condimentum Nibh Etiam Sem</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</li>
<li class="span3">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/360x240" alt=""></a>
</div>
<div class="caption">
<h4>Praesent commodo</h4>
<p>Nullam Condimentum Nibh Etiam Sem</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</li>
<li class="span3">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/360x240" alt=""></a>
</div>
<div class="caption">
<h4>Praesent commodo</h4>
<p>Nullam Condimentum Nibh Etiam Sem</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</li>
<li class="span3">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/360x240" alt=""></a>
</div>
<div class="caption">
<h4>Praesent commodo</h4>
<p>Nullam Condimentum Nibh Etiam Sem</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</li>
</ul>
</div><!-- /Slide1 -->
<div class="item">
<ul class="thumbnails">
<li class="span3">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/360x240" alt=""></a>
</div>
<div class="caption">
<h4>Praesent commodo</h4>
<p>Nullam Condimentum Nibh Etiam Sem</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</li>
<li class="span3">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/360x240" alt=""></a>
</div>
<div class="caption">
<h4>Praesent commodo</h4>
<p>Nullam Condimentum Nibh Etiam Sem</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</li>
<li class="span3">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/360x240" alt=""></a>
</div>
<div class="caption">
<h4>Praesent commodo</h4>
<p>Nullam Condimentum Nibh Etiam Sem</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</li>
<li class="span3">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/360x240" alt=""></a>
</div>
<div class="caption">
<h4>Praesent commodo</h4>
<p>Nullam Condimentum Nibh Etiam Sem</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</li>
</ul>
</div><!-- /Slide2 -->
<div class="item">
<ul class="thumbnails">
<li class="span3">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/360x240" alt=""></a>
</div>
<div class="caption">
<h4>Praesent commodo</h4>
<p>Nullam Condimentum Nibh Etiam Sem</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</li>
<li class="span3">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/360x240" alt=""></a>
</div>
<div class="caption">
<h4>Praesent commodo</h4>
<p>Nullam Condimentum Nibh Etiam Sem</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</li>
<li class="span3">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/360x240" alt=""></a>
</div>
<div class="caption">
<h4>Praesent commodo</h4>
<p>Nullam Condimentum Nibh Etiam Sem</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</li>
<li class="span3">
<div class="thumbnail">
<a href="#"><img src="http://placehold.it/360x240" alt=""></a>
</div>
<div class="caption">
<h4>Praesent commodo</h4>
<p>Nullam Condimentum Nibh Etiam Sem</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</li>
</ul>
</div><!-- /Slide3 -->
</div>
<div class="control-box">
<a data-slide="prev" href="#myCarousel" class="carousel-control left">‹</a>
<a data-slide="next" href="#myCarousel" class="carousel-control right">›</a>
</div><!-- /.control-box -->
</div><!-- /#myCarousel -->
</div><!-- /.span12 -->
</div><!-- /.row -->
</div><!-- /.container -->
<!-- Delete This -->
<div class="footer">
<a href="http://simonalex.com/">♥ Redfrost</a> | <a href="http://twitter.github.com/bootstrap/">Get Bootstrap</a> | <a href="http://placehold.it/">Get Placeholder</a>
<p class="right">‹ Resize Window ›</p>
<p> </p>
<p><strong>*VISIT THIS LINK FOR IE9 FIX: <a href="http://codepen.io/redfrost/pen/yKAmc" target="_blank">http://codepen.io/redfrost/pen/yKAmc</a>
<strong></p>
</div>Upvotes: 2
Related Questions
- How to hide bootstrap slider and all image should be display vertically on mobile device?
- Bootstrap Carousel not sliding from one picture to the next
- js sliding images (carousel) goes invisible
- How to rotate carousel item and hide the farest one
- Hide images outside of view in image slider
- How do you hide and show a background image using a carousel?
- Hiding next slide when resizing a jQuery Carousel
- jQuery image carousel not sliding
- CSS only carousel
- Sliding images in Bootstrap's Carousel next to eachother