Tabbed Slider

Developer
Tywlacock
Size
2,920 Kb
Views
6,072
  1. Tabbed Slider Previews
  2. Tabbed Slider HTML Codes
  3. Tabbed Slider CSS Codes
  4. Tabbed Slider JS Codes

How do I make an tabbed slider?

What is a tabbed slider? How do you make a tabbed slider? This script and codes were developed by Tywlacock on 19 December 2022, Monday.

Tabbed Slider Previews
IQ Test

Tabbed Slider - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Tabbed Slider</title> <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <ul class="tabs"> <li class="active">Tab 1</li> <li>Tab 2</li> <li>Tab 3</li> <li>Tab 4</li>
</ul>
<ul class="tab"> <li class="active"> <div class="box"> <h1>New Deals</h1><br> <h1>on</h1><br> <h1>Proto Tools</h1><br> </div> </li> <li> <img src="http://placehold.it/570x270" alt="" /> </li> <li> <img src="http://placehold.it/570x270" alt="" /> </li> <li> <img src="http://placehold.it/570x270" alt="" /> </li>
</ul> </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Tabbed Slider - Script Codes CSS Codes

* { box-sizing: border-box;
}
.container { width: 574px; margin: 0 auto;
}
body { background: white !important;
}
h1, h3 { margin: 0; padding: 0;
}
ul { list-style-type: none;
}
ul.tabs { margin: 0; padding: 0;
}
ul.tabs li { transition: 0.2s ease-in-out; display: inline-block; margin: 0; background: rgba(0, 0, 0, 0.5); text-align: center; color: #fff; cursor: pointer; width: 24.3%; height: 25px; line-height: 25px;
}
ul.tabs li:hover { border-bottom: 3px solid #BD3039;
}
ul.tabs li.active { border-bottom: 3px solid #BD3039;
}
ul.tab { margin: 0; padding: 0;
}
ul.tab li { display: none; height: 270px; width: 570px;
}
ul.tab li.active { display: block;
}
h2 { border-bottom: 3px solid #34495e;
}
body { background-color: #2c3e50;
}
.box { height: 100%; background: url(http://placeimg.com/570/270/arch) no-repeat center center fixed; background-size: cover; margin: 0; padding: 10px;
}
.box h1 { background: rgba(0, 0, 0, 0.3); display: inline-block; margin: 5px 0; padding: 3px;
}

Tabbed Slider - Script Codes JS Codes

$(document).ready(function(){ $("ul.tabs li").click(function(e){ if (!$(this).hasClass("active")) { var tabNum = $(this).index(); var nthChild = tabNum+1; $("ul.tabs li.active").removeClass("active"); $(this).addClass("active"); $("ul.tab li.active").removeClass("active"); $("ul.tab li:nth-child("+nthChild+")").addClass("active"); } });
});
Tabbed Slider - Script Codes
Tabbed Slider - Script Codes
Home Page Home
Developer Tywlacock
Username tywlacock
Uploaded December 19, 2022
Rating 3
Size 2,920 Kb
Views 6,072
Do you need developer help for Tabbed Slider?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tywlacock (tywlacock) Script Codes
Name
Triangle mixin
Definition List styling
Heartstone todo
Sticky header
Basic Reset
TODO - recreate
Material design with materialize
CSS-Tricks Subscribe Box
Simple tabs
Playing with Foundation 5
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!