Bootstrap 3 Carousel滑动时隐藏图像

时间：2015-12-17 13:19:10

标签： javascript html css

我正在为公司开发一个网站。在网站的某个部分，我使用Bootstrap Carousel来展示一些项目，这是我的问题：

Bootstrap Carousel

当我点击旋转木马滑动的按钮时，会发生这种情况，点击后，当第一张图像离开旋转木马时，我看到第一张图像与第三张图像的交换。基本上我想要的是当用户点击导航按钮时，旋转木马幻灯片只显示四个图像并隐藏正在离开的图像。

这是我的旋转木马的CSS：

$str = "1 خشكاندن، خشكانيدن 2رطوبتزدايي كردن، نمزدايي كردن & تر کردن";
// $str = '1 healthy, fine, sound 2 tip-top, fit, robust, sturdy & 1  substandard, poor';
$dashed_line = preg_replace("/[0-9]+/", "- ", $str);
$lines = preg_replace("/(?<!^)- /", "\n- ", $dashed_line);
$lines_with_and = preg_replace("/&/", "\n&\n", $lines);
$lines_with_and_single_space = preg_replace("/ +/", " ", $lines_with_and);
echo preg_replace("/(^[\r\n]*|[\r\n]+)[\s\t]*[\r\n]+/", "\n", $lines_with_and_single_space);

以下是生成轮播的代码（此代码没有问题）：

    @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%;
}

以下是填充旋转木马的javascripts：

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>";
    }

等待答案。 最诚挚的问候，

修改

找到我的问题的解决方案，我在这个领域缺少一条css指令：

$('.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));
        }
    });

唯一缺少的是左：0;在两个指令上。

希望这有助于任何人

1 个答案:

答案 0 :(得分：2)

// 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="#">&raquo; 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="#">&raquo; 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="#">&raquo; 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="#">&raquo; 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="#">&raquo; 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="#">&raquo; 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="#">&raquo; 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="#">&raquo; 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="#">&raquo; 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="#">&raquo; 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="#">&raquo; 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="#">&raquo; 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/">&hearts; Redfrost</a> | <a href="http://twitter.github.com/bootstrap/">Get Bootstrap</a> | <a href="http://placehold.it/">Get Placeholder</a>   
    <p class="right">&lsaquo; Resize Window &rsaquo;</p>
    <p>&nbsp;</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>

相关问题
最新问题