将垂直滑块放在水平滑块上

时间：2018-06-12 15:21:06

标签： javascript jquery html css twitter-bootstrap

我需要一个用于组合页面的图像滑块，图像滑块还需要包含放置在滑块本身上的垂直缩略图，因为滑块是页面的整个宽度。我试图实现这一点，现在我有垂直缩略图和图像滑块，但我不知道如何将缩略图放到滑块上，这是我试图实现的like this 有人可以帮助我，我的代码在下面。为了实现我现在拥有的滑块

这是我的代码

＆＃13;
＆＃13; 
 $('.carousel .vertical .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));
  }
});
＆＃13; 
.carousel-inner.vertical {
  max-height: 60%; /*Note: set specific height here if not, there will be some issues with IE browser*/
}
.carousel-inner.vertical > .item {
  -webkit-transition: .6s ease-in-out top;
  -o-transition: .6s ease-in-out top;
  transition: .6s ease-in-out top;
}

@media all and (transform-3d),
(-webkit-transform-3d) {
  .carousel-inner.vertical > .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;
  }
  .carousel-inner.vertical > .item.next,
  .carousel-inner.vertical > .item.active.right {
    -webkit-transform: translate3d(0, 33.33%, 0);
    transform: translate3d(0, 33.33%, 0);
    top: 0;
  }
  .carousel-inner.vertical > .item.prev,
  .carousel-inner.vertical > .item.active.left {
    -webkit-transform: translate3d(0, -33.33%, 0);
    transform: translate3d(0, -33.33%, 0);
    top: 0;
  }
  .carousel-inner.vertical > .item.next.left,
  .carousel-inner.vertical > .item.prev.right,
  .carousel-inner.vertical > .item.active {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    top: 0;
  }
}

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

#carousel-pager .carousel-control.left {
    bottom: initial;
    width: 100%;
}
#carousel-pager .carousel-control.right {
    top: initial;
    width: 100%;
}
   /* .carousel-inner > .item > img, .carousel-inner > .item > a > img {
        display: block;
        height: 400px;
        min-width: 100%;
        width: 100%;
        max-width: 100%;
        line-height: 1;
    }*/
＆＃13; 
  <!DOCTYPE html>
   
  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>PORTFOLIO DETAIL</title>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.3.1/css/hover-min.css" /> 
  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="all">

 <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> 
  <script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js'></script>
  <script src="js/jquery.bxslider.min.js"></script>
  <link href="css/jquery.bxslider.css" rel="stylesheet"/>
     <link href="css/animated-scroll-anchor.css" rel="stylesheet">

    <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
       <!-- Custom styles for this template -->
    <link rel="stylesheet" type="text/css" href="css/hover-min.css">
    <link href="css/style.css" rel="stylesheet">


</head>
<body>
  <div class="container-fluid-no-pad">
    <div class="row">
      
        <div class="col-md-2">
            <div id="carousel-pager" class="carousel slide " data-ride="carousel" data-interval="0">
                <!-- Carousel items -->
                <div class="carousel-inner vertical">
                    <div class="active item">
                        <img src="http://designermag.org/wp-content/uploads/2016/12/tech-apps-engineers.jpg" data-target="#carousel-main" data-slide-to="0">
                    </div>
                    <div class="item">
                        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQgzd-W7ygzK4W9IkwMdnY4a_u2qXx3kpFe1spWI5uLYJfEaROd" class="img-responsive thumbnail" data-target="#carousel-main" data-slide-to="1">
                    </div>
                    <div class="item">
                        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTCvJ5YlCZSUr3uPouAetbd7pe7BghuFt8WETSqibVsOUdSQzoV" class="img-responsive thumbnail" data-target="#carousel-main" data-slide-to="2">
                    </div>
                </div>
                
            </div>
        </div>
      </div>
    </div>
                <div class="row">
                <div class="col-md-12">
            <div id="carousel-main" class="carousel slide " data-ride="carousel" data-interval="5300">
                <!-- Carousel items -->
                <div class="carousel-inner">
                    <div class="active item">
                        <img src="http://designermag.org/wp-content/uploads/2016/12/tech-apps-engineers.jpg">
                    </div>
                    <div class="item">
                        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQgzd-W7ygzK4W9IkwMdnY4a_u2qXx3kpFe1spWI5uLYJfEaROd" class="img-responsive">
                    </div>
                    <div class="item">
                        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTCvJ5YlCZSUr3uPouAetbd7pe7BghuFt8WETSqibVsOUdSQzoV" class="img-responsive">
                    </div>
                </div>


                <!-- Controls -->
                <a class="left carousel-control" href=".carousel" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href=".carousel" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>
    </div>
  </div>
  </div>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/85807/jquery.easing.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/85807/jquery.bxslider.min.js'></script>
<script src="js/animated-scroll-anchor.js"></script>
<script src="js/scrolldown.js"></script>
<script src="js/custom.js"></script>
  </body>

</html>
＆＃13;
＆＃13;
＆＃13;

0 个答案:

没有答案
相关问题
最新问题