如何写每个幻灯片显示6 div的js代码

Question

我需要jQuery中的代码来显示每张幻灯片6个div。我有滑块，我想只显示6个div /元素，在6 div之后代码将创建下一个幻灯片（div与类幻灯片）

<div class="slide"> <div> 6elements </div> </div> next slide => <div> 6 elements </div>

Answer 1

光滑滑块

这是一个 working Plunker ，它展示了如何使用响应断点实现jQuery / Slick插件。

Slick的文档为幻灯片提供了多种选项。

的Javascript

    PasteboardRef pboardRef = NULL;
    PasteboardCreate((__bridge CFStringRef)NSDragPboard, &pboardRef);
    PasteboardSetPasteLocation(pboardRef, (__bridge CFURLRef)temporaryDirectory);

    NSString *urlString = [dragPboard stringForType:(NSString *)kPasteboardTypeFileURLPromise];

    CFRelease(pboardRef);

HTML

$('#slick').slick({
    infinite: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    rows: 2,
    slidesPerRow: 3,
    responsive: [{
        breakpoint: 600,
        settings: {
            slidesToShow: 1,
            rows: 2,
            slidesPerRow: 2,
        }
    }]
});

CSS

<div id="slick">
    <div class="slide">
        <div class="img-container"><img src="http://i.imgur.com/alhBkw5.png"></div>
    </div>
    <div class="slide">
        <div class="img-container"><img src="http://i.imgur.com/Qdqaawt.png"></div>
    </div>
    <div class="slide">
        <div class="img-container"><img src="http://i.imgur.com/Bplxu8k.jpg"></div>
    </div>
    <div class="slide">
        <div class="img-container"><img src="http://i.imgur.com/fixuYTj.jpg"></div>
    </div>
    <div class="slide">
        <div class="img-container"><img src="http://i.imgur.com/IhOP2Sh.jpg"></div>
    </div>
    <div class="slide">
        <div class="img-container"><img src="http://i.imgur.com/9hpqKt0.jpg"></div>
    </div>
    <div class="slide">
        <div class="img-container"><img src="http://i.imgur.com/IhOP2Sh.jpg"></div>
    </div>
    <div class="slide">
        <div class="img-container"><img src="http://i.imgur.com/9VCx5.jpg"></div>
    </div>
    <div class="slide">
        <div class="img-container"><img src="http://i.imgur.com/scV4kAY.png"></div>
    </div>
    <div class="slide">
        <div class="img-container"><img src="http://i.imgur.com/PfDrZOZ.jpg"></div>
    </div>
    <div class="slide">
        <div class="img-container"><img src="http://i.imgur.com/lxMUSqZ.jpg"></div>
    </div>
    <div class="slide">
        <div class="img-container"><img src="http://i.imgur.com/wD1r3Yk.png"></div>
    </div>
</div>

Wordpress功能

以下是php函数的 Wordpress demo 。

PHP

将此功能添加到.img-container { overflow: hidden; max-height: 100px; margin: 3px 5px; } .img-container img { width: 100%; } #slick { /* optional */ max-width: 700px; margin: 50px auto; } 文件中：

functions.php

将其添加到您的function six_images_slider() { $args = array('numberposts' => 18); $recent_posts = wp_get_recent_posts( $args ); $output = '<div id="slick">'; foreach ($recent_posts as $post) { $featured_image_src = wp_get_attachment_url( get_post_thumbnail_id($post['ID'] ) ); $output .= '<div class="slide"><div class="img-container"><img src="'.$featured_image_src.'"></div></div>'; } $output .= '</div>'; echo $output; } 模板文件中：

home.php

此外，它应该适用于任何Wordpress模板文件。

功能说明

• 此功能通过调用wp_get_recent_posts获取最新的18个帖子。
• 然后它会遍历帖子并通过调用get_post_thumbnail_id并将结果传递给wp_get_attachment_url来获取特色图像以获取src。