我有一个光滑的滑块,如光滑页面中显示的示例,我使用这样的代码,
<div class="slideshow">
<img src="http://lorempixel.com/500/250" />
<img src="http://lorempixel.com/500/251" />
<img src="http://lorempixel.com/500/249" />
</div>
Run Code Online (Sandbox Code Playgroud)
用缩略图的carousal
<div class="thumbs">
<img src="http://lorempixel.com/100/100/" />
<img src="http://lorempixel.com/100/100/" />
<img src="http://lorempixel.com/100/100/" />
</div>
Run Code Online (Sandbox Code Playgroud)
现在Js代码是这样的:
$('.slideshow').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.thumbs'
});
$('.thumbs').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slideshow',
dots: true,
centerMode: true,
focusOnSelect: true
});
Run Code Online (Sandbox Code Playgroud)
这很好,但我想要实现的是当前的拇指幻灯片我想添加一些东西,比如类,或者当前拇指的内部元素(例如:img).
我试过这样的代码:
$('.thumbs').on('beforeChange', function(event, slick, currentSlide, nextSlide){
$('.slick-current img').addClass('works');
});
Run Code Online (Sandbox Code Playgroud)
但没有工作,我的代码出了什么问题,有没有办法让这项工作正常运行
我正在使用flexslider进行一些图像旋转,现在需要使用此幻灯片实现Popup Gallery,即,当用户点击滑块内的活动幻灯片时,想要在灯箱中显示为图库.
所以我尝试合并'magnificPopup',它有效,但问题是它抓住幻灯片的所有实例,即如果我在滑块中有2个图像,我将在弹出库中获得4个,即,magnificpopup获取所有实例包括'克隆',那么如何实现这个问题,有没有其他方法,或插件或回调函数,我可以使用?下面是我试过的代码,都是基本的实现
Flex Sldier:
$('.slideTwo').flexslider({
animation: "slide",
controlNav: true,
directionNav: false,
animationLoop: true,
slideshow: false
});
Run Code Online (Sandbox Code Playgroud)
MagnificPopup:
$('.popup-link').magnificPopup({
type: 'image',
gallery:{enabled:true}
});
Run Code Online (Sandbox Code Playgroud)
HTML:
<div class="slideTwo" id="slideTwo">
<ul class="slides">
<li>
<a class="popup-link" href="img/room1.jpg"><img src="img/room1.jpg" alt="">
<span>East Wall</span>
</a>
</li>
<li>
<a class="popup-link"href="img/room21.jpg"><img src="img/room21.jpg" alt="">
<span>West Wall</span>
</a>
</li>
</ul>
</div>
Run Code Online (Sandbox Code Playgroud) 我想用Youtube视频创建一个Slick滑块,因此我可以将youtube iFrame直接嵌入到幻灯片中,这样就可以了,但是我想要实现的是当幻灯片更改时Video应该停止/暂停播放。
我正在使用Slick Slider。
这是我正在使用的HTML ::
<div class="entry_slider_video">
<div data-thumb="http://placehold.it/140x100">
<iframe width="560" height="315" src="https://www.youtube.com/embed/gLJdzky63BA" frameborder="0" allowfullscreen></iframe>
</div>
<div data-thumb="http://placehold.it/140x100"><iframe width="420" height="315" src="https://www.youtube.com/embed/Tf4sa0BVJVw?rel=0&enablejsapi=1" frameborder="0" allowfullscreen></iframe>
</div>
<div data-thumb="http://placehold.it/140x100">
<iframe width="420" height="315"src="https://www.youtube.com/embed/QF903RaKLvs?rel=0&enablejsapi=1" frameborder="0" allowfullscreen>
</iframe>
</div>
Run Code Online (Sandbox Code Playgroud)
和JS :::
$('.entry_slider_video').slick({
arrows: false,
fade: true,
autoplay: true,
dots: true,
customPaging : function(slider, i) {
var thumb = $(slider.$slides[i]).data('thumb');
return '<a class="enty_thumbs"><img src="'+thumb+'"></a>';
}
});
Run Code Online (Sandbox Code Playgroud)
我知道我必须使用Youtube API(https://developers.google.com/youtube/iframe_api_reference)才能实现此目的,我尝试了SO的一些解决方案,但没有运气。任何帮助将不胜感激,谢谢。
我正在尝试从另一个WordPress网站获取博客文章,到目前为止,我已经成功获取了这些文章,并且正在使用以下代码段:
$response = wp_remote_get( add_query_arg( array(
'per_page' => 1,
'categories' => 38
), 'https://www.remotesite.com/wp-json/wp/v2/posts?_embed' )
);
if( !is_wp_error( $response ) && $response['response']['code'] == 200 ) {
$remote_posts = json_decode( $response['body'] );
foreach( $remote_posts as $remote_post ) {
echo '<h2>'. $remote_post->title->rendered . '</h2>
<p>' . $remote_post->excerpt->rendered . '</p>';
}
}
Run Code Online (Sandbox Code Playgroud)
使用上面的代码,我可以获取所有必需的详细信息,标题,摘录和特色图片。但是,我很难找到如何从上述响应中获取“特色图片”网址。谁能告诉我如何从响应中使用wp:featuredmedia。我在下面的代码中看到了获取特色图片URL的地方,但这对我没有帮助:
echo [your-data]._embedded['wp:featuredmedia']['0'].source_url
Run Code Online (Sandbox Code Playgroud) 我正在使用jquery mouseover事件在wordpress中使用ajax获取一些数据,ajax工作正常,但我的问题是当我们将鼠标移到元素上时,更快的事件会触发多个动作,即如果我移动鼠标时会发出警报反复越过元素,我会得到多个警报,我不想要这个,我尝试解除绑定,但不能正常工作.这里是
<ul class="tab-content">
<li><div class="place-holder"></div></li>
<li><div class="place-holder"></div></li>
<li><div class="place-holder"></div></li>
<li><div class="place-holder"></div></li>
</ul>
$(document).on('mouseover', '.place-holder' , function(e){
alert ('hallo');
}
Run Code Online (Sandbox Code Playgroud) jquery ×4
javascript ×2
slick.js ×2
wordpress ×2
ajax ×1
flexslider ×1
json ×1
slider ×1
slideshow ×1
youtube ×1