Image grid with image Popup slide show

Modals Bootstrap 5Free+ CSS+ JS

Free Bootstrap 5 modal snippet — Image grid with image Popup slide show. Preview, copy HTML, CSS & JS, drop it into any Bootstrap 5 project.

4.8k views126 downloads5 years ago

gosnippets.com/preview/image-grid-with-image-popup-slide-show

Source Code

1 <!-- popup -->
2    <div class="popup">
3        <!-- top bar -->
4        <div class="top-bar">
5            <p class="image-name">img1.png</p>
6            <span class="close-btn"></span>
7        </div>
8        <!-- arrows -->
9        <button class="arrow-btn left-arrow"><img src="https://github.com/kunaal438/image-popup/blob/master/img/arrow.png?raw=true" alt=""></button>
10        <button class="arrow-btn right-arrow"><img src="https://github.com/kunaal438/image-popup/blob/master/img/arrow.png?raw=true" alt=""></button>
11        <!-- image -->
12        <img src="img/img1.png" class="large-image" alt="">
13        <!-- image-index -->
14        <h1 class="index">01</h1>
15    </div>
16
17    <div class="gallery">
18        <div class="gallery-image">
19            <img src="https://github.com/kunaal438/image-popup/blob/master/img/img1.png?raw=true" alt="" class="image">
20        </div>
21        <div class="gallery-image">
22            <img src="https://github.com/kunaal438/image-popup/blob/master/img/img2.png?raw=true" alt="" class="image">
23        </div>
24        <div class="gallery-image">
25            <img src="https://github.com/kunaal438/image-popup/blob/master/img/img3.png?raw=true" alt="" class="image">
26        </div>
27        <div class="gallery-image">
28            <img src="https://github.com/kunaal438/image-popup/blob/master/img/img4.png?raw=true" alt="" class="image">
29        </div>
30        <div class="gallery-image">
31            <img src="https://github.com/kunaal438/image-popup/blob/master/img/img5.png?raw=true" alt="" class="image">
32        </div>
33        <div class="gallery-image">
34            <img src="https://github.com/kunaal438/image-popup/blob/master/img/img6.png?raw=true" alt="" class="image">
35        </div>
36    </div>

More Modals snippets

Bootstrap Delete Confirmation Modal snippet

Bootstrap Delete Confirmation Modal snippet — a free Bootstrap 5 modal snippet. Copy the HTML and paste straight into your Bootstrap 5 project.

ModalsView →

Bootstrap Simple Success Confirmation Popup snippet

Free Bootstrap 5 modal snippet — Bootstrap Simple Success Confirmation Popup snippet. Preview, copy HTML, drop it into any Bootstrap 5 project.

ModalsView →

Bootstrap 5 customer ratings modal snippets with emojis

Add a modal to your UI with Bootstrap 5 customer ratings modal snippets with emojis. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.

ModalsView →

Comments(0)

No comments yet — be the first to start the discussion.

1  2 <div class="popup"> 3  4 <div class="top-bar"> 5 <p class="image-name">img1.png</p> 6 <span class="close-btn"></span> 7 </div> 8  9 <button class="arrow-btn left-arrow"><img src="https://github.com/kunaal438/image-popup/blob/master/img/arrow.png?raw=true" alt=""></button> 10 <button class="arrow-btn right-arrow"><img src="https://github.com/kunaal438/image-popup/blob/master/img/arrow.png?raw=true" alt=""></button> 11  12 <img src="img/img1.png" class="large-image" alt=""> 13  14 <h1 class="index">01</h1> 15 </div> 16 17 <div class="gallery"> 18 <div class="gallery-image"> 19 <img src="https://github.com/kunaal438/image-popup/blob/master/img/img1.png?raw=true" alt="" class="image"> 20 </div> 21 <div class="gallery-image"> 22 <img src="https://github.com/kunaal438/image-popup/blob/master/img/img2.png?raw=true" alt="" class="image"> 23 </div> 24 <div class="gallery-image"> 25 <img src="https://github.com/kunaal438/image-popup/blob/master/img/img3.png?raw=true" alt="" class="image"> 26 </div> 27 <div class="gallery-image"> 28 <img src="https://github.com/kunaal438/image-popup/blob/master/img/img4.png?raw=true" alt="" class="image"> 29 </div> 30 <div class="gallery-image"> 31 <img src="https://github.com/kunaal438/image-popup/blob/master/img/img5.png?raw=true" alt="" class="image"> 32 </div> 33 <div class="gallery-image"> 34 <img src="https://github.com/kunaal438/image-popup/blob/master/img/img6.png?raw=true" alt="" class="image"> 35 </div> 36 </div>