When it comes to creating a slideshow, the basic structure remains constant even if only select images are displayed. The key difference lies in using display: none for certain images.
To customize your slideshow, you may consider incorporating navigation arrows for users to navigate through images. This can be achieved by implementing pseudo-classes like :before:-first-of-type and :after:last-of-type.
Alternatively, adding a bit of JavaScript or jQuery can enhance functionality:
$(".slideshow > img:gt(0)").hide();
setInterval(function() {
$('.slideshow > img:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('.slideshow');
}, 3000);
This script hides all images initially and then fades them in sequentially. You can see this in action below:
$(document).ready(function() {
$("#view-content").on("click", function(e) {
for (var i = 0; i < 20; i++) {
if ($('#topic' + i).prop('checked')) {
$('.topic' + i).show();
} else {
$('.topic' + i).hide();
}
}
$(".slideshow > img:gt(0)").hide();
setInterval(function() {
$('.slideshow > img:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('.slideshow');
}, 3000);
});
});
.column {
float: left;
width: 33.33%;
}
.row:after {
content: "";
display: table;
clear: both;
}
input[type=checkbox] {}
.topic {
width: 200px;
height: 3em;
line-height: 3em;
background: #ccc;
border-radius: 50px;
text-align: center;
vertical-align: middle;
}
button {
border-radius: 50px;
border: none;
width: 10em;
height: 3em;
line-height: 3em;
}
.view {
display: block;
margin: 0 auto;
}
.selectall {
display: none;
}
.slideshow {
overflow: auto;
white-space: nowrap;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h1>Topics</h1>
<h4>Or choose from popular search terms: </h4>
<div class="row">
<button type="button">term1</button>
<button type="button">term2</button>
<button type="button">term3</button>
<button type="button">term4</button>
<button type="button">term5</button>
<button type="button">term6</button>
<button type="button">term7</button>
<button type="button">term8</button>
<button type="button">term9</button>
<button type="button">term10</button>
</div>
<hr>
<div class="row">
<div class="column">
<div class="topic">
<input type="checkbox" id="topic1" />
<label for="topic1">Topic 1</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic2" />
<label for="topic2">Topic 2</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic3" />
<label for="topic3">Topic 3</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic4" />
<label for="topic4">Topic 4</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic5" />
<label for="topic5">Topic 5</label>
</div>
</div>
<div class="column">
<div class="topic">
<input type="checkbox" id="topic6" />
<label for="topic6">Topic 6</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic7" />
<label for="topic7">Topic 7</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic8" />
<label for="topic8">Topic 8</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic9" />
<label for="topic9">Topic 9</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic10" />
<label for="topic10">Topic 10</label>
</div>
</div>
<div class="column">
<div class="topic">
<input type="checkbox" id="topic11" />
<label for="topic11">Topic 11</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic12" />
<label for="topic12">Topic 12</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic13" />
<label for="topic13">Topic 13</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic14" />
<label for="topic14">Topic 14</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic15" />
<label for="topic15">Topic 15</label>
</div>
</div>
</div>
<br/>
<button type="button" class="view" id="view-content">View Content</button>
<div class="slideshow">
<img class="topic1 selectall" src="https://i.imgur.com/Kf2zBCB.jpg" />
<img class="topic2 selectall" src="https://i.imgur.com/Sd44gRr.jpg" />
<img class="topic3 selectall" src="https://i.imgur.com/5t6Qp5y.jpg" />
<img class="topic4 selectall" src="https://i.imgur.com/5vyPC7P.jpg" />
<img class="topic5 selectall" src="https://i.imgur.com/H400nzy.jpg" />
<img class="topic6 selectall" src="https://i.imgur.com/MXVqtDe.jpg" />
<img class="topic7 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
<img class="topic8 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
<img class="topic9 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
<img class="topic10 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
<img class="topic11 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
<img class="topic12 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
<img class="topic13 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
<img class="topic14 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
<img class="topic15 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
</div>