LinGeo Template

Return to:
G & L WebDesign

Our personal preference is to not have animation on a web page unless the user initiates it. Granted, marketing and ad companies would disagree.
Throughout these pages you will see the bare minimum of animation except where it is unavoidable. Thus the only carousel on this page that advances from image to image without initiation by the user is the Basic Carousel. The Bootstrap default interval is 5000, which = 5 seconds. The Basic Carousel is set at the default. All the others have
data-interval="false". That puts the user in control of it and at what speed the carousel images are viewed.

Basic Carousel

View Basic Carousel Code

<div id="carousel-basic" class="carousel slide" data-ride="carousel" data-interval="10000">
     <div class="carousel-inner">
          <div class="carousel-item active">
            	<img class="d-block img-fluid" src="assets/imgs/site-imgs/img-01.jpg" alt="First slide">
          	</div>
          	<div class="carousel-item">
            		<img class="d-block img-fluid" src="assets/imgs/site-imgs/img-02.jpg" alt="Second slide">
          	</div>
          	<div class="carousel-item">
            	<img class="d-block img-fluid" src="assets/imgs/site-imgs/img-03.jpg" alt="Third slide">
          	</div>
        	</div>
     </div>
</div>	

	

Carousel w/Controls

View Carousel w/Controls Code

<div id="carousel-controls" class="carousel slide" data-ride="carousel" data-interval="false">
     <div class="carousel-inner">
          <div class="carousel-item active">
           	<img class="d-block img-fluid" src="assets/imgs/site-imgs/img-04.jpg" alt="First slide">
          </div>
          <div class="carousel-item">
            	<img class="d-block img-fluid" src="assets/imgs/site-imgs/img-05.jpg" alt="Second slide">
          </div>
          <div class="carousel-item">
            	<img class="d-block img-fluid" src="assets/imgs/site-imgs/img-06.jpg" alt="Third slide">
          </div>
        	</div>
     <a class="carousel-control-prev" href="#carousel-controls" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        		</a>
        		<a class="carousel-control-next" href="#carousel-controls" role="button" data-slide="next">
          	<span class="carousel-control-next-icon" aria-hidden="true"></span>
          	<span class="sr-only">Next</span>
        		</a>
      	</div>
    	</div>

	

Carousel w/Controls & Indicators

View Carousel w/Controls & Indicators Code

<div id="carousel-controls-indicators" class="carousel slide" data-ride="carousel" data-interval="false">
     <ol class="carousel-indicators">
          <li data-target="#carousel-controls-indicators" data-slide-to="0" class="active"></li>
          <li data-target="#carousel-controls-indicators" data-slide-to="1"></li>
          <li data-target="#carousel-controls-indicators" data-slide-to="2"></li>
     </ol>
     <div class="carousel-inner">
          <div class="carousel-item active">
            	<img class="d-block img-fluid" src="assets/imgs/site-imgs/img-07.jpg" alt="First slide">
          </div>
          <div class="carousel-item">
            	<img class="d-block img-fluid" src="assets/imgs/site-imgs/img-08.jpg" alt="Second slide">
          </div>
          <div class="carousel-item">
            	<img class="d-block img-fluid" src="assets/imgs/site-imgs/img-09.jpg" alt="Third slide">
          </div>
     </div>
        	<a class="carousel-control-prev" href="#carousel-controls-indicators" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
       	</a>
        	<a class="carousel-control-next" href="#carousel-controls-indicators" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        	</a>
     </div>
</div>

	

Carousel w/Controls, Indicators & Text

View Carousel w/Controls, Indicators & Text Code

<div id="carousel-text" class="carousel slide" data-ride="carousel" data-interval="false">
     <ol class="carousel-indicators">
          <li data-target="#carousel-text" data-slide-to="0" class="active"></li>
          <li data-target="#carousel-text" data-slide-to="1"></li>
          <li data-target="#carousel-text" data-slide-to="2"></li>
     </ol>
<div class="carousel-inner">
     <div class="carousel-item active">
          <img class="d-block img-fluid" src="assets/imgs/site-imgs/img-10.jpg" alt="First slide">
			<div class="carousel-caption">
                    <h3 class="font-weight-bold"><span style="color:#ffffff">First slide label</span></h3>
                    <h4><strong><span style="color:#ffffff">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span></strong></h4>
			</div>
