LinGeo Template

Return to:
G & L WebDesign

In certain instances it's best to have just thumbnail images in a slideshow, as in the first horizontal Carousel.

Horizontal Thumbnail Carousel with Lightbox

˂
˃
View code
		
	<div class="container">
		<div id="horiz-slider">
            <div class="lingeothumbs-but horiz left">&#706;</div>
		<ul>
			<li>
          <div class="image"><a href="assets/imgs/site-imgs/img-01.jpg" title="" data-lightbox="group" data-title="Portfolio image 1">
			<img src="assets/imgs/site-imgs/img-sml-01.jpg"></a>
			</li>
			<li>
          <div class="image"><a href="assets/imgs/site-imgs/img-02.jpg" title="" data-lightbox="group" data-title="Portfolio image 2">
				<img src="assets/imgs/site-imgs/img-sml-02.jpg"></a>
			</li>
			<li>
          <div class="image"><a href="assets/imgs/site-imgs/img-03.jpg" title="" data-lightbox="group" data-title="Portfolio image 3">
				<img src="assets/imgs/site-imgs/img-sml-03.jpg"></a>
			</li>
			<li>
          <div class="image"><a href="assets/imgs/site-imgs/img-04.jpg" title="" data-lightbox="group" data-title="Portfolio image 4">
				<img src="assets/imgs/site-imgs/img-sml-04.jpg"></a>
			</li>
			<li>
          <div class="image"><a href="assets/imgs/site-imgs/img-05.jpg" title="" data-lightbox="group" data-title="Portfolio image 5">
				<img src="assets/imgs/site-imgs/img-sml-05.jpg"></a>
			</li>
			<li>
          <div class="image"><a href="assets/imgs/site-imgs/img-06.jpg" title="" data-lightbox="group" data-title="Portfolio image 6">
				<img src="assets/imgs/site-imgs/img-sml-06.jpg"></a>
			</li>
			<li>
          <div class="image"><a href="assets/imgs/site-imgs/img-07.jpg" title="" data-lightbox="group" data-title="Portfolio image 7">
				<img src="assets/imgs/site-imgs/img-sml-07.jpg"></a>
			</li>
			<li>
          <div class="image"><a href="assets/imgs/site-imgs/img-08.jpg" title="" data-lightbox="group" data-title="Portfolio image 8">
				<img src="assets/imgs/site-imgs/img-sml-08.jpg"></a>
			</li>
			<li>
          <div class="image"><a href="assets/imgs/site-imgs/img-09.jpg" title="" data-lightbox="group" data-title="Portfolio image 9">
				<img src="assets/imgs/site-imgs/img-sml-09.jpg"></a>
			</li>
			<li>
          <div class="image"><a href="assets/imgs/site-imgs/img-10.jpg" title="" data-lightbox="group" data-title="Portfolio image 10">
				<img src="assets/imgs/site-imgs/img-sml-10.jpg"></a>
			</li>
			<li>
          <div class="image"><a href="assets/imgs/site-imgs/img-11.jpg" title="" data-lightbox="group" data-title="Portfolio image 11">
				<img src="assets/imgs/site-imgs/img-sml-11.jpg"></a>
			</li>
			<li>
          <div class="image"><a href="assets/imgs/site-imgs/img-12.jpg" title="" data-lightbox="group" data-title="Portfolio image 12">
				<img src="assets/imgs/site-imgs/img-sml-12.jpg"></a>
			</li>
     	</ul>
            	<div class="lingeothumbs-but horiz right">&#707;</div>
			</div>
		</div>
	</div>	
		
	

Vertical Thumbnail Carousel with Lightbox

