Tag: 轮播

Jcarousel – 在无限循环中首先显示最后一个图像

我想知道是否有人使用Jcarousel会有关于如何克隆或显示轮播的最后一个图像作为第一张图像的建议。 5张照片的示例，其中轮播显示3个图像，它目前看起来像这样： 1 – 2 – 3（4和5等待显示） 相反，这是我试图在加载时实现的： 5 – 1 – 2（3和4等待显示） 我目前使用的是以下设置： 换行：’循环’，滚动：1，自动：1， 我尝试了一个偏移量：-1但是这显示一个空白并且不起作用。 我还尝试了一个偏移来启动带有最后一个图像的轮播 – 但是，将包裹设置为’圆形’这也不起作用并使其他图像变为空白，直到您手动加载它们。 我已经尽力寻找自己的答案，但感谢您的帮助，谢谢您提前。 编辑：我也愿意接受可以做到这一点的不同脚本的建议 – 谢谢！ 编辑＃2：首先感谢那些评论。 进一步的研究：我发现这个网站（www.anothermag.com）能够很好地显示最后一张图像，我相信它是基于代码使用Jquery SerialScroll。 我还没试过这个，但看起来很有希望。 我的另一个想法是看看我是否可以将最后一个图像显示为Wordpress循环中的第一个，这样它仍然使用Jcarousel但硬编码最后一个图像。 将发布更多更新。 编辑＃3：最终解决方案： 我已经选择了Sparky672下面的答案，因为我认为可以说Jcarousel截至今天没有能力这样做而不需要在加载前重新排列图像。 但是，如果有人对选项/替代方案感兴趣，我将使用Fred HQ的优秀剧本“Roundabout”。 我将使用的示例如下： http ： //fredhq.com/projects/roundabout/demo/around 通过一些小的修改，它将完成我所需要的，而无需在装载部分进行太多工作。 设置将是为所有图像将不透明度设置为1，将倾斜设置为0，在设置间隔中添加自动滚动，将框的大小设置为相同大小。 这个特殊的旋转木马需要一个白色的分隔符，所以我将使用“围绕物体移动”的例子，使中间的“东西”成为一个白色的盒子，以隐藏被环绕的东西。 我希望这可以帮助别人。 再次感谢！

如何使用Twitter Bootstrap轮播显示一组随机幻灯片？

如何创建幻灯片数组，然后只显示一定数量的幻灯片？ 例如，如果我设置这样的数组： var slides = []; slides[0] = ”; slides[1] = ”; slides[2] = ”; slides[3] = ”; slides[4] = ”; slides[5] = ”; slides[6] = ”; slides[7] = ”; slides[8] = ”; slides[9] = ”; slides[10] = ”; 如何随机选择10个中的5个，然后将其输出到Twitter Bootstrap轮播？ [Items go here, first one needs to get the class ‘active’]

如何告诉Bootstrap Carousel跳过一个元素或类？

我正在使用Bootstrap Carousel for Tumblr，效果很好。 但是，在主题自定义页面上，Tumblr将JavaScript添加到HTML左，右和中心。 这导致旋转木马断裂，因为下一个元素是意外的。 简单地将它放在代码中它看起来像这样 /* bunch of stuff go here */ /* bunch of stuff go here */ /* bunch of stuff go here */ 实时预览 删除JS是不可能的，所以我需要一种方法来告诉轮播使用标签或custom-js-code类跳过这些元素。 有任何想法吗？

建立一个旋转木马。 Chrome和Firefox的性能不佳