</div>
     <div class="carousel-item">
          <img class="d-block img-fluid" src="assets/imgs/site-imgs/img-11.jpg" alt="Second slide">
			<div class="carousel-caption">
                    <h3 class="font-weight-bold"><span style="color:#ffffff">Second slide label</span></h3>
                    <h4><strong><span style="color:#ffffff">Praesent commodo cursus magna, vel scelerisque nisl consectetur.</span></strong></h4>
			</div>
     	</div>
     <div class="carousel-item">
          <img class="d-block img-fluid" src="assets/imgs/site-imgs/img-12.jpg" alt="Third slide">
			<div class="carousel-caption">
                    <h3 class="font-weight-bold"><span style="color:#ffffff">Third slide label</span></h3>
                    <h4><strong><span style="color:#ffffff">Deserunt, magnam dolorum minus quidem molestiae dolorem.</span></strong></h4>
			</div>
          </div>
     </div>
        	<a class="carousel-control-prev" href="#carousel-text" role="button" data-slide="prev">
          	<span class="carousel-control-prev-icon" aria-hidden="true"></span>
          	<span class="sr-only">Previous</span>
        	</a>
        	<a class="carousel-control-next" href="#carousel-text" role="button" data-slide="next">
          	<span class="carousel-control-next-icon" aria-hidden="true"></span>
          	<span class="sr-only">Next</span>
        	</a>
     </div>
</div>

	

Full Width Carousel

Fade In Effect
View Full Width Carousel Code

	    <div id="carousel" class="carousel slide carousel-fade" data-ride="carousel" data-interval="false">
        <ol class="carousel-indicators">
            <li data-target="#carousel" data-slide-to="0" class="active"></li>
            <li data-target="#carousel" data-slide-to="1"></li>
            <li data-target="#carousel" data-slide-to="2"></li>
            <li data-target="#carousel" data-slide-to="3"></li>
            <li data-target="#carousel" data-slide-to="4"></li>
        </ol>
     <div class="carousel-inner" role="listbox">
          <div class="carousel-item active">
               <img src="assets/imgs/site-imgs/img-13.jpg" alt="responsive image" class="d-block img-fluid">
                    <div class="carousel-caption">
                        	<div>
                            	<h2><span style="color:#ffffff">Digital Craftsmanship</span></h2>
                            	<h4><span style="color:#ffffff">We meticously build each site to get results</span></h4>
                        </div>
                    </div>
          </div>
     <div class="carousel-item">
          <img src="assets/imgs/site-imgs/img-14.jpg" alt="responsive image" class="d-block img-fluid">
     <div class="carousel-caption justify-content-center align-items-center">
               <div>
                    <h2><span style="color:#ffffff">Every project begins with a sketch</span></h2>
                    <h4><span style="color:#ffffff">We work as an extension of your business to explore solutions</span></h4>
               </div>
          </div>
     </div>
     <div class="carousel-item">
          <img src="assets/imgs/site-imgs/img-15.jpg" alt="responsive image" class="d-block img-fluid">
               <div class="carousel-caption justify-content-center align-items-center">
               <div>
                    <h2><span style="color:#ffffff">Performance Optimization</span></h2>
                    <h4><span style="color:#ffffff">We monitor and optimize your site's long-term performance</span></h4>
               </div>
          </div>
     </div>
     <div class="carousel-item">
          <img src="assets/imgs/site-imgs/img-16.jpg" alt="responsive image" class="d-block img-fluid">
          	<div class="carousel-caption justify-content-center align-items-center">
               <div>
                    <h2><span style="color:#ffffff">We're just a phone call away</span></h2>
                    <h4><span style="color:#ffffff">Always here to help your business grow</span></h4>
               </div>
          </div>
     </div>
	<div class="carousel-item">
          <img src="assets/imgs/site-imgs/img-17.jpg" alt="responsive image" class="d-block img-fluid">
          	<div class="carousel-caption justify-content-center align-items-center">
               <div>
                    <h2><span style="color:#ffffff">Our business depends on your success</span></h2>
                    <h4><span style="color:#ffffff">Please pass the word</span></h4>
               </div>
          	</div>
            </div>
     </div>
        <a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

	