˅
˄
View code
		
	<div class="container">
			<div  id="vert-slider">
				<div class="lingeothumbs-but vert top">&#709;</div>
		<ul>
			<li>
          <div class="image"><a href="assets/imgs/site-imgs/img-13.jpg" title="" data-lightbox="group" data-title="Portfolio image 13">
		    	<img src="assets/imgs/site-imgs/img-13.jpg" alt="" class="img-fluid"></a>
		</div>
		    	<h5>Title</h5>
			</li>
			<li>
          <div class="image"><a href="assets/imgs/site-imgs/img-14.jpg" title="" data-lightbox="group" data-title="Portfolio image 14">
		    	<img src="assets/imgs/site-imgs/img-14.jpg" alt="" class="img-fluid"></a>
		</div>
		    	<h5>Title</h5>
			</li>
			<li>
          <div class="image"><a href="assets/imgs/site-imgs/img-15.jpg" title="" data-lightbox="group" data-title="Portfolio image 15">
		    	<img src="assets/imgs/site-imgs/img-15.jpg" alt="" class="img-fluid"></a>
		</div>
		    	<h5>Title</h5>
			</li>
			<li>
          <div class="image"><a href="assets/imgs/site-imgs/img-16.jpg" title="" data-lightbox="group" data-title="Portfolio image 16">
		    	<img src="assets/imgs/site-imgs/img-16.jpg" alt="" class="img-fluid"></a>
		</div>
		    	<h5>Title</h5>
			</li>
			<li>
          <div class="image"><a href="assets/imgs/site-imgs/img-17.jpg" title="" data-lightbox="group" data-title="Portfolio image 17">
		    	<img src="assets/imgs/site-imgs/img-17.jpg" alt="" class="img-fluid"></a>
		</div>
		    	<h5>Title</h5>
			<li>
          <div class="image"><a href="assets/imgs/site-imgs/img-18.jpg" title="" data-lightbox="group" data-title="Portfolio image 18">
		    	<img src="assets/imgs/site-imgs/img-18.jpg" alt="" class="img-fluid"></a>
		</div>
		    	<h5>Title</h5>
			</li>
			<li>
          <div class="image"><a href="assets/imgs/site-imgs/img-19.jpg" title="" data-lightbox="group" data-title="Portfolio image 19">
		    	<img src="assets/imgs/site-imgs/img-19.jpg" alt="" class="img-fluid"></a>
		</div>
		    	<h5>Title</h5>
			</li>
			<li>
          <div class="image"><a href="assets/imgs/site-imgs/img-20.jpg" title="" data-lightbox="group" data-title="Portfolio image 20">
		    	<img src="assets/imgs/site-imgs/img-20.jpg" alt="" class="img-fluid"></a>
		</div>
		    	<h5>Title</h5>
			</li>
			<li>
          <div class="image"><a href="assets/imgs/site-imgs/img-21.jpg" title="" data-lightbox="group" data-title="Portfolio image 21">
		    	<img src="assets/imgs/site-imgs/img-21.jpg" alt="" class="img-fluid"></a>
		</div>
		    	<h5>Title</h5>
			</li>
			<li>
          <div class="image"><a href="assets/imgs/site-imgs/img-22.jpg" title="" data-lightbox="group" data-title="Portfolio image 22">
		    	<img src="assets/imgs/site-imgs/img-22.jpg" alt="" class="img-fluid"></a>
		</div>
		    	<h5>Title</h5>
			</li>
			<li>
          <div class="image"><a href="assets/imgs/site-imgs/img-23.jpg" title="" data-lightbox="group" data-title="Portfolio image 23">
		    	<img src="assets/imgs/site-imgs/img-23.jpg" alt="" class="img-fluid"></a>
		</div>
		    	<h5>Title</h5>
			</li>
			<li>
          <div class="image"><a href="assets/imgs/site-imgs/img-24.jpg" title="" data-lightbox="group" data-title="Portfolio image 24">
		    	<img src="assets/imgs/site-imgs/img-24.jpg" alt="" class="img-fluid"></a>
		</div>
		    	<h5>Title</h5>
			</li>
		</ul>
			<div class="lingeothumbs-but vert bottom">&#708;</div>
					</div>
				</div>
			</div>
		</div>
	</div>	
		
	
Style Switcher
12 Color Skins
Theme
See the instructions to easily create your own Skin and NavBar.