Friendly Flexbox Carousel

Developer
Kelsey Paone
Size
5,101 Kb
Views
22,264
  1. Friendly Flexbox Carousel Previews
  2. Friendly Flexbox Carousel HTML Codes
  3. Friendly Flexbox Carousel CSS Codes
  4. Friendly Flexbox Carousel JS Codes

How do I make an friendly flexbox carousel?

Switch through images and content with this responsive flexbox carousel. Uses minimal jquery. What is a friendly flexbox carousel? How do you make a friendly flexbox carousel? This script and codes were developed by Kelsey Paone on 28 November 2022, Monday.

Friendly Flexbox Carousel Previews
IQ Test

Friendly Flexbox Carousel - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Friendly Flexbox Carousel</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="spotlight"> <div class="flex-row"> <div class="col-sm-2"> <ul class="team-tabs"> <li data-value="friend-1" class="first active"> <img src="https://s28.postimg.org/v5qt7m3x5/chandler_small.png"> </li> <li data-value="friend-2"> <img src="https://s28.postimg.org/azrwmgxnd/monica_small.png"> </li> <li data-value="friend-3" class="last"> <img src="https://s28.postimg.org/6b7bdjj2x/rachel_small.png"> </li> </ul> </div> <div class="col-sm-10 dept-questions"> <div class="dept-wrap"> <div class="friend-1 member-spotlight"> <div class="headshot chandler"></div> <div class="member-content"> <h4>Chandler Bing</h4> <p><i>Statistical analysis and data reconfiguration / Junior advertising copywriter</i></p> <p class="question">What is the name of his father's Las Vegas all-male burlesque show?</p> <p>Viva Las Gaygas</p> <p class="question">What phenomenon scares the bejeezus out of him?</p> <p>Michael Flatley, Lord of the Dance</p> <p class="question">What name appears on the address label of his TV Guide?</p> <p>Miss Chinandolor Bong</p> <p class="question">What is Chandler Bing’s job?</p> <p>Statistical analysis and data reconfiguration</p> </div> </div> <div class="friend-2 member-spotlight" style="display:none;"> <div class="headshot monica"></div> <div class="member-content"> <h4>Monica Geller</h4> <p><i>Professional Chef</i></p> <p class="question">Biggest Pet Peeve?</p> <p>Animals dressed as humans</p> <p class="question">Monica’s nickname when she was a field hockey goalie?</p> <p>Big fat goalie</p> <p class="question">In what part of her body did Monica get a pencil stuck at age 14?</p> <p>Ear</p> <p class="question">Monica categorizes her towels. How many categories are there?</p> <p>11</p> </div> </div> <div class="friend-3 member-spotlight" style="display:none;"> <div class="headshot rachel"></div> <div class="member-content"> <h4>Rachel Green</h4> <p><i>Waitress / Assistant buyer and personal shopper / Executive</i></p> <p class="question">Rachel claims this is her favorite movie?</p> <p>Dangerous Liaisons</p> <p class="question">Her actual favorite movie is?</p> <p>Weekend at Bernie’s</p> <p class="question">What is Rachel's middle name?</p> <p>Karen</p> </div> </div> </div> </div> </div> <br><br> <p>**Wondering where these totally true facts came from? Watch Season 4 Episode 12: <em>The One With the Embryos</em></p>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Friendly Flexbox Carousel - Script Codes CSS Codes