Testimonial Carousel

View testimonial Carousel Code

	<div class="container mt-3">
		<div class="row">
			<div class="col-md-8 col-center m-auto">
				<div id="carousel-testimonial" class="carousel slide" data-ride="carousel" data-interval="false">			
			<div class="testimonial-carousel">   
				<div class="carousel-inner">
					<div class="item carousel-item active">
						<div class="img-box"><img src="assets/imgs/site-imgs/user-01.jpg" alt=""></div>
						<h6 class="testimonial">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Idac bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet.</h6>
						<h6 class="overview"><b>Paula Wilson</b>, Media Analyst</h6>
					</div>
					<div class="item carousel-item">
						<div class="img-box"><img src="assets/imgs/site-imgs/user-02.jpg" alt=""></div>
						<h6 class="testimonial">Vestibulum quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Utmtc tempus dictum risus. Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis gravida odio.</h6>
						<h6 class="overview"><b>Antonio Moreno</b>, Web Developer</h6>
					</div>
					<div class="item carousel-item">
						<div class="img-box"><img src="assets/imgs/site-imgs/user-03.jpg" alt=""></div>
						<h6 class="testimonial">Phasellus vitae suscipit justo. Mauris pharetra feugiat ante id lacinia. Etiam faucibus mauris id tempor egestas. Duis luctus turpis at accumsan tincidunt. Phasellus risus risus, volutpat vel tellus ac, tincidunt fringilla massa. Etiam hendrerit dolor eget rutrum.</h6>
						<h6 class="overview"><b>Michael Holz</b>, Seo Analyst</h6>
					</div>
				</div>
				<a class="testimonial-carousel-control left carousel-control-prev" href="#carousel-testimonial" data-slide="prev">
					<i class="fas fa-chevron-left"></i>
				</a>
				<a class="testimonial-carousel-control right carousel-control-next" href="#carousel-testimonial" data-slide="next">
					<i class="fas fa-chevron-right"></i>
				</a>	
					</div>
				</div>
			</div>
		</div>
	</div>

	

Text / Image Carousel

Image and Text (half & half) on the same Slide. The text and Image portions are changed in the html code for easy access.

View Text / Image Carousel Code

		<div id="itCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
          	<ol class="carousel-indicators">
            		<li data-target="#itCarousel" data-slide-to="0" class="active"></li>
            		<li data-target="#itCarousel" data-slide-to="1" class=""></li>
            		<li data-target="#itCarousel" data-slide-to="2" class=""></li>
            		<li data-target="#itCarousel" data-slide-to="3" class=""></li>
          	</ol>
		<div class="it-carousel">
			<div class="carousel-item active">
				<div class="row no-gutters">
					<div class="col-sm-6 pl-3">
						<h2>Multipurpose responsive theme</h2>
						<h4>Business, Agency, Personal,
						<br>Portfolio, Blog, Magazine Layout &amp; E-commerce.</h4>
					</div>
					<div class="col-sm-6">
						<img class="img-fluid" src="assets/imgs/site-imgs/template-homepage.png" alt="">
				</div>
			</div>
		</div>
               <div class="carousel-item">
				<div class="row">
					<div class="col-sm-6 pl-3">
						<h2>70+ HTML pages full of features</h2>
							<ul class="list-style-none">
								<li>Sliders and carousels</li>
								<li>4 Home Page variations</li>
								<li>Google Maps, Forms, Megamenu, CSS3 Animations and much more</li>
								<li>+ 12 easy to use Plugins you can add to your pages</li>
							</ul>
					</div>
					<div class="col-sm-6">
						<img class="img-fluid" src="assets/imgs/site-imgs/template-mac.png" alt="">
					</div>
				</div>
			</div>
               <div class="carousel-item">
				<div class="row">
					<div class="col-sm-6 pl-3">
						<h2>Design</h2>
							<ol class="list-style-none">
								<li>Clean and elegant design</li>
								<li>Full width and boxed mode</li>
								<li>Easily readable Roboto font and awesome icons</li>
								<li>10 color schemes</li>
							</ol>
					</div>
					<div class="col-sm-6">
						<img class="img-fluid" src="assets/imgs/site-imgs/template-easy-customize.png" alt="">
					</div>
				</div>
			</div>
               <div class="carousel-item">
				<div class="row">
					<div class="col-sm-6 pl-3">
						<h2><strong>Easy to customize</h2></strong>
							<ul class="list-style-none">
								<li>10 color schemes</li>
								<li>Easy to change stylesheets</li>
								<li>Detailed customization instructions</li>
								<li>Easy to change fonts</li>
							</ul>
				</div>
					<div class="col-sm-6">
						<img class="img-fluid" src="assets/imgs/site-imgs/template-easy-code.png" alt="">
					</div>
				</div>
			</div>
          </div>
               <a class="carousel-control-prev" href="#itCarousel" data-slide="prev">
                    <i class="fas fa-chevron-left fa-lg" aria-hidden="false"></i>
               </a>
               <a class="carousel-control-next" href="#itCarousel" data-slide="next">
                    <i class="fas fa-chevron-right fa-lg" aria-hidden="false"></i>
          	</a>
			</div>
          </div>
	</div>

	

