私のウェブサイトにランダムな写真をスライダーで表示

-1

私は自分のウェブサイトにスライダーを持っていて、その中にランダムな写真を表示したいと思います。私のhtmlコードは以下の通りです：私のウェブサイトにランダムな写真をスライダーで表示

<li class="swiper-slide item telef" data-id="1" style="width:250px; height:10px;"> 
    <div class="phone" style="display:none;"> 
    <a href="http://xxx.pl/pl/xxxx/prestizowy/_/apple_iphone_7_256_gb"> 
     <img src="<?= $basePath ?>images/iphone7_sl.png" 
      style="width:130px; height:250px; margin-left:auto; 
        margin-right:auto;" alt=""> 
    </a> 
    <div class="caption"> 
     <a href="http://xxxx.pl/pl/xxxxx/prestizowy/_/apple_iphone_7_256_gb"> 
      iPhone <strong>7</strong> 
     </a> 
    </div> 
    </div> 
</li>

私は約20のリストアイテムを持っているとjQueryで私のスクリプトは次のとおりです。

$(document).ready(function() { 
    display = 6; 
    var divs = $('.phone').get().sort(function(){ 
    return Math.round(Math.random())-0.5; 
    }).slice(0,6); 
    $(divs).show(); 
});

しかし、このスクリプトは動作しません。問題はどこだ？

出典

2017-10-18 J.Doe

を見ることができるようにあなたのスクリプトが作業を行う* doesnの」仕事*？ – Liam

あなたは、単にforループに自分で要素を並べ替えることができます。

for (var i = 0; i < $('.phone').length; i++) { 
    j = Math.floor(Math.random() * $('.phone').length); 
    $('.phone').eq(i).before($('.phone').eq(j)); 
}

出典

2017-10-18 08:47:05 Zenoo

あなたはこのスニペットで