body { color: #505E67; font-family: 'Source Sans Pro', Arial, Sans-Serif; -webkit-font-smoothing: antialiased;
}
.spotlight { display: block; margin: 60px auto; max-width: 1140px;
}
.spotlight h4 { font-size: 20px; font-weight: 600; margin: 0 0 20px; padding: 0; display: block;
}
.spotlight p { font-size: 16px; font-weight: 400; line-height: 1.5; margin: 0 0 20px; padding: 0;
}
.spotlight .flex-row { box-sizing: border-box; display: -webkit-flex; display: -ms-flexbox; display: -webkit-box; display: flex; -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; -webkit-box-flex: 0; flex: 0 1 auto; -webkit-flex-direction: row; -ms-flex-direction: row; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0;
}
.spotlight .flex-row .col-sm-2 { padding-left: 0;
}
.spotlight .flex-row .col-sm-2 .team-tabs { list-style-type: none; margin: 0; padding: 0;
}
.spotlight .flex-row .col-sm-2 .team-tabs img { box-shadow: 1px 1px 2px #e1e7ea; opacity: 0.5;
}
.spotlight .flex-row .col-sm-2 .team-tabs img:hover { opacity: 1;
}
.spotlight .flex-row .col-sm-2 .team-tabs li { height: 163px; overflow: hidden; margin-bottom: 10px;
}
.spotlight .flex-row .col-sm-2 .team-tabs li:last-child { padding-bottom: 0;
}
.spotlight .flex-row .col-sm-2 .team-tabs li.active img { opacity: 1;
}
.spotlight .flex-row .dept-wrap { border: 1px solid #e1e7ea; box-shadow: 1px 1px 2px #e1e7ea;
}
.spotlight .flex-row .dept-wrap .member-spotlight { margin-bottom: -4px;
}
.spotlight .flex-row .dept-wrap .member-spotlight .headshot { background-color: #DBDCDE; background-position: top center; background-size: cover; height: 507px; display: inline-block; width: 50%;
}
.spotlight .flex-row .dept-wrap .member-spotlight .headshot.chandler { background-image: url("https://s23.postimg.org/pna6lf5qj/chandler_large.png");
}
.spotlight .flex-row .dept-wrap .member-spotlight .headshot.monica { background-image: url("https://s30.postimg.org/ddfqkjrkh/monica_large.png");
}
.spotlight .flex-row .dept-wrap .member-spotlight .headshot.rachel { background-image: url("https://s30.postimg.org/piaf1stgx/rachel_large.png");
}
.spotlight .flex-row .dept-wrap .member-spotlight .member-content { display: inline-block; padding: 20px; vertical-align: top; width: 45%;
}
.spotlight .flex-row .dept-wrap .member-spotlight .member-content p.question { font-weight: 800; margin-bottom: 0;
}
.spotlight .flex-row .dept-wrap .member-spotlight .member-content p:last-child { margin-bottom: 0;
}
.spotlight .flex-row .dept-wrap .member-spotlight .member-content a { color: #2E7AD1; font-weight: initial;
}
.spotlight .flex-row .dept-wrap .member-spotlight .member-content a:hover { text-decoration: underline;
}
@media (max-width: 600px) { .spotlight .team-tabs li { height: auto; margin: 0 !important; width: 32.5%; } .spotlight .team-tabs li img { width: 100%; }
}
@media (max-width: 975px) { .spotlight .flex-row .col-sm-2 { flex-basis: 100%; max-width: none; } .spotlight .flex-row .col-sm-2 .team-tabs { padding: 10px 0 0 10px; position: absolute; } .spotlight .flex-row .col-sm-2 .team-tabs li { height: auto; margin: 0; padding-bottom: 0; width: 100px; } .spotlight .flex-row .col-sm-2 .team-tabs li img { height: 90px; width: auto; } .spotlight .flex-row .col-sm-10 { flex-basis: 100%; max-width: none; padding: 0; }
}
@media (max-width: 1045px) { .spotlight .flex-row .col-sm-10 .headshot { max-height: 300px; width: 100% !important; } .spotlight .flex-row .dept-wrap .member-spotlight .member-content { width: 90%; }
}
@media (max-width: 1120px) and (min-width: 1045px) { .spotlight .flex-row .dept-wrap .member-spotlight .headshot { width: 45%; } .spotlight .flex-row .dept-wrap .member-spotlight .member-content { width: 49%; }
}
/* Inherit Flexbox Queries */
@media only screen and (min-width: 48em) { .col-sm-2, .col-sm-10 { box-sizing: border-box; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; -webkit-box-flex: 0; flex: 0 0 auto; padding-right: 1rem; padding-left: 1rem; }
}
@media only screen and (min-width: 48em) { .col-sm-2 { -ms-flex-preferred-size: 16.667%; -webkit-flex-basis: 16.667%; flex-basis: 16.667%; max-width: 16.667%; } .col-sm-10 { -ms-flex-preferred-size: 83.333%; -webkit-flex-basis: 83.333%; flex-basis: 83.333%; max-width: 83.333%; }
}

Friendly Flexbox Carousel - Script Codes JS Codes

$(document).ready(function() { $('.team-tabs li').on('click', function() { var slideNum = $(this).data('value'); $(this).addClass('active') .siblings().removeClass('active'); $('.' + slideNum).css('display', 'block') .siblings().css('display', 'none'); });
});
Friendly Flexbox Carousel - Script Codes
Friendly Flexbox Carousel - Script Codes
Home Page Home
Developer Kelsey Paone
Username kelseypaone
Uploaded November 28, 2022
Rating 4
Size 5,101 Kb
Views 22,264
Do you need developer help for Friendly Flexbox Carousel?

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!

Kelsey Paone (kelseypaone) Script Codes
Name
Responsive Comparison Table
Sticky Collapsable Footer
A Pen by Kelsey Paone
Qualaroo
Responsive Social Cards
Create amazing video scripts 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!