我有一个带有上一个/下一个箭头的弹性滑块,相当标准.我隐藏了页面加载上的箭头,只希望它们在用户将鼠标悬停在轮播信息上时显示.
这是我的代码:
$(".flex-container.home ul.flex-direction-nav").hide();
$(".flex-container.home .flexslider").hover(
function(){
$(".flex-container.home ul.flex-direction-nav").fadeIn();
},
function(){
$(".flex-container.home ul.flex-direction-nav").fadeOut();
}
)
现在的问题是,当用户实际上悬停在箭头本身上时,它会淡出,因为技术上我要求它这样做.我试图在ul.flex-direction-nav css样式中添加一些重要的CSS,但它并没有阻止淡出发生.
我正在使用flexslider,容器div有一个背景图像,就像设置在它底部的边框一样.我需要做的是让容器div像实际的flexslider div一样响应.因此,当您从右向左缩小窗口时,容器div的高度应该改变高度,如果这是有意义的.图像尺寸为1680x748.目前容器div的高度为805px,宽度设置为100%.所以宽度无关紧要.只需要改变高度.
由于布局问题,我试图在flexslider本身之外使用.flex-caption.
你能想到我能做到这一点的方法吗？
理想情况下,标记的结构如下:
<div class="flexslider gallery">
<ul class="slides">
<li><img src="image.jpg" /></li>
</ul>
</div>
<p class="flex-caption">Caption</p>
我正在使用基本的 flexslider，我想显示一些上一个和下一个，因此如果显示幻灯片 2，您将看到左侧的幻灯片 1 的一部分和右侧的幻灯片 3 的一部分。
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<style>
.container {overflow: hidden; width: 100%}
.flexslider {max-width: 500px; width: 500px; margin: 0 auto}
.content {background: #f2f2f2; max-width: 500px; display: block; margin: 0 auto}
.flex-viewport {overflow: visible !important}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div class="container">
<div class="flexslider">
<ul class="slides">
<li><img src="785.jpg" /></li>
<li><img src="785.jpg" /></li>
<li><img src="785.jpg" /></li>
<li><img src="785.jpg" /></li>
</ul>
</div>
</div>
<script src="jquery.flexslider.js"></script>
<script>
jQuery(document).ready(function($) { …我正在尝试使用FlexSlider创建响应式滑块.我的目标是让所有幻灯片的最大高度等于.flexslider100%的高度.
以下代码段显示了我的问题:我希望所有幻灯片(红色和绿色)都具有最大高度,覆盖容器高度(独立于其内容).我试着设置height:100%;但它不起作用.我能做什么？
我在flexslider上设置了自动高度，其下方仍留有空间。
我已将背景色应用到滑块，并且它使用自动高度并上下移动，但似乎滑块正在拍摄最大的照片并将滑块保持在该高度。
任何帮助将是巨大的！
您可以在此处实时查看该页面：http : //therichmondhillgallery.com/index.php/shows/bruce-yardley/
This is my html:
<div id="carousel" class="flexslider">
<ul class="slides">
<li class="slide">
<img src="<?php echo $thumb_image; ?>" />
</li>
</ul>
</div>
<div id="slider" class="flexslider">
<ul class="slides">
<li class="slide">
<img class="slidermainimg" src="<?php echo $main_image; ?>" />
</li>
</ul>
</div>
这是我的CSS：
/* Browser Resets
*********************************/
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;}
/* Icon Fonts
*********************************/
/* Font-face Icons */
@font-face {
font-family: 'flexslider-icon'; …HTML代码
<div class="flexslider carousel mtop20">
<ul class="slides col-md-12" id="div_portion">
</ul>
</div>
jQuery 代码
在这里，我在 flexslider 中动态附加了 div。它附加成功但禁用了下一个和上一个按钮。
$div = "<li> Content here </li>";
$("#div_portion").append($div);
slider = $('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
itemWidth : 210,
itemMargin: 5,
minItems: 1
});
我的问题是如何以正确的工作模式在 flexslider 中动态添加 div？
感谢帮助。
我在每张幻灯片上使用带有标题的 flexslider。这是有效的，除了我希望标题位于幻灯片的顶部，而不是底部。我可以看到将标题放在顶部的唯一方法是绝对定位它，但是当我这样做时，标题的宽度太宽（数千像素，而不是与父元素一样宽）。
<div class="flexslider">
<ul class="slides">
<li>
<img src="data/homeSlides/brennys.jpg">
<p class="flex-caption">Brenny's Motorcycle Clinic ></p>
</li>
<li>
<img src="data/homeSlides/aledoFireStation.jpg">
<p class="flex-caption">Aledo Fire Protection District ></p>
</li>
<li>
<img src="data/homeSlides/trueNorth.jpg">
<p class="flex-caption">True North ></p>
</li>
<li>
<img src="data/homeSlides/operationThreshold.jpg">
<p class="flex-caption">Operation Threshold ></p>
</li>
<li>
<img src="data/homeSlides/sadler.jpg">
<p class="flex-caption">Sadler ></p>
</li>
</ul>
</div>
css：
.flex-caption {
background:rgba(73, 92, 94, 1);
height:50px;
line-height:50px;
margin:0;
text-align:right;
color:#ff5200;
padding-right:20px;
bottom:0;
width:98%;
}
如何让标题正确显示在幻灯片的顶部？
我想在移动设备中显示3个缩略图,在弹性滑块中显示4个桌面缩略图.为此我使用带有动态最小/最大范围版本的flex滑块的Carousel.如果您调整该页面的大小,您会看到根据浏览器窗口宽度更改的thmubanils数量.但是当我使用相同的代码在我的网站或jsfiddle或任何地方它不起作用.这里是jsfiddle证明和相同的代码:
(function() {
// store the slider in a local variable
var $window = $(window),
flexslider = {
vars: {}
};
// tiny helper function to add breakpoints
function getGridSize() {
return (window.innerWidth < 600) ? 2 :
(window.innerWidth < 900) ? 3 : 4;
}
$window.load(function() {
$('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 210,
itemMargin: 5,
minItems: getGridSize(), // use function to pull in initial value
maxItems: getGridSize() // use function to pull …有没有人能够在新的woocommerce滑块中为Next/Prev幻灯片添加导航箭头？
特别是在移动/桌面上的缩略图导航很棒,但是对于桌面用户来说也有箭头是一个梦想!主产品图像上的箭头优于灯箱.您将在我们的网站上了解原因:http: //52.56.199.58/collection/bedroom/giorgetti-syn-bedside-table/
看起来Woocommerce已经忘记了一个简单而明显的选择.任何帮助或指导将不胜感激.
干杯
flexslider ×10
javascript ×6
jquery ×6
css ×5
html ×4
slider ×2
height ×1
slideshow ×1
woocommerce ×1