ट्विटर बूटस्ट्रैप कैरोसेल वर्टिकल स्लाइडिंग

Question

क्या लंबवत कैरोसेल स्लाइडिंग चौड़ाई ट्विटर बूटस्ट्रैप को कार्यान्वित करना संभव है? bootstrap.js में मैं इस

, slide: function (type, next) { 
    var $active = this.$element.find('.active') 
    , $next = next || $active[type]() 
    , isCycling = this.interval 
    , direction = type == 'next' ? 'left' : 'right' 
    , fallback = type == 'next' ? 'first' : 'last' 
    , that = this 

लगता है मैं दिशा को "ऊपर" बदलने के लिए और "नीचे" लेकिन काम नहीं कर रहा फिसलने की कोशिश की।

Answer 1

हां।

नीचे ऐसा करने के लिए एक हैकी तरीका है, जो सीएसएस को ओवरराइड करके सब कुछ करता है।

आप अपने हिंडोला के लिए एक वर्ग vertical जोड़ें और फिर पृष्ठ के लिए निम्न CSS जोड़ने खड़ी होने की रपट को पार कर जाएगी, तो:

.vertical .carousel-inner { 
    height: 100%; 
} 

.carousel.vertical .item { 
    -webkit-transition: 0.6s ease-in-out top; 
    -moz-transition: 0.6s ease-in-out top; 
     -ms-transition: 0.6s ease-in-out top; 
     -o-transition: 0.6s ease-in-out top; 
      transition: 0.6s ease-in-out top; 
} 

.carousel.vertical .active { 
    top: 0; 
} 

.carousel.vertical .next { 
    top: 100%; 
} 

.carousel.vertical .prev { 
    top: -100%; 
} 

.carousel.vertical .next.left, 
.carousel.vertical .prev.right { 
    top: 0; 
} 

.carousel.vertical .active.left { 
    top: -100%; 
} 

.carousel.vertical .active.right { 
    top: 100%; 
} 

.carousel.vertical .item { 
    left: 0; 
}​ 

carousel.less और बदलने में यह सब कुछ मूल रूप से ले जा रहा है left से top।

JSFiddle

---

यह कम से कम आप इसे खड़ी स्लाइड करने के लिए प्राप्त करने के लिए क्या करने की जरूरत इंगित करता है। हालांकि, व्यावहारिक रूप से, वास्तव में up और down कक्षाओं को carousel.less में जोड़ना चाहिए और bootstrap-carousel.js पर उनके बीच स्विच करने के लिए एक नया विकल्प जोड़ें।

Answer 2

बाहर की कोशिश करो इस प्लगइन https://github.com/tutorialdrive/Bootstrap-Vertical-Thumbnail-Carousel

और यहाँ पर एक नज़र डालें।

Twitter Bootstrap Vertical Thumbnail Carousel

Answer 3

पिछले जवाब में प्रदान की समाधान कुछ लोकप्रिय ब्राउज़रों (गूगल क्रोम की तरह) जब बूटस्ट्रैप (v3.3.4) के नवीनतम (वर्तमान) संस्करण के साथ उपयोग पर ठीक से काम नहीं करते।

मामले में किसी को भी एक अद्यतन समाधान है कि बूटस्ट्रैप v3.3.4 के साथ काम करता जरूरत है, यहाँ यह है -

.carousel-inner.vertical { 
 
    height: 100%; 
 
} 
 
.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 { 
 
    top: 0; 
 
    -webkit-transform: translate3d(0, 100%, 0); 
 
    transform: translate3d(0, 100%, 0); 
 
    } 
 
    .carousel-inner.vertical > .item.prev, 
 
    .carousel-inner.vertical > .item.active.left { 
 
    top: 0; 
 
    -webkit-transform: translate3d(0, -100%, 0); 
 
    transform: translate3d(0, -100%, 0); 
 
    } 
 
    .carousel-inner.vertical > .item.next.left, 
 
    .carousel-inner.vertical > .item.prev.right, 
 
    .carousel-inner.vertical > .item.active { 
 
    top: 0; 
 
    -webkit-transform: translate3d(0, 0, 0); 
 
    transform: translate3d(0, 0, 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: 100%; 
 
} 
 
.carousel-inner.vertical > .prev { 
 
    left: 0; 
 
    top: -100% 
 
} 
 
.carousel-inner.vertical > .next.left, 
 
.carousel-inner.vertical > .prev.right { 
 
    top: 0; 
 
} 
 
.carousel-inner.vertical > .active.left { 
 
    left: 0; 
 
    top: -100%; 
 
} 
 
.carousel-inner.vertical > .active.right { 
 
    left: 0; 
 
    top: 100%; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 
<div style="width:600px"> <!-- wrap @img width --> 
 
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="3000"> 
 
    <!-- 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 vertical" role="listbox"> 
 
     <div class="item active"> 
 
     <img src="http://placehold.it/600x400&text=First+Slide" alt="First Slide"> 
 
     <div class="carousel-caption"> 
 
      First Slide 
 
     </div> 
 
     </div> 
 
     <div class="item"> 
 
     <img src="http://placehold.it/600x400&text=Second+Slide" alt="Second Slide"> 
 
     <div class="carousel-caption"> 
 
      Second Slide 
 
     </div> 
 
     </div> 
 
     <div class="item"> 
 
     <img src="http://placehold.it/600x400&text=Third+Slide" alt="Third Slide"> 
 
     <div class="carousel-caption"> 
 
      Third Slide 
 
     </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">Previous</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">Next</span> 
 
    </a> 
 
    </div> 
 
</div>

नोट: यदि आपका carousel-inner करने के लिए vertical वर्ग जोड़ सकते हैं या संपादित सीएसएस जैसा आपको पसंद है।