小滑雪板2排牌

Question

我使用的是小滑块2，我试着在一页上有两行卡片。正如我在这里所读到的，https://github.com/ganlanyuan/tiny-slider/issues/433作者建议把两行画成一张大幻灯片。

我现在的html代码是：

<div class="slider_wrapper">
                <div id='attraction_slider' class="attraction_slider">
                    <div>
                        <!-- Cards added dynamically > 
                    </div>
                    <div>
                        <!-- Cards added dynamically > 
                    </div>

                </div>
            </div>

然而，当我这样做时，我得到了以下结果：

​

​

如能提供任何帮助，将不胜感激。

Answer 1

​

var slider = tns({
            container: '.my-slider',
            items: 1,
            responsive: {
                1: {
                    edgePadding: 20,
                    gutter: 20,
                    items: 1,
                    mouseDrag: true
                },
                700: {
                    gutter: 30,
                    mouseDrag: true
                },
                900: {
                    items: 1,
                    mouseDrag: true
                }
            }
        });

.card {
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
            transition: 0.3s;
            /* width: 300px; */
        }
        .card > img {
            height: 200px;
        }
        
        .card:hover {
            box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
        }
        
        .container {
            padding: 2px 16px;
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/tiny-slider.css" rel="stylesheet"/>
<h1>Hello there! How are you?</h1>
    <div class="my-slider">
        <div class="card">
            <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar">
            <div class="container">
                <h4><b>John Doe</b></h4>
                <p>Architect & Engineer</p>
            </div>
        </div>
        <div>
            <div class="card">
                <img src="https://www.w3schools.com/howto/img_avatar2.png" alt="Avatar">
                <div class="container">
                    <h4><b>Jane Doe</b></h4>
                    <p>Interior Designer</p>
                </div>
            </div>
            <div class="card">
                <img src="https://www.w3schools.com/howto/img_avatar2.png" alt="Avatar">
                <div class="container">
                    <h4><b>Jane Doe</b></h4>
                    <p>Interior Designer</p>
                </div>
            </div>
        </div>
        <div class="card">
            <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar">
            <div class="container">
                <h4><b>John Doe</b></h4>
                <p>Architect & Engineer</p>
            </div>
        </div>
    </div>

​

对我来说，一切都很好。我想你是在你的卡上装好之前打电话给tns。在ReadMe文件中，在开头有一个警告，我在这里粘贴它。

警告：微滑块只适用于静态内容，只在浏览器中工作。如果HTML是动态加载的，请确保在加载后调用tns()。

请确保在您的卡加载完毕后，您是否正在打电话给tns。