Search This Blog

Saturday, February 11, 2017

Creating Gallery Slider For Your Website Using Bootstrap 3 Carousel


Bootstrap Carousel is the component that will enable to create a gallery with a slider viewer for your website. Before I begin to explain to you how to create gallery slider using Bootstrap 3 Carousel, you need to know that if your website built with the Bootstrap 3 framework (that is, if you are running a blogspot, wordpress, wix website or any other type of website that is not built using Bootstrap, then you need to add this piece of code <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
to the <head> tag of the webpage you want the gallery slider to appear in.




Now let get on with creating gallery slider using Bootstrap 3 Carousel

After you have selected the spot you want to gallery slider to appear, copy and paste this code to the website/page HTML source code page,

<!-- Carousel container -->
<div id="gallery-slider" class="carousel slide" data-ride="carousel" style="width:300px;margin:auto;">

<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#gallery-slider" data-slide-to="0" class="active"></li>
<li data-target="#gallery-slider" data-slide-to="1"></li>
<li data-target="#gallery-slider" data-slide-to="2"></li>
</ol>

<!-- Content -->
<div class="carousel-inner" role="listbox">

<!-- Slide 1 -->
<div class="item active">
  <img src="https://2.bp.blogspot.com/--bWABz7JYE0/WLaDc_fcnLI/AAAAAAAAD8s/JMHXjujg5jEswx1GeURoOFCDuOaAmCvdACPcB/s1600/Join%2BOur%2BG%252B%2BCommunity.png" alt="Sunset over beach">
</div>

<!-- Slide 2 -->
<div class="item">
<img src="https://3.bp.blogspot.com/-IIU5o7JaPmI/WLaB7n9GhqI/AAAAAAAAD8g/PzbWM8bZMz0xK9ebbrQGS1ZCMp7wq317QCPcB/s1600/Follow%2BUs%2BOn%2BTwitter.png" alt="Rob Roy Glacier">
</div>

<!-- Slide 3 -->
<div class="item">
<img src="https://4.bp.blogspot.com/-YQUp1pQ4uKg/WLaBsCEVIeI/AAAAAAAAD8g/PMWChfe103Ibl8V3pcPsShqhDouNNlvtQCPcB/s1600/Like%2BOur%2BFacebook%2BFan%2BPage.pngg" alt="Longtail boats at Phi Phi">
</div>

</div>

<!-- Previous/Next controls -->
<a class="left carousel-control" href="#gallery-slider" role="button" data-slide="prev">
<span class="icon-prev" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#gallery-slider" role="button" data-slide="next">
<span class="icon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>

</div>


Explanation To The Code:
The <!-- Carousel Container--> section specify that the code that is about to follow is a Bootstrap 3 carousel code, thus leave it the way it is, the only thing you can change is the ID value and the Style properties. The Class and Data-ride element should be left the way they are.

The <!--Indicators--> section is responsible for the visitability of those tiny dots that are at the bottom of the gallery which can be used to jump slides; HTML order list code is what is used to create them, thus the number of the list should correspond to the number of slides in the gallery.
The data-target is used to specify which Carousel Container it should get the slide from while the data-slide-to property specify which slide clicking on the dot should jump to.
Note the first dot should have class="active" else the tiny dots will not be displayed.

The <!--Content--> section is where you place the content of each slide in. The slide can contain both Images and Text based on your preference.
Your slide content should be enclosed in the <div class="carousel-inner" role="listbox"> </div> element, and each slide should be in their separate div tag.
All slide <div> tag should have class="item" but the first slide class property should be item active that is <div class="item active">


The last section to talk about is the <!--Previous/Next Controls-->.
There is no much to talk about in this section other than to say that the value href property in the opening <a> should be the ID of the <div> tag in the Carousel Container section, and that if you do not want an arrow head to show, then you can delete the two <span> tag.


Also Read:
Team +Pinfoltd 



SHARE THIS

1 comment:

  1. US Open: You need to know the US Open Golf Championship will be the 117th US Open Golf 2017, US Open Schedule to be played June 15–18 at Erin Hills in Erin, Wisconsin, northwest of Milwaukee. For so many years, US Open Live everyone knew what to expect US Open Golf Live and US Open Live Stream. For the second time in three years, the 2017 US Open Golf is headed to a course that has never hosted a major. It will be the first US Golf Open in 25 years that doesn't have the names Tiger Woods or Phil Mickelson among the starting times US Golf Open 2017. Woods is missing all the majors for the second straight year because of a fourth back surgery, which was a month before his DUI arrest in Florida 2017 US Open Golf Live. Mickelson US Open Golf Live Stream, with a record six runner-up finishes in the only major he hasn't won, said he plans to skip because his daughter's high school graduation is the same day as the opening round. US Open TV Coverage and US Open 2017 Results


    US Open Golf 2017
    US Open Golf 2017 Live
    US Open Golf 2017 Live Stream


    US Open Championship
    US Open Championship Live
    US Open Championship 2017

    ReplyDelete

Search This Blog