How to Do a Flash Banner Slider in HTML

A slider helps you present data in several containers without requiring the reader to switch to different pages in the browser. You can create a Flash banner slider in HTML using CSS and div containers. Each container holds the data you want to display and the CSS creates the layout for your tabs. You use this technique when you have several sections on your page that you want to display.

Instructions

1. Right-click the HTML page you want to use to show the slider. Click "Open With" and select your preferred HTML editor.

2. Create the div tags for the slider. The div tags represent the tabs that show in the user's browser. The following code creates two slider div tags:

   <div id="slider">
   <h2>Slider 1</h2>
   <h2> Slider 2 </h2>
   </div>

3. Set up the CSS to style the slider. You can use any CSS code to create the tab's color, outline and any shadow effects. The following code sets a class for the slider that colors the background of the tabs as read and creates a rounded outline for the corners:

   .active a{
   padding: 28px 0 20px 0;
   background: -webkit-gradient(linear, left top, left bottom, from(#db0000), to(#9b0000));
   background: -moz-linear-gradient(top center, #db0000, #9b0000);
   }

   #slider {
   width: 555px;
   background: rgba(250,250,250,0.3);
   padding: 30px 25px 30px 25px;
   line-height: 25px;
   margin-left: 35px;
   }

4. Save the changes and open the HTML file in your Web browser to test the code changes and review the slider.

References

• Spyre Studios: How To Create a Stylish Content Slider using CSS3 & jQuery