Bootstrap Tabs Sliding Animation


Slide Transitions Between Bootstrap Tabs Using Jquery. In this article, we are creating a very amazing and user-friendly Tabs slider. There is thousands of code to create this transition but we will show you which is the best way to understand it. In this lesson, we create this transition with less code and best performance. So to understand the transition we explain you everything. We will create three tabs with the transition you can create multiple tabs as well. In this tutorial, we will show you the simplest way to achieve this slide transition with less code.

Slide Transitions Between Bootstrap Tabs Using Jquery

Well, we will create this design where we insert emoji except inserting a content. You can replace this emoji with the form or text content. We are using the emoji just for fun. In the above image, you can see we created three tabs with the sliding transition. So when you click on the first tab slide will navigate to the first tab, when you click on the second tab slider navigate to the second tab, when you click on the third tab slide will navigate to the third tab just simple as that.

So let’s jump into the code and understand how to make Slide transitions between bootstrap tabs using jquery.

Create Project file

First, we need to create a project file. In the visual code editor, we will open a black folder. So click on the open folder option and open project black folder. If you are not familiar with visual code editor then you can use other ones also like sublime text and Atom.

In this tutorial, we will create three files. first index.html, second style.css, and third main.js. In index.html file we design the layout of the project, Second In style.css file we will style our HTML element and in the main.js file, we insert Jquery code to create slide transition.

 

Index.html

Create an index.html file in your project. So import this code in Index.html file to create the layout of the web page. You are free to choose any name for this file. look at the code we will explain everything in detail.

  • Create a simple HTML5 snippet and specify the title for your project in a title tag.
  • After that, we will link the bootstrap framework. So first we will link style.css file in the head section.
  • Then we link Js file using script tab. So we will insert script tag before the closing body tag. Keep in mind that we removed the jquery.slim.js file and replace this file with the jquery.min.js file. If you want to use the animate function then you need to link this file.
  • In the head tag, you can also see the emoji link file. Using this file we import emoji in the project. After linking the emoji link you can insert different type of emoji.
  • In the last, we will link style.css file. Keep in mind this is the custom file for styling the webpage.

Now design the layout.

  • The above file is the complete file of Index.html you can import this code in your index.html file.
  • In this file, we create a page title using the heading tag and specify some bootstrap classes to it.
  • So in the container, we insert h3 and paragraph tag. we provide text center border and width for the container division.
  • after this, we create the d-flex class with justifying content center to center all the text and content.
  • In this d-flex class create a tab using ul and li tag.
  • After that, we will create a content section of the tabs. So in the division, we will insert tab-content class and put the content for each tab.
  • we will access the tab content using the id. So you can see we specify the id in the tabs href attribute. Keep in mind that when you provide the id for the tab content you need to specify exactly the same value for the id and href attribute.
  • We will do the same for the all tabs and create three tabs.
  • After completing the tabs we insert emoji in the tabs. So using i tab we insert emoji. You can replace this with form or any content also.

 

Style.css

Using this file we will style our HTML element. So just import the code in the style.css file.

 

Main.js

In this file, we create jquery sliding animation. we inject events to execute the animation. So we are using click event in this lesson. So let’s look at the code first.

  • Now you just need to import this code in the main.js file but first understand the code.
  • first, we will get the width of the panel and store it in the panel variable.
  • Then from the panel variable, we will remove the px string and replace this string with a null string.
  • After that, we will create I variable and specify 0 value to it. Then we will increase the value using each function. So using each function we will count li tags.
  • Then we will get the first tab width of using width divide by i. This mathematical equation will give us the width of the first tab.
  • After that, we will create a click event on the first li tab. In this click event, we add left property to 0px.
  • Then we will create click event on the second li tab and insert style to the panel. So we will specify a left property to val1 variable plus 10 plus ‘px’ unit. So here we just add the value of the first li tab and specify this value to the left property of the panel.
  • Create thirst tab click event and specify a left property to panel class. In the left property, we specify val1 plus val1. So here we just add the value of val1. You already know that val1 variable content the width of the first tab so when you specify this variable to left property the panel will move right side.
  • So if you created four tabs then specify left property widht three val1 variables. Then you will get the perfect result. Keep in mind that every time when you create variable to check the value at the end of the compilation. So you will learn which value has been stored in that variable.

We hope Slide Transitions Between Bootstrap Tabs Using Jquery is the very simple tutorial. Now just run the index.html file.

Open the index.html file and see the result.

Slide Transitions Between Bootstrap Tabs Using Jquery is created. If you have any question then comment us in the comment section. Imagin and create your own projects. Practice always makes you perfect.

That is all for this tutorial.

We will see you in the next tutorial.

Leave a Reply

Your email address will not be published. Required fields are marked *