我以前问过这个问题，但我得到的唯一答案是这个链接：shouldiuseacarousel.com。 我知道旋转木马对用户体验几乎没有什么作用，并且基本上没有价值，但这不是这里的情况。 我正在使用的旋转木马是一个在线杂志的隐喻，可以提供在真实杂志中浏览页面的体验。 因此非常相关。 在创建这个旋转木马时，我的最终目标是实现平滑的滚动体验，同时仍然保持旋转木马的某些核心function。 请记住，我是一个只有几个月的javascript经验的javascript学习者，并且欢迎任何关于优化或想法的建议，并且非常感谢。 所以，我创建了一个带有一个名为“Carousel_Container”的简单div容器的旋转木马，其中css属性为“overflow：scroll;”。 嵌套在里面是另一个名为“Carousel”的容器，它容纳我所有的“杂志标题”或“项目”。 用户可以通过加载单击项目和杂志文章。 到目前为止，我已经创建了两个核心function：1）当用户滚动时，我希望中间的项目脱颖而出。 所以所有项目都有css“不透明度：0.3;” 除了中间的项目。 这是我解决这个问题的逻辑： 我创建了一个名为“Focus_Point”的变量，它由以下内容定义： var Focus_Point = Window_Width * 0.5; 这用于称为“ItemToFocus”的核心函数： var ItemToFocus = function(){ if( MousewheelActive == 1 ){ First_Item_Offset = $Active_Carousel_Item.first().offset().left; First_Item_Offset = -First_Item_Offset; Focus_Point = 0.45 * Window_Width; Carousel_Position = First_Item_Offset + Focus_Point; Width = $Item.first().width(); Length = $Active_Carousel_Item.length; for( i=0; i […]

引导转盘是否可以仅通过部分滑轨旋转？

我直接从自助站点有一个香草旋转木马。 $(‘.carousel’).carousel({ interval: 2000 }) 它有5个幻灯片，有5个指标： 1 2 3 AB 我希望旋转木马自动循环滑动1 2和3，然后重复。 但是，如果我点击幻灯片A或B的指示器，我想转到该幻灯片并暂停转盘。 如何将自动旋转限制为仅滑动1 2和3？

Bootstrap轮播幻灯片问题上的火灾事件

我尝试使用此代码在旋转木马滑动时触发事件，但由于某种原因它无法工作。 有什么建议？ 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%’ },0); } }, 500); });

jquery jcarousel如何添加控制按钮

我目前正在开发一个使用Sorgilla jquery jcarousel的网站，有两个滑块一起工作。 var carousel_2; jQuery(document).ready(function() { jQuery(‘#right-carousel’).jcarousel({ start: 1, // Configuration goes here wrap: “circular”, scroll: 1, auto:3, vertical:true, itemFirstInCallback: { onBeforeAnimation: function(carousel, item, index, action) { if (carousel_2) { carousel_2[action](); } } } }); }); jQuery(document).ready(function() { jQuery(‘#mycarousel’).jcarousel({ start: 3, // Configuration goes here wrap: “circular”, scroll: 1, auto:3, vertical:false, buttonNextHTML: null, buttonPrevHTML: […]

jQuery 3D旋转木马？

有没有人看过像这样的jQuery 3D轮播教程？ http://web.enavu.com/demos/3dcarouselwip/ 没有给出任何消息来源，但是想知道是否有人提示如何连续圈出DIV并调整它们的大小。 它似乎不是真正的3D，但根据位置调整DIV的大小？ 谢谢，胡安

如何制作带箭头的猫头鹰旋转木马而不是下一个

昨天我向一位顾客推出了一个网站。 我总是使用猫头鹰旋转木马，因为它的响应。 客户如何讨厌以前的，接下来的话，并希望将它们改为箭头。 所以我更新了我的脚本。 js文件。 这很容易做到，我想分享它。 $(document).ready(function(){ $(‘.owl-carousel’).owlCarousel({ nav:true, responsive:{ … }) $( “.owl-prev”).html(”); $( “.owl-next”).html(”); }); 在那里，你有它。 您可以随时添加更多样式。 （我第一次使用答案你自己的问题希望这是正确的地方/方式）

轮播脚本中的Jquery函数定义

我有一个带有LOOP的Carousel图像的脚本 $(document).ready(function() { //rotation speed and timer var speed = 5000; var run = setInterval(rotate(), speed); //grab the width and calculate left value var item_width = $(‘#slides li’).outerWidth(); var left_value = item_width * (-1); //move the last item before first item, just in case user click prev button $(‘#slides li:first’).before($(‘#slides li:last’)); //set the default item […]