click btn-1

Output two pictures by slick

by stic_k

HTML

<div class="list-img">
		<img src="https://cdn0.iconfinder.com/data/icons/kameleon-free-pack-rounded/110/Images-Cloud-128.png" alt="">
		<img src="https://cdn0.iconfinder.com/data/icons/Pry_Black_png/128/Pictures_Black.png" alt="">
		<img src="https://cdn3.iconfinder.com/data/icons/social-network-2/512/650868-devianart-128.png" alt="">
		<img src="https://cdn2.iconfinder.com/data/icons/blackblue/128/preview.png" alt="">
    <img src="https://cdn3.iconfinder.com/data/icons/graphic-design-9/512/_Photography-128.png" alt="">
    <img src="https://cdn0.iconfinder.com/data/icons/kameleon-free-pack/110/Images-128.png" alt="">
</div>
<div class="out"></div>
<button class="btn">Показать ещё</button>

CSS

.list-img {
	display: none;
}

.out {
	display: flex;
	flex-wrap: wrap;
  max-width: 250px;
  width: 100%;
}

.outImg {
	margin: 2px 5px;
}

.outImg img {
	width: 50px;
	height: 50px;
}

.btn {
  color: #000;
  background: #aaa;
}

JavaScript

const images = [...document.querySelectorAll('.list-img > img')]
const output = document.querySelector('.out')

function showImages() {
	images.splice(0, 2).forEach(image => {
  	const div = document.createElement('div')

    div.className = 'outImg';
    div.innerHTML = `<img src="${image.src}" alt="Картинка">`
    output.appendChild(div)
    if (!images.length) {
    	document.querySelector('.btn').style.display = 'none';
    }
    else {
    document.querySelector('.btn').style.display = 'block';
    }
  })
}

document.querySelector('.btn').addEventListener('click', showImages)