带竖向拇指的Bootstrap 4转盘

时间：2019-02-25 11:00:12

标签： bootstrap-4 carousel 

$('.carousel .vertical .carousel-item').each(function(){
  var next = $(this).next();
  if (!next.length) {
    next = $(this).siblings(':first');
  }
  next.children(':first-child').clone().appendTo($(this));
  
  for (var i=1;i<2;i++) {
    next=next.next();
    if (!next.length) {
    	next = $(this).siblings(':first');
  	}
    
    next.children(':first-child').clone().appendTo($(this));
  }
});
.carousel-inner.vertical {
  height: 100%; /*Note: set specific height here if not, there will be some issues with IE browser*/
}
.carousel-inner.vertical > .carousel-item {
  -webkit-transition: .6s ease-in-out top !important;
  -o-transition: .6s ease-in-out top !important;
  transition: .6s ease-in-out top !important;
}

@media all and (transform-3d),
(-webkit-transform-3d) {
  .carousel-inner.vertical > .carousel-item {
    -webkit-transition: -webkit-transform .6s ease-in-out !important;
    -o-transition: -o-transform .6s ease-in-out !important;
    transition: transform .6s ease-in-out !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    -webkit-perspective: 1000 !important;
    perspective: 1000 !important;
  }
  .carousel-inner.vertical > .carousel-item.carousel-item-next,
  .carousel-inner.vertical > .carousel-item.active.carousel-item-right {
    -webkit-transform: translate3d(0, 33.33%, 0) !important;
    transform: translate3d(0, 33.33%, 0) !important;
    top: 0 !important;
  }
  .carousel-inner.vertical > .carousel-item.carousel-item-prev,
  .carousel-inner.vertical > .carousel-item.active.carousel-item-left {
    -webkit-transform: translate3d(0, -33.33%, 0) !important;
    transform: translate3d(0, -33.33%, 0) !important;
    top: 0 !important;
  }
  .carousel-inner.vertical > .carousel-item.carousel-item-next.carousel-item-left,
  .carousel-inner.vertical > .carousel-item.carousel-item-prev.carousel-item-right,
  .carousel-inner.vertical > .carousel-item.active {
    -webkit-transform: translate3d(0, 0, 0) !important;
    transform: translate3d(0, 0, 0) !important;
    top: 0;
  }
}

.carousel-inner.vertical > .active {
  top: 0;
}
.carousel-inner.vertical > .carousel-item-next,
.carousel-inner.vertical > .carousel-item-prev {
  top: 0;
  height: 100%;
  width: auto;
}
.carousel-inner.vertical > .carousel-item-next {
  carousel-item-left: 0;
  top: 33.33%;
  carousel-item-right:0;
}
.carousel-inner.vertical > .carousel-item-prev {
  carousel-item-left: 0;
  top: -33.33%;
  carousel-item-right:0;
}
.carousel-inner.vertical > .carousel-item-next.carousel-item-left,
.carousel-inner.vertical > .carousel-item-prev.carousel-item-right {
  top: 0;
}
.carousel-inner.vertical > .active.carousel-item-left {
  carousel-item-left: 0;
  top: -33.33%;
  carousel-item-right:0;
}
.carousel-inner.vertical > .active.carousel-item-right {
  carousel-item-left: 0;
  top: 33.33%;
  carousel-item-right:0;
}

