OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Bootstrap gallery thumbnail with carousel bo

  • Thread starter Thread starter Wojtkovy
  • Start date Start date
W

Wojtkovy

Guest
I want add following effect - got 4 thumbnails, single thumbnail = different album: enter image description here

After click on single should be indicated carousel: enter image description here

I don't have idea how can I put together thumbnail and carousel. What can I use to automatic add pages with gallery albums, and management them on Bootstrap 3?

Code:
<section id="gallery">
<div class="container bg-5 text-center">
    <div class="row">
        <h2>Gallery</h2>
            <center>
            <div class="col-md-3">
                <a href="#">
                    <img class="img-responsive img-rounded" src="http://placehold.it/350x250" alt="">
                </a>
                39
            </div>
            <div class="col-md-3">
                <a href="#">
                    <img class="img-responsive img-rounded" src="http://placehold.it/350x250" alt="">
                </a>
                38
            </div>
            <div class="col-md-3">
                <a href="#">
                    <img class="img-responsive img-rounded" src="http://placehold.it/350x250" alt="">
                </a>
                37
            </div>
            <div class="col-md-3">
                <a href="#">
                    <img class="img-responsive img-rounded" src="http://placehold.it/350x250" alt="">
                </a>
                36
            </div>
            </center>
    </div>

    <div class="row">
        <div class="col-md-12">
            <ul class="pagination">
                <li>
                    <a href="#">&laquo;</a>
                </li>
                <li class="active">
                    <a href="#">1</a>
                </li>
                <li>
                    <a href="#">2</a>
                </li>
                <li>
                    <a href="#">3</a>
                </li>
                <li>
                    <a href="#">...</a>
                </li>
                <li>
                    <a href="#">&raquo;</a>
                </li>
            </ul>
        </div>
    </div> 
</div>


Carousel

<p>I want add following effect - got 4 thumbnails, single thumbnail = different album: <a href="https://i.sstatic.net/t34hn.jpg" rel="nofollow noreferrer"><img src="https://i.sstatic.net/t34hn.jpg" alt="enter image description here"></a></p>

<p>After click on single should be indicated carousel:
<a href="https://i.sstatic.net/5W6vT.jpg" rel="nofollow noreferrer"><img src="https://i.sstatic.net/5W6vT.jpg" alt="enter image description here"></a></p>

<p>I don't have idea how can I put together thumbnail and carousel.
What can I use to automatic add pages with gallery albums, and management them on Bootstrap 3?</p>

<pre><code><section id="gallery">
<div class="container bg-5 text-center">
<div class="row">
<h2>Gallery</h2>
<center>
<div class="col-md-3">
<a href="#">
<img class="img-responsive img-rounded" src="http://placehold.it/350x250" alt="">
</a>
39
</div>
<div class="col-md-3">
<a href="#">
<img class="img-responsive img-rounded" src="http://placehold.it/350x250" alt="">
</a>
38
</div>
<div class="col-md-3">
<a href="#">
<img class="img-responsive img-rounded" src="http://placehold.it/350x250" alt="">
</a>
37
</div>
<div class="col-md-3">
<a href="#">
<img class="img-responsive img-rounded" src="http://placehold.it/350x250" alt="">
</a>
36
</div>
</center>
</div>

<div class="row">
<div class="col-md-12">
<ul class="pagination">
<li>
<a href="#">&laquo;</a>
</li>
<li class="active">
<a href="#">1</a>
</li>
<li>
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
<li>
<a href="#">...</a>
</li>
<li>
<a href="#">&raquo;</a>
</li>
</ul>
</div>
</div>
</div>
</code></pre>

<p></p>

<p><a href="http://jsfiddle.net/JS6JV/444/" rel="nofollow noreferrer">Carousel</a></p>
 
Top