Full-Width Text/Image Carousel

View Full-WidthText/Image Carousel Code

     <div id="text-imageCarousel" class="carousel slide" data-ride="carousel" data-interval="false" style="max-height:100vh">
          <ol class="carousel-indicators">
            	<li data-target="#text-imageCarousel" data-slide-to="0" class=""></li>
            	<li data-target="#text-imageCarousel" data-slide-to="1" class=""></li>
            	<li data-target="#text-imageCarousel" data-slide-to="2" class="active"></li>
          </ol>
     <div class="carousel-inner" style="max-height:100vh">
          <div class="carousel-item active h-100">
          	<div class="container d-flex align-items-center" style="max-height:100vh">
                	<div class="row align-items-center">
                  		<div class="col-12 col-md-4 offset-md-1 mb-4 mb-md-0">
                    		<img alt="image" class="img-fluid" src="assets/imgs/placeholder-imgs/475x500.png">
                  		</div>
                  		<div class="col-12 col-md-6 offset-md-1 ml-md-auto text-left">
                         	<h2><span style="color:#ffffff">Adipisic Elit</span></h2>
                    		<h4><span style="color:#ffffff">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</span></h4>
                  		</div>
               	</div>
          	</div>
     	</div>
     <div class="carousel-item" style="max-height:100vh">
          <div class="container d-flex align-items-center" style="max-height:100vh">
               <div class="row align-items-center">
                  		<div class="col-12 col-md-4 offset-md-1 mb-4 mb-md-0">
                    		<img alt="image" class="img-fluid" src="assets/imgs/placeholder-imgs/475x500.png">
                  		</div>
               		<div class="col-12 col-md-6 offset-md-1 ml-md-auto text-left">
                    		<h2><span style="color:#ffffff">Lorem Ipsum</span></h2>
                    		<h4><span style="color:#ffffff">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</span></h4>
               		</div>
               	</div>
          	</div>
     	</div>
     <div class="carousel-item" style="max-height:100vh">
          <div class="container d-flex align-items-center" style="max-height:100vh">
               <div class="row align-items-center">
                  	<div class="col-12 col-md-4 offset-md-1 mb-4 mb-md-0">
                    	<img alt="image" class="img-fluid" src="assets/imgs/placeholder-imgs/475x500.png">
                  	</div>
                  	<div class="col-12 col-md-6 offset-md-1 ml-md-auto text-left">
                    	<h2><span style="color:#ffffff">Ipsum Lorem</span></h2>
                    	<h4><span style="color:#ffffff">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</span></h4>
                  	</div>
               </div>
          </div>
     </div>
          	<a class="carousel-control-prev" href="#text-imageCarousel" role="button" data-slide="prev">
            		<span class="carousel-control-prev-icon" aria-hidden="true"></span>
            		<span class="sr-only">Previous</span>
          	</a>
          	<a class="carousel-control-next" href="#text-imageCarousel" role="button" data-slide="next">
            		<span class="carousel-control-next-icon" aria-hidden="true"></span>
            		<span class="sr-only">Next</span>
     		</a>
     	</div>
	</div>	

	

Carousel with Thumbnails

