Create a Manual Text Slider by Using Kickass-Text-Slider-Master

A. What Will I Learn?

What is a slider and what is the benefit.
What is the use of the Kickass-text-slider-master function
Understand about the code needed to use the Kickass-text-slider-master function

B. Requirements

Applications for web editing programming like Notpad, notpad ++, etc.
You already Kickass-text-slider-master function.
Get function click her

C. Difficulty

Basic

D. Tutorial Contents

1.What is a slider

Slider is the information that runs on the website, the information presented on the slider is an important information of the web page and made as attractive as possible, the information presented on the slider is usually a brief and clear information.
Basically the slider consists of three categories :

automatic slider is a selider that menamipilkan information goes by manual way by clicking the "next or prev".
auto selider is a selider that menamipilkan information runs in an automated way.
Automatic and manual slider is a selider that displays information either automatically or manually.

In the information age which is very fast and simple at this time, the customer wants to give ease in all things, including in visiting a website, therefore selder very berkauh on kerberhasilan a web.

Here are some excess sliders in displaying information:

A well-designed slider will increase the trust level of a customer.
Slider makes your website look more professional.
Interesting slider will make visitors interested in a web.
Information can be presented and clear.
Makes visitors understand the content of a web quickly.
Sample information: Welcome, Discount or ongoing promotion, product / service image, etc.

2. kickass-text-slider-master

Kickass-text-slider-master is a slider function created by combining css and java script elements, which will then be combined with HTML. As the name implies the kickass-text-slider-master function can be used to create a slider especially with text, basically kickass-text-slider-master is a manual slider text. kickass-text-slider-master is perfect for us in learning the process of making text slider, this is because kickass-text-slider-master is a simple slider function and easy to understand understood.

To create a text slider using kickass-text-slider-master we have to create an index.html file, this index.html file is used for where to combine css and java script functions from, other than that html file also works for media or where we write which will appear on the browser screen. Examples of index.html files needed for declaration of kickass-text-slider-master are as follows.

index.html


<!DOCTYPE html>
<html lang="en">
<style>
</style>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Tutorial</title>
    <link href="kickass-text-slider-master/css/bootstrap.min.css" rel="stylesheet">
    <link href="kickass-text-slider-master/css/jquery.kickasstextslider.css" rel="stylesheet">
  </head>
  <body>
    <div class="container" style="background-color:#33FF00">
      <h1>Hello All.... This is Kickass-text-slider-master!</h1>
    </div>
    <div class="container" style="background-color:#33FF00">
      <div class="row" >
        <div class="col-md-12" >
          <div class="kickassTextSlider">
            <ul class="nav nav-tabs" role="tablist" >
              <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab"><b>Home</b></a></li>
              <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab"><b>Profile</b></a></li>
              <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab"><b>Messages</b></a></li>
              <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab"><b>Settings</b></a></li>
            </ul>
            <div class="kickass-slider-nav">
              <button class="dir-prev" data-dir="prev">Prev</button>
              <button class="dir-next" data-dir="next">Next</button>
            </div>
          </div>
           <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="home">
              <p>This page indicates we are on the <b> home page </b></p>
            </div>
            <div role="tabpanel" class="tab-pane" id="profile">
              <p>This page indicates we are on the <b>profile page</b></p>
            </div>
            <div role="tabpanel" class="tab-pane" id="messages">
              <p>This page indicates we are on the <b>massage page</b></p>
            </div>
            <div role="tabpanel" class="tab-pane" id="settings">
              <p>This page indicates we are on the <b>setting page</b></p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="kickass-text-slider-master/js/jquery.js"></script>
    <script src="kickass-text-slider-master/js/jquery.kickasstextslider.js"></script> 
 <script>
    $('.kickassTextSlider').kickassTextSlider({
         speed: 300
    });
</script>
  </body>
</html>

3. Explanation of the code

 
<link href="kickass-text-slider-master/css/bootstrap.min.css" rel="stylesheet">
<link href="kickass-text-slider-master/css/jquery.kickasstextslider.css" rel="stylesheet">

This function is useful for calling css provided by kickass-text-slider-master function to redirect link to where bootstrap.min.css and jquery.kickasstextslider.css is stored, this function which is called on through this link function to manage the appearance of both the existing menu displays and also the appearance of short messages on the menu.

  < div class = "kickassTextSlider" >

The fusion of class = kickassTextSlider has the function to declare the main title or main menu of the slider we created in this class there is another class fiugsi that is < ul class = "nav nav-tabs" role = " tablist "> function as the main menu and also the class function < ul class = "nav nav-tabs" role = "tablist" > that serves to create the next and prev keys used to change the appearance of messages on the web.

  < div class = "tab-content" >

This function aims to declare the content of the content that will be displayed on the web.


<script src="kickass-text-slider-master/js/jquery.js"></script>
    <script src="kickass-text-slider-master/js/jquery.kickasstextslider.js"></script> 
   <script>
    $('.kickassTextSlider').kickassTextSlider({
         speed: 300
    });
</script>

This function aims to call and declare the existing javascript function in the Kickass-text-slider-master function, the src function in the function must be redirected to the location of jquery.js and jquery.kickasstextslider.js stored. This javascript function is needed by the Kickass-text-slider-master function because this javascript controls the movement from one page slider to another slider page on our web.

4. Running
After the index.html page in one file with the Kickass-text-slider-master function can be accessed by using web browser, by directing the index.html file indexing address. The user will not see the script code run by the web browser, the user will see the menu name and and the contents of the Kickass-text-slider-master according to the code we wrote in index.html. Users can also press the next button to go to the previous page or also tomblo prev to return the previous page.
By using Kickass-text-slider-master we can display a short message that makes web users more attractive to a web. display function can be seen in this picture.

E. Curriculum

To know more about superfish-master you can visit:
Kickass-text-slider-master function github

Posted on Utopian.io - Rewarding Open Source Contributors