我正在尝试在Wordpress中使用Wootheme的Flexslider中的两个选择器，因为我需要在不同的页面上为我的幻灯片使用不同的样式。
当我将此行添加到滑块的代码时，
选择器：＆＃34; .slides＆gt; li，.my_slides＆gt;李＆＃34;
.sldes＆gt; li， - 工作正常，但.my_slides - 没有工作。
以下是滑块代码的链接： https://github.com/woothemes/FlexSlider/blob/master/jquery.flexslider.js
以下是我使用.slides和.my_slides：
的代码/* *********** (12) Display Post Format ******** */
function swm_display_post_format() {
$format = get_post_format();
if(empty($format)) {
$format = 'standard';
}
if( $format == 'standard' || $format == 'gallery' || $format == 'image' || $format == 'video' ) {
get_template_part( 'includes/' . $format );
}
}
/* ************* (13) Blog Gallery Slider ************* */
if ( !function_exists( 'swm_blog_gallery' ) ) {
function swm_blog_gallery($postid, $image_size) { ?>
<script type="text/javascript">
jQuery(document).ready(function($){
if ( $.browser.msie ){
if($.browser.version == '8.0') {
$("#flex-<?php echo $postid; ?>").flexslider({
slideshow: false,
controlNav: true,
smoothHeight: true,
start: function(slider) {
slider.container.click(function(event) {
if( !slider.animating ) slider.flexAnimate( slider.getTarget('next') );
});
}
});
}
}
$("#flex-<?php echo $postid; ?>").imagesLoaded( function() {
$("#flex-<?php echo $postid; ?>").flexslider({
slideshow: false,
controlNav: true,
smoothHeight: true,
start: function(slider) {
slider.container.click(function(event) {
if( !slider.animating ) slider.flexAnimate( slider.getTarget('next') );
});
}
});
});
});
</script>
<?php
$gal_images = rwmb_meta( 'swm_pf_gallery_photos', 'type=thickbox_image' );
$meta_gallery_img_height = rwmb_meta( 'swm_meta_gallery_img_height');
echo "<div class='pf_featured_img pf_l_img'><div class='swm_slider_box'><div id='flex-$postid' class='flexslider pfi_gallery'>";
if ( $gal_images ) {
echo "<ul class='slides'>";
foreach ( $gal_images as $gal_image ) {
// $swm_gal_image = "{$gal_image['url']}";
$swm_gal_image = swm_resize($gal_image['url'], 635, 425, $meta_gallery_img_height, true,'c',true);
echo "<li><img src='$swm_gal_image' alt='' /></li>";
}
echo '</ul>';
}
echo "</div></div></div>";
}
}
/* **************** (12) Display MY Post Format **************************** */
function swm_display_my_post_format() {
$format = 'gallery1';
get_template_part( 'includes/' . $format );
}
/* ***********************(13) Blog MY Gallery Slider *********************** */
if ( !function_exists( 'swm_my_blog_gallery' ) ) {
function swm_my_blog_gallery($postid, $image_size) { ?>
<script type="text/javascript">
jQuery(document).ready(function($){
if ( $.browser.msie ){
if($.browser.version == '8.0') {
$("#flex-<?php echo $postid; ?>").flexslider({
slideshow: true,
controlNav: true,
smoothHeight: true,
start: function(slider) {
slider.container.click(function(event) {
if( !slider.animating ) slider.flexAnimate( slider.getTarget('next') );
});
}
});
}
}
$("#flex-<?php echo $postid; ?>").imagesLoaded( function() {
$("#flex-<?php echo $postid; ?>").flexslider({
slideshow: true,
controlNav: true,
smoothHeight: true,
start: function(slider) {
slider.container.click(function(event) {
if( !slider.animating ) slider.flexAnimate( slider.getTarget('next') );
});
}
});
});
});
</script>
<?php
$gal_images = rwmb_meta( 'swm_pf_gallery_photos', 'type=thickbox_image' );
$meta_gallery_img_height = rwmb_meta( 'swm_meta_gallery_img_height');
echo "<div class='pf_featured_img pf_l_img'><div class='my_swm_slider_box'><div id='flex-$postid' class='flexslider pfi_gallery'>";
if ( $gal_images ) {
echo "<ul class='my_slides'>";
foreach ( $gal_images as $gal_image ) {
// $swm_gal_image = "{$gal_image['url']}";
$swm_gal_image = swm_resize($gal_image['url'], 510, 410, $meta_gallery_img_height, true,'c',true);
echo "<li><img src='$swm_gal_image' alt='' /></li>";
}
echo '</ul>';
}
echo "</div></div></div>";
}
}
这是生成HTML的地方：
<div class="best_img_wrap">
<div class="best_img">
<script type="text/javascript">
jQuery(document).ready(function ($) {
if ($.browser.msie) {
if ($.browser.version == '8.0') {
$("#flex-42").flexslider({
slideshow: false,
controlNav: true,
smoothHeight: true,
start: function (slider) {
slider.container.click(function (event) {
if (!slider.animating) slider.flexAnimate(slider.getTarget('next'));
});
}
});
}
}
$("#flex-42").imagesLoaded(function () {
$("#flex-42").flexslider({
slideshow: false,
controlNav: true,
smoothHeight: true,
start: function (slider) {
slider.container.click(function (event) {
if (!slider.animating) slider.flexAnimate(slider.getTarget('next'));
});
}
});
});
});
</script>
<div class="pf_featured_img pf_l_img">
<div class="swm_slider_box">
<div class="flexslider pfi_gallery" id="flex-42" style="height: 425px;">
<ul class="slides">
<li style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 1;
display: block; z-index: 2;" class="flex-active-slide">
<img alt="" src="http://localhost/inst_new/wp-content/uploads/2013/08/Untitled-5-0x0_1.jpg"
draggable="false"></li><li style="width: 100%; float: left; margin-right: -100%;
position: relative; opacity: 0; display: block; z-index: 1;">
<img alt="" src="http://localhost/inst_new/wp-content/uploads/2013/08/rp_11-0x0_1.jpg"
draggable="false"></li><li style="width: 100%; float: left; margin-right: -100%;
position: relative; opacity: 0; display: block; z-index: 1;">
<img alt="" src="http://localhost/inst_new/wp-content/uploads/2013/08/violin-0x0_1.jpg"
draggable="false"></li></ul>
<ol class="flex-control-nav flex-control-paging">
<li><a class="flex-active">1</a></li><li><a>2</a></li><li><a>3</a></li></ol>
<ul class="flex-direction-nav">
<li><a href="#" class="flex-prev">Previous</a></li><li><a href="#" class="flex-next">
Next</a></li></ul>
</div>
</div>
</div>
</div>
</div>
这里生成的HTML无法正常工作：
<div class="my_post_wrapper">
<p>
</p>
<div class="caty_name">
<a rel="category" title="View all posts in Crack Repairs" href="http://localhost/inst_new/?cat=8">
Crack Repairs</a></div>
<p>
</p>
<div class="my_post_title">
<h3>
<a title="Permanent Link to Recent Post 3 + Crack Repair" href="http://localhost/inst_new/?p=64"
class="service_single_title"></a>
<div class="caty_title">
<a title="Permanent Link to Recent Post 3 + Crack Repair" href="http://localhost/inst_new/?p=64"
class="service_single_title">Recent Post 3 + Crack Repair</a></div>
</h3>
</div>
<!-- .post title -->
<div class="my_post_content featured_post">
<script type="text/javascript">
jQuery(document).ready(function ($) {
if ($.browser.msie) {
if ($.browser.version == '8.0') {
$("#flex-64").flexslider({
slideshow: true,
controlNav: true,
smoothHeight: true,
start: function (slider) {
slider.container.click(function (event) {
if (!slider.animating) slider.flexAnimate(slider.getTarget('next'));
});
}
});
}
}
$("#flex-64").imagesLoaded(function () {
$("#flex-64").flexslider({
slideshow: true,
controlNav: true,
smoothHeight: true,
start: function (slider) {
slider.container.click(function (event) {
if (!slider.animating) slider.flexAnimate(slider.getTarget('next'));
});
}
});
});
});
</script>
<div class="pf_featured_img pf_l_img">
<div class="my_swm_slider_box">
<div class="flexslider pfi_gallery" id="flex-64">
<ul class="my_slides">
<li>
<img alt="" src="http://localhost/inst_new/wp-content/uploads/2013/08/Untitled-1-0x0_1.jpg"></li><li>
<img alt="" src="http://localhost/inst_new/wp-content/uploads/2013/08/Untitled-71-0x0_1.jpg"></li></ul>
</div>
</div>
</div>
<p>
<a class="white_button" href="http://localhost/inst_new/?p=64">Read more >></a></p>
</div>
</div>
答案 0 :(得分：2)
默认情况下，Flexslider会查找类＆＃34;幻灯片＆＃34;在UL上。第一个例子就是这种情况，第二个例子就是＆＃34; my_slides＆＃34;。
您可以在第二个滑块UL上更改类，或者可以在初始化flexslider时指定选择器，如下所示：
$("#flex-64").imagesLoaded(function () {
$("#flex-64").flexslider({
slideshow: true,
controlNav: true,
smoothHeight: true,
selector: '.my_slides > li',
start: function (slider) {
slider.container.click(function (event) {
if (!slider.animating) slider.flexAnimate(slider.getTarget('next'));
});
}
});
});
编辑：我想我错过了你的一个问题。如果我理解正确，您是否正在尝试为Flexslider提供两个不同的选择器，以便它可能起作用？这应该有效，但它没有在您的代码中表示。我错过了什么吗？