小编Sal*_*h K的帖子

获取SLICK SLIDER的当前幻灯片并将类添加到内部元素

我有一个光滑的滑块,如光滑页面中显示的示例,我使用这样的代码,

<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)

但没有工作,我的代码出了什么问题,有没有办法让这项工作正常运行

javascript jquery slider slick.js

7
推荐指数
1
解决办法
2万
查看次数

Flexslider带有弹出图库

我正在使用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)

javascript jquery slideshow flexslider magnific-popup

4
推荐指数
1
解决办法
3864
查看次数

Slick-carousel-如何在幻灯片更改上暂停和播放嵌入式YouTube视频?

我想用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&amp;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&amp;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的一些解决方案,但没有运气。任何帮助将不胜感激,谢谢。

youtube jquery youtube-iframe-api slick.js

1
推荐指数
1
解决办法
5958
查看次数

如何在WP REST API响应中使用wp:featuredmedia?

我正在尝试从另一个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)

wordpress json wordpress-rest-api

1
推荐指数
1
解决办法
935
查看次数

当快速移动鼠标时,jQuery鼠标悬停事件会多次触发

我正在使用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)

ajax wordpress jquery

0
推荐指数
1
解决办法
2157
查看次数