$(document).ready(function() { 
 
    display = 6; 
 
    var divs = $('.phone').get().sort(function(){ 
 
    return Math.round(Math.random())-0.5; 
 
    }).slice(0,6); 
 
    $(divs).show(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<li class="swiper-slide item telef" data-id="1" style="width:250px; height:10px;"> 
 
    <div class="phone" style="display:none;"> 
 
    <a href="http://xxx.pl/pl/xxxx/prestizowy/_/apple_iphone_7_256_gb"><img src="<?= $basePath ?>images/iphone7_sl.png" style="width:130px; height:250px; margin-left:auto; margin-right:auto;" alt=""></a> 
 
    <div class="caption"><a href="http://xxxx.pl/pl/xxxxx/prestizowy/_/apple_iphone_7_256_gb">iPhone <strong>7</strong></a></div> 
 
    </div> 
 
</li> 
 
<li class="swiper-slide item telef" data-id="1" style="width:250px; height:10px;"> 
 
    <div class="phone" style="display:none;"> 
 
    <a href="http://xxx.pl/pl/xxxx/prestizowy/_/apple_iphone_7_256_gb"><img src="<?= $basePath ?>images/iphone7_sl.png" style="width:130px; height:250px; margin-left:auto; margin-right:auto;" alt=""></a> 
 
    <div class="caption"><a href="http://xxxx.pl/pl/xxxxx/prestizowy/_/apple_iphone_7_256_gb">iPhone <strong>7</strong></a></div> 
 
    </div> 
 
</li> 
 
<li class="swiper-slide item telef" data-id="1" style="width:250px; height:10px;"> 
 
    <div class="phone" style="display:none;"> 
 
    <a href="http://xxx.pl/pl/xxxx/prestizowy/_/apple_iphone_7_256_gb"><img src="<?= $basePath ?>images/iphone7_sl.png" style="width:130px; height:250px; margin-left:auto; margin-right:auto;" alt=""></a> 
 
    <div class="caption"><a href="http://xxxx.pl/pl/xxxxx/prestizowy/_/apple_iphone_7_256_gb">iPhone <strong>7</strong></a></div> 
 
    </div> 
 
</li> 
 
<li class="swiper-slide item telef" data-id="1" style="width:250px; height:10px;"> 
 
    <div class="phone" style="display:none;"> 
 
    <a href="http://xxx.pl/pl/xxxx/prestizowy/_/apple_iphone_7_256_gb"><img src="<?= $basePath ?>images/iphone7_sl.png" style="width:130px; height:250px; margin-left:auto; margin-right:auto;" alt=""></a> 
 
    <div class="caption"><a href="http://xxxx.pl/pl/xxxxx/prestizowy/_/apple_iphone_7_256_gb">iPhone <strong>7</strong></a></div> 
 
    </div> 
 
</li> 
 
<li class="swiper-slide item telef" data-id="1" style="width:250px; height:10px;"> 
 
    <div class="phone" style="display:none;"> 
 
    <a href="http://xxx.pl/pl/xxxx/prestizowy/_/apple_iphone_7_256_gb"><img src="<?= $basePath ?>images/iphone7_sl.png" style="width:130px; height:250px; margin-left:auto; margin-right:auto;" alt=""></a> 
 
    <div class="caption"><a href="http://xxxx.pl/pl/xxxxx/prestizowy/_/apple_iphone_7_256_gb">iPhone <strong>7</strong></a></div> 
 
    </div> 
 
</li> 
 
<li class="swiper-slide item telef" data-id="1" style="width:250px; height:10px;"> 
 
    <div class="phone" style="display:none;"> 
 
    <a href="http://xxx.pl/pl/xxxx/prestizowy/_/apple_iphone_7_256_gb"><img src="<?= $basePath ?>images/iphone7_sl.png" style="width:130px; height:250px; margin-left:auto; margin-right:auto;" alt=""></a> 
 
    <div class="caption"><a href="http://xxxx.pl/pl/xxxxx/prestizowy/_/apple_iphone_7_256_gb">iPhone <strong>7</strong></a></div> 
 
    </div> 
 
</li> 
 
<li class="swiper-slide item telef" data-id="1" style="width:250px; height:10px;"> 
 
    <div class="phone" style="display:none;"> 
 
    <a href="http://xxx.pl/pl/xxxx/prestizowy/_/apple_iphone_7_256_gb"><img src="<?= $basePath ?>images/iphone7_sl.png" style="width:130px; height:250px; margin-left:auto; margin-right:auto;" alt=""></a> 
 
    <div class="caption"><a href="http://xxxx.pl/pl/xxxxx/prestizowy/_/apple_iphone_7_256_gb">iPhone <strong>7</strong></a></div> 
 
    </div> 
 
</li> 
 
<li class="swiper-slide item telef" data-id="1" style="width:250px; height:10px;"> 
 
    <div class="phone" style="display:none;"> 
 
    <a href="http://xxx.pl/pl/xxxx/prestizowy/_/apple_iphone_7_256_gb"><img src="<?= $basePath ?>images/iphone7_sl.png" style="width:130px; height:250px; margin-left:auto; margin-right:auto;" alt=""></a> 
 
    <div class="caption"><a href="http://xxxx.pl/pl/xxxxx/prestizowy/_/apple_iphone_7_256_gb">iPhone <strong>7</strong></a></div> 
 
    </div> 
 
</li> 
 
<li class="swiper-slide item telef" data-id="1" style="width:250px; height:10px;"> 
 
    <div class="phone" style="display:none;"> 
 
    <a href="http://xxx.pl/pl/xxxx/prestizowy/_/apple_iphone_7_256_gb"><img src="<?= $basePath ?>images/iphone7_sl.png" style="width:130px; height:250px; margin-left:auto; margin-right:auto;" alt=""></a> 
 
    <div class="caption"><a href="http://xxxx.pl/pl/xxxxx/prestizowy/_/apple_iphone_7_256_gb">iPhone <strong>7</strong></a></div> 
 
    </div> 
 
</li> 
 
<li class="swiper-slide item telef" data-id="1" style="width:250px; height:10px;"> 
 
    <div class="phone" style="display:none;"> 
 
    <a href="http://xxx.pl/pl/xxxx/prestizowy/_/apple_iphone_7_256_gb"><img src="<?= $basePath ?>images/iphone7_sl.png" style="width:130px; height:250px; margin-left:auto; margin-right:auto;" alt=""></a> 
 
    <div class="caption"><a href="http://xxxx.pl/pl/xxxxx/prestizowy/_/apple_iphone_7_256_gb">iPhone <strong>7</strong></a></div> 
 
    </div> 
 
</li> 
 
<li class="swiper-slide item telef" data-id="1" style="width:250px; height:10px;"> 
 
    <div class="phone" style="display:none;"> 
 
    <a href="http://xxx.pl/pl/xxxx/prestizowy/_/apple_iphone_7_256_gb"><img src="<?= $basePath ?>images/iphone7_sl.png" style="width:130px; height:250px; margin-left:auto; margin-right:auto;" alt=""></a> 
 
    <div class="caption"><a href="http://xxxx.pl/pl/xxxxx/prestizowy/_/apple_iphone_7_256_gb">iPhone <strong>7</strong></a></div> 
 
    </div> 
 
</li>

出典

2017-10-18 08:48:36 DreamWave

それは動作しますが、私はこのコードを使用すると、私のスライダで空の場所です。それは6つのランダムな写真を示していますが、空の場所があります。これを避ける方法は？ –

それは別の問題と別の質問です。しかし、あなたはliの中にdivsを隠している/表示しています。スライダーはliの内容を表示します。 liを削除（）してスライダーをリセットする必要があるため、残りの要素だけで必要なものを計算します。 – DreamWave

私のウェブサイトにランダムな写真をスライダーで表示

答えて

関連する問題