#carousel-pager .carousel-item-left.carousel-control-carousel-item-prev {
    bottom: initial;
    width: 100%;
}
#carousel-pager .carousel-item-right.carousel-control-carousel-item-next {
    top: initial;
    width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
   <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="container">
    <div class="row">
	
	       <div class="col-md-3">
            <div id="carousel-pager" class="carousel slide " data-ride="false" data-interval="500000000">
                <!-- Carousel items -->
                <div class="carousel-inner vertical">
                    <div class="carousel-item active" >
                        <img src="http://placehold.it/600/f44336/000000&amp;text=First+Slide" id="carousel-selector-1" class="img-fluid" data-target="#carousel-main" data-slide-to="0">
                    </div>
                    <div class="carousel-item" >
                        <img src="http://placehold.it/600/e91e63/000000&amp;text=Second+Slide" id="carousel-selector-1" class="img-fluid" data-target="#carousel-main" data-slide-to="1">
                    </div>
                    <div class="carousel-item" >
                        <img src="http://placehold.it/600/9c27b0/000000&amp;text=Third+Slide" id="carousel-selector-2" class="img-fluid" data-target="#carousel-main" data-slide-to="2">
                    </div>
					<div class="carousel-item" >
                        <img src="http://placehold.it/600/9c27b0/000000&amp;text=4+Slide" id="carousel-selector-3" class="img-fluid" data-target="#carousel-main" data-slide-to="3">
                    </div>
                </div>
				
               
            </div>
        </div>

        <div class="col-md-9">
            <div id="carousel-main" class="carousel slide " data-ride="false" data-interval="5000">
                <!-- Carousel items -->
                <div class="carousel-inner">
                    <div class="carousel-item active" >
                        <img src="http://placehold.it/900/f44336/000000&amp;text=First+Slide" class="img-fluid" data-slide-number="0">
                    </div>
                    <div class="carousel-item" >
                        <img src="http://placehold.it/900/e91e63/000000&amp;text=Second+Slide" class="img-fluid"  data-slide-number="1">
                    </div>
                    <div class="carousel-item" >
                        <img src="http://placehold.it/900/9c27b0/000000&amp;text=Third+Slide" class="img-fluid" data-slide-number="2">
                    </div>
					<div class="carousel-item" >
                        <img src="http://placehold.it/900/9c2400/000000&amp;text=4+Slide" class="img-fluid" data-slide-number="3">
                    </div>
                </div>


                <!-- Controls -->
				
				<a class="left carousel-control-prev" href=".carousel" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control-next" href=".carousel" 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>

我发现了一个带有垂直预览https://www.codeply.com/go/kARgk17JLu的轮播示例，但它是为引导程序3编写的。我对版本4进行了更改，一切都很好，但是在预览时同时滚动照片和大图像不起作用。请告诉我如何解决？

我的例子： https://www.codeply.com/go/xSVC8XCWVA

1 个答案:

答案 0 :(得分：0)

请尝试使用此代码

$('.carousel .vertical .carousel-item').each(function(){
  var next = $(this).next();
  if (!next.length) {
    next = $(this).siblings(':first');
  }
  next.children(':first-child').clone().appendTo($(this));
  
  for (var i=1;i<2;i++) {
    next=next.next();
    if (!next.length) {
    	next = $(this).siblings(':first');
  	}
    
    next.children(':first-child').clone().appendTo($(this));
  }
});
// added script
$("#carousel-main .left").click(function(){
  $("#carousel-main").carousel('prev');
});
$("#carousel-main .right").click(function(){
  $("#carousel-main").carousel('next');
});
.carousel-inner.vertical {
  height: 100%; /*Note: set specific height here if not, there will be some issues with IE browser*/
}
.carousel-inner.vertical > .carousel-item {
  -webkit-transition: .6s ease-in-out top !important;
  -o-transition: .6s ease-in-out top !important;
  transition: .6s ease-in-out top !important;
}

@media all and (transform-3d),
(-webkit-transform-3d) {
  .carousel-inner.vertical > .carousel-item {
    -webkit-transition: -webkit-transform .6s ease-in-out !important;
    -o-transition: -o-transform .6s ease-in-out !important;
    transition: transform .6s ease-in-out !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    -webkit-perspective: 1000 !important;
    perspective: 1000 !important;
  }
  .carousel-inner.vertical > .carousel-item.carousel-item-next,
  .carousel-inner.vertical > .carousel-item.active.carousel-item-right {
    -webkit-transform: translate3d(0, 33.33%, 0) !important;
    transform: translate3d(0, 33.33%, 0) !important;
    top: 0 !important;
  }
  .carousel-inner.vertical > .carousel-item.carousel-item-prev,
  .carousel-inner.vertical > .carousel-item.active.carousel-item-left {
    -webkit-transform: translate3d(0, -33.33%, 0) !important;
    transform: translate3d(0, -33.33%, 0) !important;
    top: 0 !important;
  }
  .carousel-inner.vertical > .carousel-item.carousel-item-next.carousel-item-left,
  .carousel-inner.vertical > .carousel-item.carousel-item-prev.carousel-item-right,
  .carousel-inner.vertical > .carousel-item.active {
    -webkit-transform: translate3d(0, 0, 0) !important;
    transform: translate3d(0, 0, 0) !important;
    top: 0;
  }
}

