Carousel for explaining details of the product using tabbed, so that you can segregate the data and it looks catchy and sorted.
In this carousel text and images are changed on click of the tabbed for that I have used Javascript and bootstrap
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" >
</head>
<body>
<div class="container-solid">
<div id="main" class="main" style="background-position: center; background-repeat: no-repeat; background-size: cover;">
<div class="col-sm-6" style="padding-left: 20px;">
<div class="text-area" style="background-color: #000; opacity: 0.7; ">
<style type="text/css">
.main li{
list-style: none;
color: #F1591C;
display: inline;
padding-left:4rem;
font-size: 12px !important;
margin-left: 1rem;
}
.main li:hover{
font-weight: bold;
text-transform: uppercase;
font-size: 12px !important;
}
.main .city{
padding: 7rem 5rem;
}
</style>
<ul class="w3-bar w3-black" style="padding-top: 30px;">
<li class="tablinks" onclick="openCity('Technology');myFunction()">Technology</li>
<li class="tablinks" onclick="openCity('AboutUs');aboutUs()">About us</li>
<li class="tablinks" onclick="openCity('Product');product()">Product</li>
<li class="tablinks" onclick="openCity('Charger');charger()">charger</li>
</ul>
<div id="Technology" class="w3-container city">
<div class="text-center">
<h2 style="text-transform: uppercase; font-weight:300 ;padding: 1rem; color: #fff ">Technology</h2>
</div>
<div class="text-justify">
<p style="font-size: 13px;font-weight: 500;color: #fff">We've taken years of experience designing electric bikes combines with insightful feedback from our customers to create the centros. Packed with in the built features and providing various options to taller the bike to your needs, the Centros focuses on what you've told us is improtant to you.</p>
</div>
</div>
<div id="AboutUs" class="w3-container city" style="display:none">
<div class="text-center">
<h2 style="text-transform: uppercase; font-weight:300 ;padding: 1rem; color: #fff ">About us</h2>
</div>
<div class="text-justify">
<p style="font-size: 13px;font-weight: 500;color: #fff">We've taken years of experience designing electric bikes combines with insightful feedback from our customers to create the centros. Packed with in the built features and providing various options to taller the bike to your needs, the Centros focuses on what you've told us is improtant to you.</p>
</div>
</div>
<div id="Product" class="w3-container city" style="display:none">
<div class="text-center">
<h2 style="text-transform: uppercase; font-weight:300 ;padding: 1rem; color: #fff ">Product</h2>
</div>
<div class="text-justify">
<p style="font-size: 13px;font-weight: 500;color: #fff">We've taken years of experience designing electric bikes combines with insightful feedback from our customers to create the centros. Packed with in the built features and providing various options to taller the bike to your needs, the Centros focuses on what you've told us is improtant to you.</p>
</div>
</div>
<div id="Charger" class="w3-container city" style="display:none">
<div class="text-center">
<h2 style="text-transform: uppercase; font-weight:300 ;padding: 1rem; color: #fff ">Charger</h2>
</div>
<div class="text-justify">
<p style="font-size: 13px;font-weight: 500;color: #fff">We've taken years of experience designing electric bikes combines with insightful feedback from our customers to create the centros. Packed with in the built features and providing various options to taller the bike to your needs, the Centros focuses on what you've told us is improtant to you.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
/*half slider of index page*/
function openCity(cityName) {
var i;
var x = document.getElementsByClassName("city");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(cityName).style.display = "block";
}
function myFunction() {
document.getElementById("main").style.backgroundImage = "url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQSDoq3gdjaEEWNd81zJ-_JcQTTKWK7ETteYMExSNRziJwyc7w0ZA')";
document.getElementById("defaultOpen").click();
}
function aboutUs() {
document.getElementById("main").style.backgroundImage = "url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTrvLNaL06xkuYj_ExN3MYRWJ8D0IQCgL8ZMnSHdyjNNekhv77I')";
}
function product() {
document.getElementById("main").style.backgroundImage = "url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRWx6iwZSSNguHXpqaQnww3UzoA0tiXN2C2J_9SPsnjTNT4K4vn')";
}
function charger() {
document.getElementById("main").style.backgroundImage = "url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTSZCXFz6pzUherzMLhe-N1sAWziaEsgle8fjRpoYS5yNgNoeQV')";
}
myFunction();
/*end of half slider*/
</script>
</body>
</html>
Output of the above code:
No comments:
Post a Comment