View Carousel w/ Thumbnails Code

            <div id="thumbsCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
     <!-- main slider carousel items -->
                <div class="carousel-inner">
                    <div class="active carousel-item" data-slide-number="0">
                        <img src="assets/imgs/site-imgs/img-18.jpg" class="img-fluid">
                    </div>
                    <div class="carousel-item" data-slide-number="1">
                        <img src="assets/imgs/site-imgs/img-19.jpg" class="img-fluid">
                    </div>
                    <div class="carousel-item" data-slide-number="2">
                        <img src="assets/imgs/site-imgs/img-20.jpg" class="img-fluid">
                    </div>
                    <div class="carousel-item" data-slide-number="3">
                        <img src="assets/imgs/site-imgs/img-21.jpg" class="img-fluid">
                    </div>
                    <div class="carousel-item" data-slide-number="4">
                        <img src="assets/imgs/site-imgs/img-22.jpg" class="img-fluid">
                    </div>
                    <div class="carousel-item" data-slide-number="5">
                        <img src="assets/imgs/site-imgs/img-23.jpg" class="img-fluid">
                    </div>
                    <div class="carousel-item" data-slide-number="6">
                        <img src="assets/imgs/site-imgs/img-24.jpg" class="img-fluid">
                    </div>
                    <div class="carousel-item" data-slide-number="7">
                        <img src="assets/imgs/site-imgs/img-01.jpg" class="img-fluid">
                    </div>
				<div class="carousel-item" data-slide-number="7">
                        <img src="assets/imgs/site-imgs/img-02.jpg" class="img-fluid">
                    </div>
                    <a class="carousel-control-prev" href="#thumbsCarousel" role="button" data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="carousel-control-next" href="#thumbsCarousel" role="button" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
     <!-- main slider carousel nav controls -->
                <ul class="carousel-indicators list-inline mx-auto border px-2">
                    <li class="list-inline-item active">
                        <a id="carousel-selector-0" class="selected" data-slide-to="0" data-target="#thumbsCarousel">
                            <img src="assets/imgs/site-imgs/img-sml-18.jpg" class="img-fluid">
                        </a>
                    </li>
                    <li class="list-inline-item">
                        <a id="carousel-selector-1" data-slide-to="1" data-target="#thumbsCarousel">
                            <img src="assets/imgs/site-imgs/img-sml-19.jpg" class="img-fluid">
                        </a>
                    </li>
                    <li class="list-inline-item">
                        <a id="carousel-selector-2" data-slide-to="2" data-target="#thumbsCarousel">
                            <img src="assets/imgs/site-imgs/img-sml-20.jpg" class="img-fluid">
                        </a>
                    </li>
                    <li class="list-inline-item">
                        <a id="carousel-selector-3" data-slide-to="3" data-target="#thumbsCarousel">
                            <img src="assets/imgs/site-imgs/img-sml-21.jpg" class="img-fluid">
                        </a>
                    </li>
                    <li class="list-inline-item">
                        <a id="carousel-selector-4" data-slide-to="4" data-target="#thumbsCarousel">
                            <img src="assets/imgs/site-imgs/img-sml-22.jpg" class="img-fluid">
                        </a>
                    </li>
                    <li class="list-inline-item">
                        <a id="carousel-selector-5" data-slide-to="5" data-target="#thumbsCarousel">
                            <img src="assets/imgs/site-imgs/img-sml-23.jpg" class="img-fluid">
                        </a>
                    </li>
                    <li class="list-inline-item">
                        <a id="carousel-selector-6" data-slide-to="6" data-target="#thumbsCarousel">
                            <img src="assets/imgs/site-imgs/img-sml-24.jpg" class="img-fluid">
                        </a>
                    </li>
                    <li class="list-inline-item">
                        <a id="carousel-selector-7" data-slide-to="7" data-target="#thumbsCarousel">
                            <img src="assets/imgs/site-imgs/img-sml-01.jpg" class="img-fluid">
                        </a>
                    </li>
                    <li class="list-inline-item">
                        <a id="carousel-selector-7" data-slide-to="8" data-target="#thumbsCarousel">
                            <img src="assets/imgs/site-imgs/img-sml-02.jpg" class="img-fluid">
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>		

	

Modal Carousel

Go To
Modals Page

Card Overlay Carousel with Lightbox

Go To
Cards Page
Style Switcher
12 Color Skins
Theme
See the instructions to easily create your own Skin and NavBar.