.carousel-inner.vertical > .active {
  top: 0;
}
.carousel-inner.vertical > .carousel-item-next,
.carousel-inner.vertical > .carousel-item-prev {
  top: 0;
  height: 100%;
  width: auto;
}
.carousel-inner.vertical > .carousel-item-next {
  carousel-item-left: 0;
  top: 33.33%;
  carousel-item-right:0;
}
.carousel-inner.vertical > .carousel-item-prev {
  carousel-item-left: 0;
  top: -33.33%;
  carousel-item-right:0;
}
.carousel-inner.vertical > .carousel-item-next.carousel-item-left,
.carousel-inner.vertical > .carousel-item-prev.carousel-item-right {
  top: 0;
}
.carousel-inner.vertical > .active.carousel-item-left {
  carousel-item-left: 0;
  top: -33.33%;
  carousel-item-right:0;
}
.carousel-inner.vertical > .active.carousel-item-right {
  carousel-item-left: 0;
  top: 33.33%;
  carousel-item-right:0;
}

#carousel-pager .carousel-item-left.carousel-control-carousel-item-prev {
    bottom: initial;
    width: 100%;
}
#carousel-pager .carousel-item-right.carousel-control-carousel-item-next {
    top: initial;
    width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="container">
    <div class="row">
	
	       <div class="col-md-3">
            <div id="carousel-pager" class="carousel slide " data-ride="false" data-interval="500000000">
                <!-- Carousel items -->
                <div class="carousel-inner vertical">
                    <div class="carousel-item active" >
                        <img src="http://placehold.it/600/f44336/000000&amp;text=First+Slide" id="carousel-selector-1" class="img-fluid" data-target="#carousel-main" data-slide-to="0">
                    </div>
                    <div class="carousel-item" >
                        <img src="http://placehold.it/600/e91e63/000000&amp;text=Second+Slide" id="carousel-selector-1" class="img-fluid" data-target="#carousel-main" data-slide-to="1">
                    </div>
                    <div class="carousel-item" >
                        <img src="http://placehold.it/600/9c27b0/000000&amp;text=Third+Slide" id="carousel-selector-2" class="img-fluid" data-target="#carousel-main" data-slide-to="2">
                    </div>
					<div class="carousel-item" >
                        <img src="http://placehold.it/600/9c27b0/000000&amp;text=4+Slide" id="carousel-selector-3" class="img-fluid" data-target="#carousel-main" data-slide-to="3">
                    </div>
                </div>
				
               
            </div>
        </div>

        <div class="col-md-9">
            <div id="carousel-main" class="carousel slide " data-ride="false" data-interval="5000">
                <!-- Carousel items -->
                <div class="carousel-inner">
                    <div class="carousel-item active" >
                        <img src="http://placehold.it/900/f44336/000000&amp;text=First+Slide" class="img-fluid" data-slide-number="0">
                    </div>
                    <div class="carousel-item" >
                        <img src="http://placehold.it/900/e91e63/000000&amp;text=Second+Slide" class="img-fluid"  data-slide-number="1">
                    </div>
                    <div class="carousel-item" >
                        <img src="http://placehold.it/900/9c27b0/000000&amp;text=Third+Slide" class="img-fluid" data-slide-number="2">
                    </div>
					<div class="carousel-item" >
                        <img src="http://placehold.it/900/9c2400/000000&amp;text=4+Slide" class="img-fluid" data-slide-number="3">
                    </div>
                </div>


                <!-- Controls -->
				
				<a class="left carousel-control-prev" href=".carousel" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control-next" href=".carousel" 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>

相关问题
最新问题