carousel

How to output current slide number in Bootstrap 3 Carousel?

由 白昼怎懂夜的黑 提交于 2019-12-21 16:53:58
问题 I'm looking to output the current slide number using Bootstrap 3's Carousel plugin. Ideally, I would like to have this as text underneath the carousel div. For example: [CAROUSEL HERE] 3 of 9 I can output the total number of images (e.g. 9 in the example above) using a function in my CMS, but I can't figure out how to get the active slide (e.g. 3 in the example above.) I have searched all over and found one thread that seemed to do just that: How to Get total and Current Slide Number of

react hooks and setInterval

由 烂漫一生 提交于 2019-12-21 04:40:47
问题 Is there any alternative to just keeping a "clock" in the background to implement auto-next (after a few seconds) in carousel using react hooks? The custom react hook below implements a state for a carousel that supports manual (next, prev, reset) and automatic (start, stop) methods for changing the carousel's current (active) index. const useCarousel = (items = []) => { const [current, setCurrent] = useState( items && items.length > 0 ? 0 : undefined ); const [auto, setAuto] = useState(false

Bootstrap Carousel Jumps to top of page when advancing

由 蹲街弑〆低调 提交于 2019-12-21 04:05:15
问题 When I advance the slider manually, the slider jumps to the top of the page. How can I prevent this from happening? Help much appreciated! Here's the code: <div class="row"> <div class="span12"> <script> $('.carousel').carousel({ interval: 4000 }) </script> <div class="container"> <div id="myCarousel" class="carousel slide frame"> <!-- Carousel items --> <div class="carousel-inner"> <div class="active item"><a href="work.html"><img src="assets/images/slide_psd.jpg" width="1170" alt="wga"></a>

vue开发之路-轮播图

由 ◇◆丶佛笑我妖孽 提交于 2019-12-21 01:20:41
vue开发之路-轮播图 轮播图实现效果展示 代码实现 html内容 javascript内容 css内容 引用轮播组件代码 轮播图实现效果展示 轮播图实现实现效果图 代码实现 html内容 < template > < div id = "carousel" @mouseover = "stopAuto" @mouseout = "autoPlay" > < div class = "carousel-box" : style = "{width:allCount,'-webkit-transition':transitionConfig,'-webkit-transform':slateX}" ref = "carousel" > < div class = "carousel-item" : style = "{'-webkit-transform':imgLateX}" v - if = "loop" > < img : src = "imgList[imgList.length-1].img" / > < / div > < div class = "carousel-item" v - for = "(item,index) in imgList" : key = "index" : style = "{'-webkit-transform':getImgLateX

Fire event on Bootstrap carousel slide issue

由 ≡放荡痞女 提交于 2019-12-21 00:03:47
问题 I try to use this code to fire on an event upon carousel slide, but it fails to work for some reason. Any suggestions? var $carousel = $('#carousel-showcase'); $carousel.carousel(); $carousel.bind('slide', function(e) { setTimeout( function(){ var left = $carousel.find('.item.active.left'); var right = $carousel.find('.item.active.right'); if(left.length > 0) { $("#wrap").animate({ backgroundPositionX: '+=50%' },0); } else if(right.length > 0) { $("#wrap").animate({ backgroundPositionX: '-=50

Twitter Bootstrap Carousel IE Issues

由 为君一笑 提交于 2019-12-20 12:36:43
问题 I currently have a carousel using Twitter's bootstrap on my website. I'm controlling which divs to slide in based off this javascript, which works perfect in Chrome, Safari, FF, etc. But I'm having issues with it in IE 9 and lower. <script type="text/javascript"> $('.carbtn').click(function(q){ q.preventDefault(); targetSlide = $(this).attr('data-to')-1; $('#myCarousel').carousel(targetSlide); }); </script> The buttons to control the carousel look like this, <div class="carbtn" data-to="2"

An infinite carousel with vanilla JavaScript

由 吃可爱长大的小学妹 提交于 2019-12-20 10:48:42
问题 I am trying to build my own carousel with pure JavaScript. I'm struggling with picking up the most efficient way to add an infinite carousel option. For some reasons, every element (photo, generic object) must have an id The algorithm I see goes like that: You check if the carousel is overflown (the are enough objects to fit the whole container) If not: append to the back a copy of the first element, then a copy of the second element and so on. (But there will be an issue with the ids,

How do you remove the default Bootstrap 3 carousel control background gradients?

由 痴心易碎 提交于 2019-12-20 08:27:12
问题 I'm pretty sure this is the code I need to modify, but for some reason I can't get the gradients to disappear in IE. I want them completely gone! .carousel-control { text-shadow: none; opacity: 1; filter: alpha(opacity=100) } .carousel-control.left { background-image: -webkit-gradient(linear, 0 top, 100% top, from(rgba(0,0,0,0.5)), to(rgba(0,0,0,0.0001))); background-image: -webkit-linear-gradient(left, color-stop(rgba(0,0,0,0.5) 0), color-stop(rgba(0,0,0,0.0001) 100%)); background-image:

How to add a “active” class to a carousel first element

由 佐手、 提交于 2019-12-20 02:43:19
问题 I'm developing a News website in Wordpress, and I need to show in a bootstrap carousel the first three posts, my problem is that I need to add the "active" class only at the first of the three elements, but really don't know how to. Here's my code: <?php $args = array('numberposts' => '3'); $recent_posts = wp_get_recent_posts($args); foreach ($recent_posts as $recent) { echo '<div class="item active"><a href="' . get_permalink($recent["ID"]) . '" title=" ' . esc_attr($recent["post_title"]) .

Highcharts item width not 100% in carousel

由 白昼怎懂夜的黑 提交于 2019-12-20 02:35:37
问题 I'm dynamically creating highcharts graphs in my bootstrap carousel. I have a carousel like this: <div class="carousel"> <div class="carousel-inner"> <div id="item"> <div id="container1" data-highcharts-chart="0"> <div class="highcarts-container"> THE SVG </div> </div> </div> <div id="item"> <div id="container2" data-highcharts-chart="1"> <div class="highcarts-container"> THE SVG </div> </div> </div> <div id="item"> <div id="container3" data-highcharts-chart="2"> <div class="highcarts
订阅 carousel