I created a deck of cards and i want to make this:
- you select one card from the deck and this card appear in one div
- after choose one card, you choose another one, and that one appear next to the first
- and last, you can choose the 3rd and appear next the second.
like this: example of i want
<script>
images = [{source: "https://i.ibb.co/xC9r03B/1.jpg"},
{source: "https://i.ibb.co/hD5gs5R/2.jpg"},
{source: "https://i.ibb.co/0Xp0cSP/3.jpg"},
{source: "https://i.ibb.co/93tbwS3/4.jpg"},
{source: "https://i.ibb.co/f0DXWPY/5.jpg"},
{source: "https://i.ibb.co/B3QKhHQ/6.jpg"},
{source: "https://i.ibb.co/48m63Td/7.jpg"},
{source: "https://i.ibb.co/g9LBRNV/8.jpg"},
{source: "https://i.ibb.co/LCLG4Pg/9.jpg"},
{source: "https://i.ibb.co/BCnts8n/10.jpg"},
{source: "https://i.ibb.co/gdmx5gf/11.jpg"},
{source: "https://i.ibb.co/7XHj70V/12.jpg"},
{source: "https://i.ibb.co/B4FXMFY/13.jpg"},
{source: "https://i.ibb.co/T2J10xZ/14.jpg"},
{source: "https://i.ibb.co/jyPBVDJ/15.jpg"},
{source: "https://i.ibb.co/wzxK0tF/16.jpg"},
{source: "https://i.ibb.co/rHVGGXY/17.jpg"},
{source: "https://i.ibb.co/zh1xDCc/18.jpg"},
{source: "https://i.ibb.co/RNKmV88/19.jpg"},
{source: "https://i.ibb.co/0VHf5WW/20.jpg"},
{source: "https://i.ibb.co/bNtj8bK/21.jpg"},
{source: "https://i.ibb.co/pd4VvBB/22.jpg"},
{source: "https://i.ibb.co/Cz3T8Mv/23.jpg"},
{source: "https://i.ibb.co/4Fj8wxh/24.jpg"},
{source: "https://i.ibb.co/vkSNcYb/25.jpg"},
{source: "https://i.ibb.co/vwcvTDt/26.jpg"},
{source: "https://i.ibb.co/KrP3MNT/27.jpg"},
{source: "https://i.ibb.co/mv7YNP9/28.jpg"},
{source: "https://i.ibb.co/FY6H7M3/29.jpg"},
{source: "https://i.ibb.co/ZfGxn5L/30.jpg"},
{source: "https://i.ibb.co/ynFxgkZ/31.jpg"},
{source: "https://i.ibb.co/x1bJ2Kv/32.jpg"},
{source: "https://i.ibb.co/ccz6Kvc/33.jpg"},
{source: "https://i.ibb.co/Ksq0dbQ/34.jpg"},
{source: "https://i.ibb.co/DMdq8ZV/35.jpg"},
{source: "https://i.ibb.co/Th2chnY/36.jpg"},
{source: "https://i.ibb.co/pPfwtDp/37.jpg"},
{source: "https://i.ibb.co/MNMWc90/38.jpg"},
{source: "https://i.ibb.co/cc7jmXg/39.jpg"},
{source: "https://i.ibb.co/HDw5pvy/40.jpg"},
{source: "https://i.ibb.co/WKLsZ43/41.jpg"},
{source: "https://i.ibb.co/dP621Nh/42.jpg"},
{source: "https://i.ibb.co/FgvybkW/43.jpg"},
{source: "https://i.ibb.co/g3HQ7p9/44.jpg"},
{source: "https://i.ibb.co/q0N9XMS/45.jpg"},
{source: "https://i.ibb.co/42nHpfQ/46.jpg"},
{source: "https://i.ibb.co/bLtxmTg/47.jpg"},
{source: "https://i.ibb.co/SRfwZLh/48.jpg"},
{source: "https://i.ibb.co/wsZZGns/49.jpg"},
{source: "https://i.ibb.co/zfFsGPV/50.jpg"},
{source: "https://i.ibb.co/bKdkLdp/51.jpg"},
{source: "https://i.ibb.co/3kMbhdy/52.jpg"},
{source: "https://i.ibb.co/wr6HJfH/53.jpg"},
{source: "https://i.ibb.co/VpGL6dB/54.jpg"},
{source: "https://i.ibb.co/4Nr00V3/55.jpg"},
{source: "https://i.ibb.co/9T9Yym3/56.jpg"},
{source: "https://i.ibb.co/1zSZb56/57.jpg"},
{source: "https://i.ibb.co/qCJZ08y/58.jpg"},
{source: "https://i.ibb.co/SxyKRfg/59.jpg"},
{source: "https://i.ibb.co/tYYqPkn/60.jpg"},
{source: "https://i.ibb.co/0ZHJqx3/61.jpg"},
{source: "https://i.ibb.co/n3CqJBF/62.jpg"},
{source: "https://i.ibb.co/JK0h1Hp/63.jpg"},
{source: "https://i.ibb.co/KLPFm0d/64.jpg"},
{source: "https://i.ibb.co/SxCHRTy/65.jpg"},
{source: "https://i.ibb.co/d5G9cYq/66.jpg"},
{source: "https://i.ibb.co/KV8KNgK/67.jpg"},
{source: "https://i.ibb.co/zxVHPj1/68.jpg"},
{source: "https://i.ibb.co/LnfZRhM/69.jpg"},
{source: "https://i.ibb.co/kSsXQY7/70.jpg"},
{source: "https://i.ibb.co/BgNQy6q/71.jpg"},
{source: "https://i.ibb.co/cT2W6HT/72.jpg"},
{source: "https://i.ibb.co/k0yp3tT/73.jpg"},
{source: "https://i.ibb.co/McxsJ41/74.jpg"},
{source: "https://i.ibb.co/ZXs92PR/75.jpg"},
{source: "https://i.ibb.co/StxscSv/76.jpg"},
{source: "https://i.ibb.co/3r4ypZb/77.jpg"},
{source: "https://i.ibb.co/bmc59fr/78.jpg"}]
var usedImages = [];
var random = function(){
var numberOfImages = images.length;
var num = getNum();
console.log(num);
if (usedImages.indexOf(num) === -1) {
document.getElementById("image").src = images[num].source;
document.getElementById("text").innerHTML = images[num].text;
usedImages.push(num);
}
else {
if (usedImages.length === numberOfImages) {
usedImages = [];
}
pickImage();
}
};
var getNum = function() {
var length = images.length - 1;
return Math.round(Math.random()* length);
}
$(document).ready(function () {
$("#shadow").click(function (e) {
e.preventDefault();
$(".test:hidden").first().show();
});
});
</script><section id="slideshow">
<div class="entire-content">
<div class="content-carrousel">
<figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure>
<figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure>
<figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure>
<figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure>
<figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure>
<figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure>
<figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure>
<figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure> <figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure>
<figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure>
<figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure>
<figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure>
<figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure>
<figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure>
<figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure>
<figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure><figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure>
<figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure>
<figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure>
<figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure>
<figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure>
<figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure>
<figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure>
<figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure> <figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure>
<figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure>
<figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure>
<figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure>
<figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure>
<figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure>
<figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure>
<figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure> <figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure>
<figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure>
<figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure>
<figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure>
<figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure>
<figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure>
<figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure>
<figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure> <figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure>
<figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure>
<figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure>
<figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure>
<figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure>
<figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure>
<figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure>
<figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure> <figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure>
<figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure>
<figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure>
<figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure>
<figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure>
<figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure>
<figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure>
<figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure> <figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure>
<figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure>
<figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure>
<figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure>
<figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure>
<figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure>
<figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure>
<figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure>
<figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure>
<figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure>
<figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure>
<figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure>
<figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure>
<figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure>
<figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure>
<figure id="shadow"><img src="https://files.cargocollective.com/c583702/branco.jpg" onclick="random()"></figure>
</div>
</div>
</section>
<div grid-row="" grid-pad="0" grid-gutter="0" grid-responsive="">
<div class="test" grid-col="x10" grid-pad="0">
<div class="test" style="text-align: center">
<img id="image" width="200" style="box-shadow: 0px 0px 20px 0px #9E7889;border-radius: 0.5em;" src="https://i.ibb.co/HDw5pvy/40.jpg"></div>
</div>
<div class="test" grid-col="x10" grid-pad="0"><div style="text-align: center">
<img id="image" width="200" style="box-shadow: 0px 0px 20px 0px #9E7889;border-radius: 0.5em;" src="https://i.ibb.co/1zSZb56/57.jpg"></div></div>
<div class="test" grid-col="x10" grid-pad="0"><div style="text-align: center">
<img id="image" width="200" style="box-shadow: 0px 0px 20px 0px #9E7889;border-radius: 0.5em;" src="https://i.ibb.co/1zSZb56/57.jpg"></div>
</div>
</div>
Aucun commentaire:
Enregistrer un commentaire